【WPF学习】04 数据模板

相对于上一节控件模板ControlTemplate定义的是控件的外观及行为，数据模板DataTemplate定义的是数据的可视化结构

DataTemplate允许我们实现通过数据绑定来达到数据驱动UI显示的效果

在下面的实例中，我们首先声明一个包含颜色代码Code和颜色名称Name两个字段的一个构造Color类，再建立一个以Color为元素数据类型的List，

Background可以通过string类型的颜色代码赋值，而TextBlock的Text可以通过String类型值赋值，因此我们只需要在DataTemplate中对Background和Text进行数据绑定即可实现由列表控制特定区域的颜色和文本显示

代码实例：

窗口后台代码：

List<Color> value = new List<Color>();
value.Add(new Color() { Code = "#FFB6C1", Name = "浅粉" });
value.Add(new Color() { Code = "#FFC0CB", Name = "粉红" });
value.Add(new Color() { Code = "#DC143C", Name = "猩红" });
value.Add(new Color() { Code = "#FF69B4", Name = "浅紫" });
value.Add(new Color() { Code = "#FF1493", Name = "深粉" });
value.Add(new Color() { Code = "#EE82EE", Name = "紫罗兰" });
list.ItemsSource = value;

public class Color
{
　　public string Code { get; set; }
　　public string Name { get; set; }
}

窗口XAML代码：

<Grid>
　　<ListBox x:Name="list">
　　　　<ListBox.ItemTemplate>
　　　　　　<DataTemplate>
　　　　　　　　<StackPanel Orientation="Horizontal">
　　　　　　　　　　<Border Width="40"
　　　　　　　　　　　　　　Height="40"
　　　　　　　　　　　　　　Background="{Binding Code}"/> <!--绑定Code字段-->
　　　　　　　　　　　　
　　　　　　　　　　<TextBlock Margin="10.0"
　　　　　　　　　　　　　　　Text="{Binding Name}"/> <!--绑定Name字段-->
　　　　　　　　</StackPanel>
　　　　　　</DataTemplate>
　　　　</ListBox.ItemTemplate>
　　</ListBox>
</Grid>

运行结果：

上面的只作为一个帮助我们理解的小例子（因为我们需要显示的是颜色和颜色名，因此我们也就分别绑定ColorCode和ColorName），我们在后续的WPF代码编写中，也是遵循这种绑定逻辑，基于不同部分对应的内容绑定不同的数据或行为