Windows Phone 7 使用数据模板DataTemplate进行数据绑定

一、DataTemplate

DataTemplate 类 描述数据对象的可视结构。
命名空间: System.Windows

XAML
<DataTemplate ...>
templateContent
</DataTemplate>

XAML 值
templateContent 
定义此 DataTemplate 的对象树。该树必须有一个根元素,而该根元素可以有零个或更多的子元素。

通常使用 DataTemplate 指定数据的直观表示。将 ItemsControl(如 ListBox)绑定到整个集合时,DataTemplate 对象尤其有用。可以使用 DataTemplate 定义数据对象的外观。DataTemplate 的内容变成数据对象的可视结构。

可以在 DataTemplate 中使用数据绑定。例如,假定 ListBox 绑定到 Customer 对象的集合,并且将 ItemTemplate 属性设置为 DataTemplate。创建 ListBox 时,将为集合中的每个 Customer 创建一个 ListBoxItem,并将 ListBoxItem 的 DataContext 设置为相应的客户。也就是说,第一个 ListBoxItem 的 DataContext 设置为第一个客户,第二个 ListBoxItem 的 DataContext 设置为第二个客户,依此类推。可以将 DataTemplate 中的元素绑定到 Customer 对象的属性。

定义用于创建数据模板的内容的 XAML 用法不作为可设置的属性公开。这是内置于 DataTemplate 对象元素的 XAML 处理的特殊行为。

示例
--------------------------------------------------------------------------------

下面的示例使用 DataTemplate 显示 ListBox 的项。在此示例中,ListBox 绑定到 Customer 对象的集合。DataTemplate 包含 TextBlock 控件,这些控件绑定到 FirstName、LastName 和 Address 属性。

XAML 
<Grid>
<Grid.Resources>
<src:Customers x:Key="customers"/>
</Grid.Resources>

<ListBox ItemsSource="{StaticResource customers}" Width="350" Margin="0,5,0,10">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Padding="5,0,5,0"
Text="{Binding FirstName}" />
<TextBlock Text="{Binding LastName}" />
<TextBlock Text=", " />
<TextBlock Text="{Binding Address}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>


下面的示例演示 Customer 类和 ListBox 绑定到的集合。
public class Customer
{
public String FirstName { get; set; }
public String LastName { get; set; }
public String Address { get; set; }

public Customer(String firstName, String lastName, String address)
{
this.FirstName = firstName;
this.LastName = lastName;
this.Address = address;
}

}

public class Customers : ObservableCollection<Customer>
{
public Customers()
{
Add(new Customer("Michael", "Anderberg",
"12 North Third Street, Apartment 45"));
Add(new Customer("Chris", "Ashton",
"34 West Fifth Street, Apartment 67"));
Add(new Customer("Cassie", "Hicks",
"56 East Seventh Street, Apartment 89"));
Add(new Customer("Guido", "Pica",
"78 South Ninth Street, Apartment 10"));
}

}

二、DataTemplateSelector

DataTemplateSelector 类
提供一种方式来根据数据对象和数据绑定元素选择 DataTemplate。 
命名空间: System.Windows.Controls

通常,如果有多个 DataTemplate 可用于同一类型的对象,并且您希望根据每个数据对象的属性提供自己的逻辑来选择要应用的 DataTemplate,则应创建 DataTemplateSelector。

若要创建模板选择器,请创建继承自 DataTemplateSelector 的类并重写 SelectTemplate 方法。 在定义您的类后,就可以将类的实例分配到您的元素的模板选择器属性。

示例
--------------------------------------------------------------------------------

在此示例中,绑定源是 Task 对象的列表。 Task 对象的属性之一为 Priority。 有两个已定义的数据模板:myTaskTemplate 和 importantTaskTemplate。

若要提供逻辑以根据数据对象的 Priority 值选择要使用的 DataTemplate,请创建 DataTemplateSelector 的子类并重写 SelectTemplate 方法。 在下面的示例中,SelectTemplate 方法提供逻辑以根据 Priority 属性的值返回适当的模板。 可以在封装 Window 元素的资源中找到要返回的模板。

using System.Windows;
using System.Windows.Controls;

namespace SDKSample
{
public class TaskListDataTemplateSelector : DataTemplateSelector
{
public override DataTemplate
SelectTemplate(object item, DependencyObject container)
{
if (item != null && item is Task)
{
Task taskitem = item as Task;
Window window = Application.Current.MainWindow;

if (taskitem.Priority == 1)
return
window.FindResource("importantTaskTemplate") as DataTemplate;
else
return
window.FindResource("myTaskTemplate") as DataTemplate;
}

return null;
}
}
}


然后,我们可以将 TaskListDataTemplateSelector 声明为资源:

XAML 复制 
<Window.Resources>


...


<local:TaskListDataTemplateSelector x:Key="myDataTemplateSelector"/>


...


</Window.Resources>


若要使用模板选择器资源,请将其分配到 ListBox 的 ItemTemplateSelector 属性。 ListBox 为基础集合中的每一项调用 TaskListDataTemplateSelector 的 SelectTemplate 方法。 该调用会将数据对象作为项参数来传递。 然后,将该方法返回的 DataTemplate 应用于该数据对象。

XAML 
<ListBox Width="400" Margin="10"
ItemsSource="{Binding Source={StaticResource myTodoList}}"
ItemTemplateSelector="{StaticResource myDataTemplateSelector}"
HorizontalContentAlignment="Stretch"/>

三、ContentControl

ContentControl 可以包含任何类型的公共语言运行库对象(如字符串或 DateTime 对象)或 UIElement 对象(如 Rectangle 或 Panel)。 这使您能够向控件(如 Button 和 CheckBox)中添加丰富的内容。

ContentControl 具有有限的默认样式。 如果要增强该控件的外观,可以创建新的 DataTemplate

四、实例

 

Windows Phone 7 使用数据模板DataTemplate进行数据绑定 

 


  1. <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
  2.               
  3.             <ListBox x:Name="listBox" HorizontalContentAlignment="Stretch"> 
  4.                 <ListBox.ItemTemplate> 
  5.                     <DataTemplate> 
  6.                         <local:FoodTemplateSelector Content="{Binding}"> 
  7.                             <local:FoodTemplateSelector.Healthy> 
  8.                                 <DataTemplate> 
  9.                                     <StackPanel Orientation="Horizontal" Background="YellowGreen" Width="400" Margin="10"> 
  10.                                         <Image Source="{Binding IconUri}" Stretch="None"/> 
  11.                                         <TextBlock Text="{Binding Name}" FontSize="40" Foreground="Black" Width="280"/> 
  12.                                         <TextBlock Text="healty" /> 
  13.                                     </StackPanel> 
  14.                                 </DataTemplate> 
  15.                                 </local:FoodTemplateSelector.Healthy> 
  16.                             <local:FoodTemplateSelector.UnHealthy> 
  17.                                 <DataTemplate> 
  18.                                     <Border BorderBrush="Red" BorderThickness="2"  Width="400" Margin="10"> 
  19.                                     <StackPanel Orientation="Horizontal"> 
  20.                                         <Image Source="{Binding IconUri}" Stretch="None"/> 
  21.                                             <TextBlock Text="{Binding Name}" FontSize="40" Width="280"/> 
  22.                                         <Image Source="Images/attention.png" Stretch="None" Margin="10,0,0,0"/> 
  23.                                     </StackPanel> 
  24.                                     </Border> 
  25.                                 </DataTemplate> 
  26.                             </local:FoodTemplateSelector.UnHealthy> 
  27.                             <local:FoodTemplateSelector.NotDetermined> 
  28.                                 <DataTemplate> 
  29.                                     <StackPanel Orientation="Horizontal" Background="Gray" Width="400" Margin="10"> 
  30.                                         <Image Source="{Binding IconUri}" Stretch="None"/> 
  31.                                         <TextBlock Text="{Binding Name}" FontSize="40" Width="280"/> 
  32.                                         <Image Source="Images/question.png" Stretch="None" Margin="10,0,0,0"/> 
  33.                                     </StackPanel> 
  34.                                 </DataTemplate> 
  35.                             </local:FoodTemplateSelector.NotDetermined> 
  36.                         </local:FoodTemplateSelector> 
  37.                     </DataTemplate> 
  38.                 </ListBox.ItemTemplate> 
  39.             </ListBox> 
  40.         </Grid> 
  41.     </Grid> 

 


  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Windows;  
  6. using System.Windows.Controls;  
  7. using System.Windows.Documents;  
  8. using System.Windows.Input;  
  9. using System.Windows.Media;  
  10. using System.Windows.Media.Animation;  
  11. using System.Windows.Shapes;  
  12. using Microsoft.Phone.Controls;  
  13.  
  14. namespace WP7SampleProject10  
  15. {  
  16.     public class FoodTemplateSelector : DataTemplateSelector  
  17.     {  
  18.         public DataTemplate Healthy  
  19.         {  
  20.             get;  
  21.             set;  
  22.         }  
  23.  
  24.         public DataTemplate UnHealthy  
  25.         {  
  26.             get;  
  27.             set;  
  28.         }  
  29.  
  30.         public DataTemplate NotDetermined  
  31.         {  
  32.             get;  
  33.             set;  
  34.         }  
  35.  
  36.         public override DataTemplate SelectTemplate(object item, DependencyObject container)  
  37.         {  
  38.             Data foodItem = item as Data;  
  39.             if (foodItem != null)  
  40.             {  
  41.                 if (foodItem.Type == "Healthy")  
  42.                 {  
  43.                     return Healthy;  
  44.                 }  
  45.                 else if (foodItem.Type == "NotDetermined")  
  46.                 {  
  47.                     return NotDetermined;  
  48.                 }  
  49.                 else  
  50.                 {  
  51.                     return UnHealthy;  
  52.                 }  
  53.             }  
  54.  
  55.             return base.SelectTemplate(item, container);  
  56.         }  
  57.     }  
  58.  
  59.     public class Data  
  60.     {  
  61.         public string Name  
  62.         {  
  63.             get;  
  64.             set;  
  65.         }  
  66.  
  67.         public string Description  
  68.         {  
  69.             get;  
  70.             set;  
  71.         }  
  72.  
  73.         public string IconUri  
  74.         {  
  75.             get;  
  76.             set;  
  77.         }  
  78.  
  79.         public string Type  
  80.         {  
  81.             get;  
  82.             set;  
  83.         }  
  84.     }  
  85.  
  86.     public partial class MainPage : PhoneApplicationPage  
  87.     {  
  88.         // Constructor  
  89.         public MainPage()  
  90.         {  
  91.             InitializeComponent();  
  92.  
  93.             List<Data> list = new List<Data>();  
  94.             Data item0 = new Data() { Name = "Tomato"IconUri = "Images/Tomato.png"Type = "Healthy" };  
  95.             Data item1 = new Data() { Name = "Beer"IconUri = "Images/Beer.png"Type = "NotDetermined" };  
  96.             Data item2 = new Data() { Name = "Fries"IconUri = "Images/fries.png"Type = "Unhealthy" };  
  97.             Data item3 = new Data() { Name = "Sandwich"IconUri = "Images/Hamburger.png"Type = "Unhealthy" };  
  98.             Data item4 = new Data() { Name = "Ice-cream"IconUri = "Images/icecream.png"Type = "Healthy" };  
  99.             Data item5 = new Data() { Name = "Pizza"IconUri = "Images/Pizza.png"Type = "Unhealthy" };  
  100.             Data item6 = new Data() { Name = "Pepper"IconUri = "Images/Pepper.png"Type = "Healthy" };  
  101.             list.Add(item0);  
  102.             list.Add(item1);  
  103.             list.Add(item2);  
  104.             list.Add(item3);  
  105.             list.Add(item4);  
  106.             list.Add(item5);  
  107.             list.Add(item6);  
  108.  
  109.             this.listBox.ItemsSource = list;  
  110.                   
  111.         }  
  112.  
  113.     }  

 


  1. using System;  
  2. using System.Net;  
  3. using System.Windows;  
  4. using System.Windows.Controls;  
  5. using System.Windows.Documents;  
  6. using System.Windows.Ink;  
  7. using System.Windows.Input;  
  8. using System.Windows.Media;  
  9. using System.Windows.Media.Animation;  
  10. using System.Windows.Shapes;  
  11.  
  12. namespace WP7SampleProject10  
  13. {  
  14.     public abstract class DataTemplateSelector : ContentControl  
  15.     {  
  16.         public virtual DataTemplate SelectTemplate(object item, DependencyObject container)  
  17.         {  
  18.             return null;  
  19.         }  
  20.  
  21.         protected override void OnContentChanged(object oldContent, object newContent)  
  22.         {  
  23.             base.OnContentChanged(oldContent, newContent);  
  24.  
  25.             ContentTemplate = SelectTemplate(newContent, this);  
  26.         }  
  27.     }  
  28.       

 


本文转自linzheng 51CTO博客,原文链接:http://blog.51cto.com/linzheng/1078720

上一篇:如何在Antergos/Arch Linux中使用iPhone


下一篇:Powershell AWS 自动化管理 (12) - 创建一个高可用的WordPress博客(下)