WPF DataTemplate 数据模板

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

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

1. 非集合控件中使用

xml 复制代码
<UserControl.Resources>
    <DataTemplate x:Key="MyDataTemplate">
        <Grid
            Width="100"
            Height="40"
            Background="DeepPink" />
    </DataTemplate>
</UserControl.Resources>

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

xml 复制代码
<ContentControl ContentTemplate="{StaticResource MyDataTemplate}" />

显示如下:

2. 集合控件中使用

以 ListBox 为例,

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

csharp 复制代码
public class DataTemplateViewModel
{
    public IList<string> MyItems { get; }
    
    public DataTemplateViewModel()
    {
        MyItems = new List<string>() { "Tom~", "Jerry~"};
    }
}
xml 复制代码
<ListBox
    Grid.Column="1"
    ItemsSource="{Binding MyItems}" />

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

新增一个数据模板,

xml 复制代码
<UserControl.Resources>
    <DataTemplate x:Key="MyDataTemplate">
        <Grid
            Width="100"
            Height="40"
            Background="DeepPink">
            <TextBlock Text="{Binding .}" Foreground="Yellow" />
        </Grid>
    </DataTemplate>
</UserControl.Resources>

并应用该模板后,

xml 复制代码
<ListBox
    Grid.Column="1"
    ItemTemplate="{StaticResource MyDataTemplate}"
    ItemsSource="{Binding MyItems}" />

显示为,

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

3. DataTempate 其它用法

3.1 自动匹配数据类型

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

假设申明一个图形接口,

csharp 复制代码
public interface IShape
{
    string Color { get; }
}

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

csharp 复制代码
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 中包含这些图形实例,

csharp 复制代码
public class DataTemplateViewModel
{
    public IList<IShape> Shapes { get; }

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

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

xml 复制代码
<ListBox
    Grid.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 方法,

csharp 复制代码
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 了,

xml 复制代码
<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>

应用选择器,

xml 复制代码
<ListBox
    Grid.Column="1"
    ItemTemplateSelector="{StaticResource MyDataTemplateSelector}"
    ItemsSource="{Binding Shapes}">
</ListBox>

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

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

显示效果,

相关推荐
baivfhpwxf20231 天前
wpf ScaleTransform
wpf
C#_西哥1 天前
wpf stylet框架 关于View与viewmodel自动关联绑定的问题
wpf
wqq10271 天前
WPF 图标原地旋转
wpf
续亮~1 天前
基于Redis实现RAG架构的技术解析与实践指南
java·redis·架构·wpf·springai·文档检索
Pasregret2 天前
09-RocketMQ 深度解析:从原理到实战,构建可靠消息驱动微服务
微服务·wpf·rocketmq
沉到海底去吧Go2 天前
【图片识别分类】如何快速识别照片中的水印文字,对图片进行关键字分类,快速整理水印相机拍摄图片,基于WPF和腾讯OCR的技术实现
数码相机·ocr·wpf
界面开发小八哥2 天前
界面控件DevExpress WPF v25.1新功能预览 - 文档处理类功能升级
c#·wpf·界面控件·devexpress·ui开发
He BianGu2 天前
【WPF-VisionMaster源代码】应用OpenCVSharp仿Vision Master页面开发的软件源代码
图像处理·opencv·c#·wpf·机器视觉·visionmaster·视频处理
User:你的影子2 天前
WPF 点击按钮,显示隐藏另一个控件
wpf
猫霸5 天前
WPF静态资源StaticResource和动态资源DynamicResource有什么区别,x:Static又是什么意思?
分布式·c#·.net·wpf