WPF中的数据模板用法介绍

更新时间：2022年01月28日 09:17:08 作者：痕迹g

这篇文章介绍了WPF中的数据模板用法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

数据模板常用在3种类型的控件, 下图形式:

1.Grid这种列表表格中修改Cell的数据格式, CellTemplate可以修改单元格的展示数据的方式。
2.针对列表类型的控件, 例如树形控件，下拉列表，列表控件, 可以修改其中的ItemTemplate。
3.修改ContentTemplate, 例UserControl控件的数据展现形式。

CellTemplate 模板

下面用一个例子, 来演示CellTemplate使用。例子实现一个DataGrid 展示一个普通的数据标, 同时新增一列CellTemplate添加两个自定义的按钮, 如下图所示。

            <DataGrid Name="gd" AutoGenerateColumns="False" CanUserSortColumns="True"  CanUserAddRows="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="{Binding UserName}" Width="100" Header="学生姓名"/>
                    <DataGridTextColumn Binding="{Binding ClassName}" Width="100" Header="班级名称"/>
                    <DataGridTextColumn Binding="{Binding Address}" Width="200" Header="地址"/>
                    <DataGridTemplateColumn Header="操作" Width="100" >
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left">
                                    <Button Content="编辑"/>
                                    <Button Margin="8 0 0 0" Content="删除" />
                                </StackPanel>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                </DataGrid.Columns>
            </DataGrid>

完成操作, 然后后台进行该DataGrid进行绑定数据, 查询绑定后的效果。

            List<Student> students = new List<Student>();
            students.Add(new Student() { UserName = "小王", ClassName = "高二三班", Address = "广州市" });
            students.Add(new Student() { UserName = "小李", ClassName = "高三六班", Address = "清远市" });
            students.Add(new Student() { UserName = "小张", ClassName = "高一一班", Address = "深圳市" });
            students.Add(new Student() { UserName = "小黑", ClassName = "高一三班", Address = "赣州市" });
            gd.ItemsSource = students;

最终的效果, 在数据的表格最后一列, 将会在一列中分别生成两个普通按钮。

ItemTemplate

在列表的控件中, 常常会出现一些需求, 类似在下拉控件或树控件中添加一个 CheckBox选择框, 一个图标或图片, 这个时候, 我们就可以利用自定义的DataTemplate 来实现这个功能,

接下来, 用一个示例来简单演示其功能, 同样, 该例子演示利用 ListBox 和 ComboBox来绑定一个颜色代码列表, 同时展示其颜色。

    <Window.Resources>
        <DataTemplate x:Key="comTemplate">
            <StackPanel Orientation="Horizontal" Margin="5,0">
                <Border Width="10" Height="10" Background="{Binding Code}"/>
                <TextBlock Text="{Binding Code}" Margin="5,0"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <ComboBox Name="cob" Width="120" Height="30" ItemTemplate="{StaticResource comTemplate}"/>
            <ListBox Name="lib" Width="120" Height="100" Margin="5,0"  ItemTemplate="{StaticResource comTemplate}"/>
        </StackPanel>
    </Grid>

上面的代码中, 定义了一个DataTemplate , 顶一个长宽10px的border用于显示颜色代码, 绑定到Border背景颜色上, 定义了一个TextBlock用于展示颜色的代码。

下面为后台的绑定代码

            List<Color> ColorList = new List<Color>();
            ColorList.Add(new Color() { Code = "#FF8C00" });
            ColorList.Add(new Color() { Code = "#FF7F50" });
            ColorList.Add(new Color() { Code = "#FF6EB4" });
            ColorList.Add(new Color() { Code = "#FF4500" });
            ColorList.Add(new Color() { Code = "#FF3030" });
            ColorList.Add(new Color() { Code = "#CD5B45" });

            cob.ItemsSource = ColorList;
            lib.ItemsSource = ColorList;

最终的测试效果如下所示:

ItemsControl

定义ItemsControl 主要分两个步骤:

1.设置ItemsPanel容器, 用于容纳列表的最外层容器
2.定义子项的DataTemplate

           <ItemsControl Name="ic">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Width="50" Height="50" Content="{Binding Code}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

上面代码中, 定义了一个WarpPanel 容器为ItemControl的最外层容器, 子项数据模板则绑定了一个按钮, 后台代码绑定几条数据, 查看其效果: 横排排列五个按钮, 内容分别是 1~6.

            List<Test> tests = new List<Test>();
            tests.Add(new Test() { Code = "1" });
            tests.Add(new Test() { Code = "2" });
            tests.Add(new Test() { Code = "3" });
            tests.Add(new Test() { Code = "4" });
            tests.Add(new Test() { Code = "6" });
            ic.ItemsSource = tests;

查看ItemsControl可视化树的结构组成?

剖析该结构, 可以看到, 紫色的1处, 为最外层的WrapPanel容器, 用于容纳排列按钮, 由于该示例设置了 Orientation="Horizontal" , 所以按钮则按水平排列, 再看橘色 2处, 可以看见子项外层由一个内容呈现包括着, 内容为一个按钮, 由于绑定搞得数据是5个, 所以分别生成了内容为1~6的5个按钮。

说明: 那是不是以为则ItemsPanel 放置任何元素都行? 很明显是不行的。 ItemsPanel的容器需要满足一个条件, 则是属于Panel族的元素, 否则会提示以下错误:

关于每种元素的分类可以看关于控件介绍的文章: https://www.jb51.net/article/236066.htm

ContentTemplate

长话短说, 这个东西用的太少了, 详细的可以搜索一下相关的使用资料。

本章测试代码下载

到此这篇关于WPF中的数据模板用法介绍的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解asp.net core 依赖注入
这篇文章主要介绍了详解asp.net core 依赖注入的相关知识，文中讲解非常详细，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-06-06
WPF框架Prism中导航Navigation用法介绍
这篇文章介绍了WPF框架Prism中导航Navigation的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-02-02
MVC中Action方法的返回类型介绍
这篇文章介绍了MVC中的Action方法的返回类型，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-03-03
ASP.NET Core MVC路由(Routing)的用法
这篇文章介绍了ASP.NET Core MVC路由(Routing)的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-04-04
ASP.NET中Application、Cookie、Session、Cache和ViewState
本文主要介绍Application、Cookie、Session、Cache和ViewState，并总结了在什么情况下使用他们，希望对大家有所帮助。
2016-04-04
ABP基础架构深入探索
这篇文章主要介绍了ABP基础架构深入探索，为了了解应用程序是如何配置和初始化，本文将探讨ASP.NET Core和ABP框架最基本的构建模块
2022-05-05
ASP.NET处理HTTP请求的流程:IHttpModule、IHttpHandler与管道事件
这篇文章介绍了ASP.NET处理HTTP请求的流程:IHttpModule、IHttpHandler与管道事件，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-05-05
Visual Studio快速开发以及Visual Studio 2010新功能介绍
一直以来都在摸索着vb6.0的一些用法和语法，趁这次培训的机会正好整理Visual Studio的一些快速开发的技巧，还有一些vs2010的新功能收集和体会，把培训的一些文档性质的记录下来，希望对各位有用
2011-12-12
几个C#常用正则表达式的总结
几个C#常用正则表达式的总结...
2006-08-08
WCF入门需要掌握的基础知识
这篇文章介绍了WCF入门需要掌握的基础知识，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-01-01