WPF基础系列四：模板

模板

文章目录

• 模板
• 前言
• 一、控件模板
• • 1. ControlTemplate
  • 2. ControlTemplate.Triggers 触发器
  • 3. ControlTemplate.EventTrigger 事件触发器
  • 4. 自定义ControlTemplate
• 二、数据模板
• • 1. CellTemplate 模板
  • 2. ItemTemplate模板
  • 3. ContentTemplate
  • 4. ItemsControl

前言

       WPF中我们使用的模板类型总体分为两大类：控件模板类型（ControlTemplate）和数据模板（DataTemplate），其中控件模板又包含ControlTemplate和ItemsPanelTemplate。由命名名称可看出它们都由基类FrameworkTemplate派生而出。

• 控件模板：是对控件属性样式重新定义（类似Style，但更高级），可以运用模板属性来实现控件内部结构的完全改变；
• 数据模板：与数据有关，即便这些数据多数都是固定值，但我们可以使用数据模板来改变它的表现方式，使不变值具有多变的样式。

一、控件模板

       ControlTemplate(控件模板)不仅是用于来定义控件的外观、样式, 还可通过控件模板的触发器(ControlTemplate.Triggers)修改控件的行为、响应动画等。

1. ControlTemplate

       1. 通过剖析控件了解ControlTemplate的组成：

1. 首先,创建一个WPF项目, 创建一个Button按钮, 然后选中该按钮, 右键选择编辑模板>编辑副本：
   
2. 创建完成后, 会在当前页面 键下面生成一些样式片段 , 一个key为ButtonStyle1的样式：
   

• 在看到该样式定义了一些基础的样式, 背景颜色、字体颜色、边框大小、垂直水平位置等, 除此之外, 下方则有一个Template的对象, 其中则就是ControlTemplate, 可以看到, ControlTemplate定义了一个Border ,然后其中定义了一个内弄呈现的控件, ContentPresenter则主要用于呈现按钮的显示内容主体, 如下标记：
  
• 我们可以进行一些尝试, 试图修改border的属性, 观察Button会发生怎样的变化, 通过为Border 添加一个 圆角矩形参数， 将背景颜色设置成固定的值, 如下：
  

3. 接下来, 我们可以通过修改ContentPresenter 中的一些参数, 看看该控件是怎样的一个存在。 修改其中的垂直位置为居下, 为Button设置一个固定Content的值 “Hello”, 观察Hello的位置：
   
   通道实践, 可以了解到，该内容呈现控件(ContentPresenter) 负责了内容的展示、和一部分属性的控制。

       2. ControlTemplate中的TemplateBinding 的作用?

1. TemplateBinding 可以理解为, 通过模板绑定关联到指定的样式、属性, 而TemplateBinding 主要的作用, 是 与外部的属性关系起来, 使其达到改变样式属性。 如此一来 , 当按钮通过显示设置该属性, 则最终会影响着Template绑定的属性值。
   
2. 下面将通过代码演示, 有 TemplateBinding 和 无TemplateBinding 的区别, 在Button按钮中, 显示定义 按钮的边框颜色为 “Blue”, 分别看两者中的影响：

• 有TemplateBinding：
  
• 无TemplateBinding：
  

2. ControlTemplate.Triggers 触发器

• 展开ControlTemplate.Triggers 节点, 可以看到其中定义了一些触发条件和改变的样式：
  
• 定义了4个触发器, 分别满足条件之后, 改变Border的一些样式, 接下来, 通过一张图,来解释其影响的过程：
  
• 运行效果：
  

3. ControlTemplate.EventTrigger 事件触发器

• 下面定义了一个EventTrigger 事件触发器。当鼠标进入按钮区域时, 执行一个0.5秒的动画, 将按钮的背景颜色设置为 pink；当鼠标离开按钮区域时, 执行一个0.5秒的动画,将按钮的背景颜色设置为Green：
  
  

4. 自定义ControlTemplate

控件模板可以独立存在, 上面的例子中, 包含在样式文件中, 下面, 单独声明一个独立的控件模板：

1. 创建一个ControlTemplate ,设定一个键名称, 指定其模板的类型
2. 创建一个Border 用于设置按钮边样式
3. 创建一个内容呈现的控件, 设置几个参数的TemplateBinding.
4. 按钮的Template 绑定该模板
   

二、数据模板

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

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

1. 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;

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

2. 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;

• 运行结果：
  

3. ContentTemplate

使用较少，暂不做阐述，有需求自行查阅。

4. ItemsControl

定义ItemsControl 主要分两个步骤: 1.设置ItemsPanel容器, 用于容纳列表的最外层容器 2.定义子项的DataTemplate

• XAML代码：

       <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;

• 运行效果：
  

文章参考来源：
链接: WPF控件模板.
链接: WPF数据模板.
链接: WPF常用模板.
链接: WPF详解模板.

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！