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
四、实例
<
Grid
x:Name
="ContentPanel"
Grid.Row
="1"
Margin
="12,0,12,0"
>
<
ListBox
x:Name
="listBox"
HorizontalContentAlignment
="Stretch"
>
<
ListBox.ItemTemplate
>
<
DataTemplate
>
<
local:FoodTemplateSelector
Content
="
{Binding}
"
>
<
local:FoodTemplateSelector.Healthy
>
<
DataTemplate
>
<
StackPanel
Orientation
="Horizontal"
Background
="YellowGreen"
Width
="400"
Margin
="10"
>
<
Image
Source
="
{Binding IconUri}
"
Stretch
="None"
/>
<
TextBlock
Text
="
{Binding Name}
"
FontSize
="40"
Foreground
="Black"
Width
="280"
/>
<
TextBlock
Text
="healty"
/>
</
StackPanel
>
</
DataTemplate
>
</
local:FoodTemplateSelector.Healthy
>
<
local:FoodTemplateSelector.UnHealthy
>
<
DataTemplate
>
<
Border
BorderBrush
="Red"
BorderThickness
="2"
Width
="400"
Margin
="10"
>
<
StackPanel
Orientation
="Horizontal"
>
<
Image
Source
="
{Binding IconUri}
"
Stretch
="None"
/>
<
TextBlock
Text
="
{Binding Name}
"
FontSize
="40"
Width
="280"
/>
<
Image
Source
="Images/attention.png"
Stretch
="None"
Margin
="10,0,0,0"
/>
</
StackPanel
>
</
Border
>
</
DataTemplate
>
</
local:FoodTemplateSelector.UnHealthy
>
<
local:FoodTemplateSelector.NotDetermined
>
<
DataTemplate
>
<
StackPanel
Orientation
="Horizontal"
Background
="Gray"
Width
="400"
Margin
="10"
>
<
Image
Source
="
{Binding IconUri}
"
Stretch
="None"
/>
<
TextBlock
Text
="
{Binding Name}
"
FontSize
="40"
Width
="280"
/>
<
Image
Source
="Images/question.png"
Stretch
="None"
Margin
="10,0,0,0"
/>
</
StackPanel
>
</
DataTemplate
>
</
local:FoodTemplateSelector.NotDetermined
>
</
local:FoodTemplateSelector
>
</
DataTemplate
>
</
ListBox.ItemTemplate
>
</
ListBox
>
</
Grid
>
</
Grid
>
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
using
Microsoft.Phone.Controls;
namespace
WP7SampleProject10
{
public
class
FoodTemplateSelector : DataTemplateSelector
{
public
DataTemplate Healthy
{
get
;
set
;
}
public
DataTemplate UnHealthy
{
get
;
set
;
}
public
DataTemplate NotDetermined
{
get
;
set
;
}
public
override
DataTemplate SelectTemplate(
object
item, DependencyObject container)
{
Data foodItem
=
item
as
Data;
if
(foodItem
!=
null
)
{
if
(foodItem.Type
==
"
Healthy
"
)
{
return
Healthy;
}
else
if
(foodItem.Type
==
"
NotDetermined
"
)
{
return
NotDetermined;
}
else
{
return
UnHealthy;
}
}
return
base
.SelectTemplate(item, container);
}
}
public
class
Data
{
public
string
Name
{
get
;
set
;
}
public
string
Description
{
get
;
set
;
}
public
string
IconUri
{
get
;
set
;
}
public
string
Type
{
get
;
set
;
}
}
public
partial
class
MainPage : PhoneApplicationPage
{
//
Constructor
public
MainPage()
{
InitializeComponent();
List
<
Data
>
list
=
new
List
<
Data
>
();
Data item0
=
new
Data() { Name
=
"
Tomato
"
, IconUri
=
"
Images/Tomato.png
"
, Type
=
"
Healthy
"
};
Data item1
=
new
Data() { Name
=
"
Beer
"
, IconUri
=
"
Images/Beer.png
"
, Type
=
"
NotDetermined
"
};
Data item2
=
new
Data() { Name
=
"
Fries
"
, IconUri
=
"
Images/fries.png
"
, Type
=
"
Unhealthy
"
};
Data item3
=
new
Data() { Name
=
"
Sandwich
"
, IconUri
=
"
Images/Hamburger.png
"
, Type
=
"
Unhealthy
"
};
Data item4
=
new
Data() { Name
=
"
Ice-cream
"
, IconUri
=
"
Images/icecream.png
"
, Type
=
"
Healthy
"
};
Data item5
=
new
Data() { Name
=
"
Pizza
"
, IconUri
=
"
Images/Pizza.png
"
, Type
=
"
Unhealthy
"
};
Data item6
=
new
Data() { Name
=
"
Pepper
"
, IconUri
=
"
Images/Pepper.png
"
, Type
=
"
Healthy
"
};
list.Add(item0);
list.Add(item1);
list.Add(item2);
list.Add(item3);
list.Add(item4);
list.Add(item5);
list.Add(item6);
this
.listBox.ItemsSource
=
list;
}
}
}
using
System;
using
System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Ink;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
namespace
WP7SampleProject10
{
public
abstract
class
DataTemplateSelector : ContentControl
{
public
virtual
DataTemplate SelectTemplate(
object
item, DependencyObject container)
{
return
null
;
}
protected
override
void
OnContentChanged(
object
oldContent,
object
newContent)
{
base
.OnContentChanged(oldContent, newContent);
ContentTemplate
=
SelectTemplate(newContent,
this
);
}
}
}