WPF之浅谈数据模板(DataTemplate)

这篇具有很好参考价值的文章主要介绍了WPF之浅谈数据模板(DataTemplate)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

数据模板有什么用

简而言之,数据模板能让你更方便、更灵活的显示你的各类数据。只有你想不到,没有它做不到的(感觉有点夸张,实践之后,你就觉得一点不夸张 😎)。

直接对比下效果:

无数据模板

WPF之浅谈数据模板(DataTemplate)

应用了数据模板

WPF之浅谈数据模板(DataTemplate)

好了,下面我们一步一步来看看数据模板如何做到化腐朽为神奇的!

一些前置条件

  • 假设你已了解了MVVM设计模式

  • 假设你已了解了一些数据绑定知识

  • 假设你已了解了一些样式知识

代码准备

  1. 首先准备一个Model,代码如下:

    public class Employee
        {
            public string Name { get; set; }
            public Sex Sex { get; set; }
            public string Job { get; set; }
            public string Department { get; set; }
            public string Email { get; set; }
        }
    
        public enum Sex
        {
            Male,
            Female
        }
    
  2. 在准备好ViewModel,代码如下:

    public class MainViewModel: BindableBase
        {
            private IEnumerable<Employee> _employees;
    
            public IEnumerable<Employee> Employees
            {
                get => _employees;
                set => SetProperty(ref _employees, value);    
            }
    
            public MainViewModel()
            {
                Employees = new List<Employee>()
                {
                    new Employee() {Name="张明",Department="技术售后部",Job="售后工程师",Sex=Sex.Male,Email="Zhang.San@wpf.com"},
                    new Employee() {Name="葛倩",Department="人事部",Job="招聘专员",Sex=Sex.Female,Email="Ge.Qian@wpf.com"},
                    new Employee() {Name="王小伟",Department="研发部",Job="高级软件工程师",Sex=Sex.Male,Email="Wang.Xiaowei@wpf.com"},
                };
            }
    
        }
    

没有数据模板

准备好没有使用数据模板的view的xaml代码

<Window x:Class="WpfPractice.DataTemplateDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfPractice.DataTemplateDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ListBox ItemsSource="{Binding Employees}"
                 HorizontalContentAlignment="Stretch">

        </ListBox>
    </Grid>
</Window>

运行下程序,就会出现这样的界面

WPF之浅谈数据模板(DataTemplate)

熟悉.Net的同学,应该看出来每一项显示的是对象的ToString方法返回的值。因为我们集合中存放的是复杂类型的对象,如果没有数据模板,ListBox默认就会用ToString去显示。而ToString方法默认返回的就是对象的类型限定名。

既然了解到这个原理,那我们重载实现下ToString方法

public class Employee
    {
        public string Name { get; set; }
        public Sex Sex { get; set; }
        public string Job { get; set; }
        public string Department { get; set; }
        public string Email { get; set; }
        public override string ToString()
        {
            return $"{Name},{Job},{Department}";
        }
    }

再次运行程序,结果如下

WPF之浅谈数据模板(DataTemplate)

这次算是显示出一些有用信息了,但这样的UI体验,未免太差。如何让我们的数据呈现更加吸引人呢?下面就轮到数据模板大显身手了。

应用数据模板

直接上应用了数据模板的xaml代码

<Window x:Class="WpfPractice.DataTemplateDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfPractice.DataTemplateDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ListBox ItemsSource="{Binding Employees}"
                 HorizontalContentAlignment="Stretch">
            <ListBox.ItemTemplate>
                <DataTemplate DataType="{x:Type local:Employee}">
                    <Border Padding="5" BorderThickness="1" BorderBrush="Gray" CornerRadius="5">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="80"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <TextBlock VerticalAlignment="Center" Text="{Binding Name}" FontSize="18" FontWeight="Black"/>
                            <StackPanel Grid.Column="1">
                                <TextBlock Text="{Binding Job}"/>
                                <TextBlock Text="{Binding Department}"/>
                                <TextBlock Text="{Binding Email}"/>
                            </StackPanel>
                        </Grid>
                    </Border>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

其实数据模板就是把对象的属性绑定到不同的UI控件上,然后通过合理的布局,就能显示让数据显示的更加美观了。

WPF之浅谈数据模板(DataTemplate)

怎么样?效果完全就不一样了,到这里,相信同学你应该能get到数据模板的作用了!当然这个只是数据模板的最基本用法,其实数据模板还有其他更强大的功能。比如可以通过数据模板让男性员工的名字显示成淡蓝色,女性的名字显示成淡绿色。这个功能下面触发器的部分会介绍。

我们还是接着数据模板定义这部分内容,我们是通过重写了ListBox.ItemTemplate来定义数据模板的,但如果在其他控件我们也要显示这样,岂不是在定义一遍这个数据模板?这样明显不符合我们代码复用的原则。还好,在wpf中,我们可以通过资源的方式来定义通用的数据模板,代码如下

<Window x:Class="WpfPractice.DataTemplateDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfPractice.DataTemplateDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <DataTemplate DataType="{x:Type local:Employee}">
            <Border Padding="5" BorderThickness="1" BorderBrush="Gray" CornerRadius="5">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <TextBlock VerticalAlignment="Center" Text="{Binding Name}" FontSize="18" FontWeight="Black"/>
                    <StackPanel Grid.Column="1">
                        <TextBlock Text="{Binding Job}"/>
                        <TextBlock Text="{Binding Department}"/>
                        <TextBlock Text="{Binding Email}"/>
                    </StackPanel>
                </Grid>
            </Border>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListBox ItemsSource="{Binding Employees}"
                 HorizontalContentAlignment="Stretch">
        </ListBox>
    </Grid>
</Window>

此时我们发现,并不需要重新定义ListBox.ItemTemplate,但运行结果和上面保持一致!

数据触发器

前面我们提到可以通过数据模板让男性员工的名字显示成淡蓝色,女性的名字显示成淡绿色,其实就可以通过数据触发器来实现这样的功能。

这里简单说下触发器的作用,更详细的去看[微软的官方文档](DataTrigger Class (System.Windows) | Microsoft Learn)。触发器就是当绑定的数据满足某个条件时,可以去设置一些控件的属性值,或者执行一些动作(例如动画)。

基于触发器原理,实现的代码如下

<Window.Resources>
        <DataTemplate DataType="{x:Type local:Employee}">
                    <Border Padding="5" BorderThickness="1" BorderBrush="Gray" CornerRadius="5">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="80"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <TextBlock x:Name="txtName" VerticalAlignment="Center" Text="{Binding Name}" FontSize="18" FontWeight="Black"/>
                            <StackPanel Grid.Column="1">
                                <TextBlock Text="{Binding Job}"/>
                                <TextBlock Text="{Binding Department}"/>
                                <TextBlock Text="{Binding Email}"/>
                            </StackPanel>
                        </Grid>
                    </Border>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Sex}" Value="Male">
                    <Setter TargetName="txtName" Property="Foreground" Value="LightBlue"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding Sex}" Value="Female">
                    <Setter TargetName="txtName" Property="Foreground" Value="LightGreen"/>
                </DataTrigger>
            </DataTemplate.Triggers>
         </DataTemplate>
    </Window.Resources>

运行结果
WPF之浅谈数据模板(DataTemplate)

我们可以看到是通过修改显示名字的TextBlock的字体颜色来实现我们需求的,其实我们可以同时设置多个控件的属性来满足更复杂的需求的。

到这里,浅谈数据模板就接近尾声了,所谓浅谈,其实把数据模板的核心用法都覆盖到了,在实际项目开发中,都是基于这些知识的灵活应用!

最后

奉上源代码 https://gitee.com/liuww06/wpfpractice/tree/master/src/WpfPractice.DataTemplateDemo文章来源地址https://www.toymoban.com/news/detail-482608.html

到了这里,关于WPF之浅谈数据模板(DataTemplate)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WPF基础入门-Class3-WPF数据模板

    Class3:WPF数据模板 1、先在cs文件中定义一些数据 2、xaml中编写模板 3、效果:

    2024年02月11日
    浏览(35)
  • C# WPF数据绑定方法以及重写数据模板后数据绑定

    写在前面 本文将会介绍WPF如何 实现前后端数据绑定 和在进行 数据绑定时常用的方法和类 以及对于DataGrid、ListView这样的控件 重写数据模板后控件如何进行数据绑定 。 本文主要针对于数据绑定的基础实现进行介绍,通过此博文你将会有能力编写一个MVVM设计模式的C#、WPF项目

    2023年04月17日
    浏览(44)
  • 浅谈WPF之UI布局

    一个成功的软件,离不开人性化的UI设计,如何抓住用户第一视觉,让用户产生依赖感,合适优雅的布局必不可少。本文以一些简单的小例子,简述 WPF中布局 面板 控件 的使用 ,仅供学习分享使用,如有不足之处,还请指正。 在WPF中,关于布局面板控件,主要有以下几种:

    2024年01月25日
    浏览(33)
  • 浅谈WPF之各种Template

    前几天写了一篇文章【浅谈WPF之控件模板和数据模板】,有粉丝反馈说这两种模板容易弄混,不知道什么时候该用控件模块,什么时候该用数据模板,以及template和itemtemplate之间的关系等,今天专门写一篇文章,简述WPF中各种模板及其相互关系。仅供学习分享使用,如有不足

    2024年02月05日
    浏览(40)
  • 浅谈WPF之ToolTip工具提示

    在日常应用中, 当鼠标放置在某些控件上时,都会有相应的信息提示,从软件易用性上来说,这是一个非常友好的功能设计 。那在WPF中,如何进行控件信息提示呢?这就是本文需要介绍的ToolTip【工具提示】内容,本文以一些简单的小例子,简述如何在 WPF开发中,应用工具提

    2024年02月04日
    浏览(33)
  • 浅谈WPF之Popup弹出层

    在日常开发中,当点击某控件时,经常看到一些弹出框,停靠在某些页面元素的附近,但这些又不是真正的窗口,而是页面的一部分,那这种功能是如何实现的呢?今天就以一个简单的小例子,简述如何 在WPF开发中,通过Popup实现鼠标点击弹出浮动停靠窗口 ,仅供学习分享使

    2024年02月03日
    浏览(49)
  • 浅谈WPF之MVVM工具包

    在之前的WPF示例中,都会用到一个MVVM框,也是一个比较常的MVVM框架,就是MVVM工具包【CommunityToolkit.Mvvm】,今天专门以一个简单的小例子,简述一下MVVM工具包的常见用法,仅供学习分享使用,如有不足之处,还请指正。     CommunityToolkit.Mvvm 包(又名 MVVM 工具包)是一个现代

    2024年03月25日
    浏览(83)
  • 浅谈WPF之DataGrid过滤,分组,排序

    使用过Excel的用户都知道,Excel可以方便的对数据进行分组,过滤,排序等操作,而在WPF中,默认提供的DataGrid只有很简单的功能,那么如何才能让我们开发的DataGrid,也像Excel一样具备丰富的客户端操作呢?今天就以一个简单的小例子,简述如何在WPF中实现DataGrid的过滤,筛选

    2024年02月04日
    浏览(46)
  • 浅谈WPF之控件拖拽与拖动

    使用过office的visio软件画图的小伙伴都知道,画图软件分为两部分,左侧图形库,存放各种图标,右侧是一个画布,将左侧图形库的图标控件拖拽到右侧画布,就会生成一个新的控件,并且可以自由拖动。那如何在WPF程序中,实现类似的功能呢?今天就以一个简单的小例子,

    2024年02月05日
    浏览(58)
  • 浅谈WPF之利用RichTextBox实现富文本编辑器

    在实际应用中,富文本随处可见,如留言板,聊天软件,文档编辑,特定格式内容等,在WPF开发中,如何实现富文本编辑呢?本文以一个简单的小例子,简述如何通过RichTextBox实现富文本编辑功能,主要实现复制,剪切,粘贴,撤销,重做,保存,打开,文本加粗,斜体,下

    2024年02月19日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包