快速制作网站整站优化外包服务

DataTemplate 顾名思义，数据模板，在 wpf 中使用非常频繁。

它一般用在带有 DataTemplate 依赖属性的控件中，如 ContentControl、集合控件 ListBox、ItemsControl 、TabControls 等。

1. 非集合控件中使用

<UserControl.Resources><DataTemplate x:Key="MyDataTemplate"><GridWidth="100"Height="40"Background="DeepPink" /></DataTemplate>
</UserControl.Resources>

在前端代码中，应用这个数据模板，

<ContentControl ContentTemplate="{StaticResource MyDataTemplate}" />

显示如下：

2. 集合控件中使用

以 ListBox 为例，

假设 ListBox 绑定数据源为下面的 MyItems ，

public class DataTemplateViewModel
{public IList<string> MyItems { get; }public DataTemplateViewModel(){MyItems = new List<string>() { "Tom~", "Jerry~"};}
}

<ListBoxGrid.Column="1"ItemsSource="{Binding MyItems}" />

在不设置数据模板的情况下，默认就是显示字符串，

新增一个数据模板，

<UserControl.Resources><DataTemplate x:Key="MyDataTemplate"><GridWidth="100"Height="40"Background="DeepPink"><TextBlock Text="{Binding .}" Foreground="Yellow" /></Grid></DataTemplate>
</UserControl.Resources>

并应用该模板后，

<ListBoxGrid.Column="1"ItemTemplate="{StaticResource MyDataTemplate}"ItemsSource="{Binding MyItems}" />

显示为，

通过上面的例子，我们可以知道，数据模板，可以用来自定义数据展示的方式，包括：格式、效果、样式等。

3. DataTempate 其它用法

3.1 自动匹配数据类型

上面演示的集合中使用 DataTemplate 的方式，数据类型相对简单。实际开发中经常要根据不同数据类型，展示不同数据样式。

假设申明一个图形接口，

public interface IShape
{string Color { get; }
}

一个圆、矩形类各自实现该接口，

public class Circle : IShape
{public string Color { get; }public Circle(string color){Color = color;}
}public class Rectange : IShape
{public string Color { get; }public Rectange(string color){Color = color;}
}

集合 Shapes 中包含这些图形实例，

public class DataTemplateViewModel
{public IList<IShape> Shapes { get; }public DataTemplateViewModel(){Shapes = new List<IShape>(){new Circle("#CC0066"),new Rectange("#009900"),};}
}

设置 DataTemplate 的 DataType 属性（不设置 x:key），就可以根据图形类型，自动应用对应数据模板，

<ListBoxGrid.Column="1"ItemsSource="{Binding Shapes}"><ListBox.Resources><DataTemplate DataType="{x:Type views:Circle}"><Ellipse Width="60" Height="60" Fill="{Binding Color}" /></DataTemplate><DataTemplate DataType="{x:Type views:Rectange}"><Rectangle Width="60" Height="60" Fill="{Binding Color}" /></DataTemplate></ListBox.Resources>
</ListBox>

效果如下，

3.2 DataTemplateSelector

使用 DataTemplateSelector （模板选择器）也可以同样实现上面的效果。

我们只需要继承 DataTemplateSelector 类，并重载其 SelectTemplate 方法，

public class MyDataTemplateSelector : DataTemplateSelector
{public DataTemplate CircleTemplate { get; set; }public DataTemplate RectTemplate { get; set; }public DataTemplate EmptyTemplate { get; set; }public override DataTemplate SelectTemplate(object item, DependencyObject container){if (item is Circle){return CircleTemplate;}else if (item is Rectange){return RectTemplate;}return EmptyTemplate;}
}

数据模板 + 选择器 前端定义，这时就要设置 DataTemplate 的 x:key 了，

<UserControl.Resources><DataTemplate x:Key="Circle.DataTemplate"><Ellipse Width="60" Height="60" Fill="{Binding Color}" /></DataTemplate><DataTemplate x:Key="Rectangle.DataTemplate"><Rectangle Width="60" Height="60" Fill="{Binding Color}" /></DataTemplate><DataTemplate x:Key="Empty.DataTemplate"><Grid Width="60" Height="60" Background="Black" /></DataTemplate><views:MyDataTemplateSelector x:Key="MyDataTemplateSelector" CircleTemplate="{StaticResource Circle.DataTemplate}"RectTemplate="{StaticResource Rectangle.DataTemplate}" EmptyTemplate="{StaticResource Empty.DataTemplate}" />
</UserControl.Resources>

应用选择器，

<ListBoxGrid.Column="1"ItemTemplateSelector="{StaticResource MyDataTemplateSelector}"ItemsSource="{Binding Shapes}">
</ListBox>

新增一个 null 元素配合实验，

Shapes = new List<IShape>()
{new Circle("#CC0066"),new Rectange("#009900"),null,
};

显示效果，