备案控制台
开发者社区 开发与运维 文章 正文

浅谈WPF之控件模板和数据模板

2023-11-20 105
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计，同时还推出了以模板为核心的新一代设计理念。在WPF中，通过引入模板，将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类：数据模板【Data Template】和控件模板【Control Template】。

WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计，同时还推出了以模板为核心的新一代设计理念。在WPF中，通过引入模板，将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类：数据模板【Data Template】和控件模板【Control Template】。

image.png

基本上，ControlTemplate描述如何显示控件，而DataTemplate描述如何显示数据。



控件模板 Control Template


 

控件模板让我们可以定义控件的外观，改变控件的展现形式，通过Control Template实现。

 

1. 编辑默认模板

 

选中控件--右键--编辑模板--编辑副本，打开创建Style资源对话框，如下所示：

image.png

创建Style资源，输入资源名称，定义位置，默认为此文档【Window】，然后点击【确定】，创建资源。如下所示：

image.png

创建控件元素的默认资源，如下所示：

<Windowx:Class="WpfApp2.TwoWindow"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:WpfApp2"mc:Ignorable="d"Title="TwoWindow"Height="350"Width="800"><Window.Resources><Stylex:Key="FocusVisual"><SetterProperty="Control.Template"><Setter.Value><ControlTemplate><RectangleMargin="2"SnapsToDevicePixels="true"Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"StrokeThickness="1"StrokeDashArray="1 2"/></ControlTemplate></Setter.Value></Setter></Style><SolidColorBrushx:Key="Button.Static.Background"Color="#FFDDDDDD"/><SolidColorBrushx:Key="Button.Static.Border"Color="#FF707070"/><SolidColorBrushx:Key="Button.MouseOver.Background"Color="#FFBEE6FD"/><SolidColorBrushx:Key="Button.MouseOver.Border"Color="#FF3C7FB1"/><SolidColorBrushx:Key="Button.Pressed.Background"Color="#FFC4E5F6"/><SolidColorBrushx:Key="Button.Pressed.Border"Color="#FF2C628B"/><SolidColorBrushx:Key="Button.Disabled.Background"Color="#FFF4F4F4"/><SolidColorBrushx:Key="Button.Disabled.Border"Color="#FFADB2B5"/><SolidColorBrushx:Key="Button.Disabled.Foreground"Color="#FF838383"/><Stylex:Key="OneButtonStyle"TargetType="{x:Type Button}"><SetterProperty="FocusVisualStyle"Value="{StaticResource FocusVisual}"/><SetterProperty="Background"Value="{StaticResource Button.Static.Background}"/><SetterProperty="BorderBrush"Value="{StaticResource Button.Static.Border}"/><SetterProperty="Foreground"Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/><SetterProperty="BorderThickness"Value="1"/><SetterProperty="HorizontalContentAlignment"Value="Center"/><SetterProperty="VerticalContentAlignment"Value="Center"/><SetterProperty="Padding"Value="1"/><SetterProperty="Template"><Setter.Value><ControlTemplateTargetType="{x:Type Button}"><Borderx:Name="border"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"Background="{TemplateBinding Background}"SnapsToDevicePixels="true"><ContentPresenterx:Name="contentPresenter"Focusable="False"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="{TemplateBinding Padding}"RecognizesAccessKey="True"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Border><ControlTemplate.Triggers><TriggerProperty="IsDefaulted"Value="true"><SetterProperty="BorderBrush"TargetName="border"Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/></Trigger><TriggerProperty="IsMouseOver"Value="true"><SetterProperty="Background"TargetName="border"Value="{StaticResource Button.MouseOver.Background}"/><SetterProperty="BorderBrush"TargetName="border"Value="{StaticResource Button.MouseOver.Border}"/></Trigger><TriggerProperty="IsPressed"Value="true"><SetterProperty="Background"TargetName="border"Value="{StaticResource Button.Pressed.Background}"/><SetterProperty="BorderBrush"TargetName="border"Value="{StaticResource Button.Pressed.Border}"/></Trigger><TriggerProperty="IsEnabled"Value="false"><SetterProperty="Background"TargetName="border"Value="{StaticResource Button.Disabled.Background}"/><SetterProperty="BorderBrush"TargetName="border"Value="{StaticResource Button.Disabled.Border}"/><SetterProperty="TextElement.Foreground"TargetName="contentPresenter"Value="{StaticResource Button.Disabled.Foreground}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid><Buttonx:Name="one"Content="Hello wpf"Margin="5"Width="100"Height="30"Style="{DynamicResource OneButtonStyle}"></Button></Grid></Window>


编辑默认模板，也可以通过【文档大纲】右键--编辑模板--编辑副本，然后打开创建资源对话框，进行操作，如下所示：

image.png

 

2. 修改默认样式

 

通过默认创建的控件模板Style，可以修改和重定义控件的显示内容，如：设置按钮显示圆角，和鼠标放上去为红色。

 image.png

要实现以上功能，只需要修改两个地方即可，如下所示：

 image.png

 

3. 自定义控件模板

 

通过自定义模板，同样能达到修改控件样式的效果。

控件模板也是资源的一种，每一个控件模板都有一个唯一的key，在控件上通过Template进行绑定，如下所示：

<Windowx:Class="WpfApp2.ThreeWindow"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:WpfApp2"mc:Ignorable="d"Title="自定义控件模板示例"Height="150"Width="300"><Window.Resources><ControlTemplatex:Key="oneStyle"TargetType="Button"><BorderBackground="LightBlue"CornerRadius="5"x:Name="border"><StackPanelOrientation="Horizontal"HorizontalAlignment="{TemplateBinding HorizontalAlignment}"><TextBlockVerticalAlignment="{TemplateBinding VerticalAlignment}">》》</TextBlock><ContentPresenterHorizontalAlignment="{TemplateBinding HorizontalAlignment}"VerticalAlignment="{TemplateBinding VerticalAlignment}"></ContentPresenter></StackPanel></Border><ControlTemplate.Triggers><TriggerProperty="IsMouseOver"Value="true"><SetterProperty="Background"TargetName="border"Value="Red"/><SetterProperty="BorderBrush"TargetName="border"Value="Blue"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Window.Resources><Grid><Buttonx:Name="one"Content="Hello wpf"Margin="5"Width="100"Height="30"VerticalAlignment="Center"HorizontalAlignment="Center"Template="{StaticResource oneStyle}"></Button></Grid></Window>

自定义控件模板，示例如下：


 

数据模板 DataTemplate

 

控件模板决定了数据的展示形式和用户体检，在软件UI设计中非常重要。同样数据的展示形式越来越多样化，正所谓：横看成岭侧成峰，远近高低各不同。同样的数据内容，在DataGrid中的展示是文本的列表形式，在ComboBox中是下拉框的形式。给数据披上外衣，将数据和形式解耦，是一种新的发展趋势。


1. DataGrid

 

a. 数据模板


DataGrid是可以自定义网格数据显示的控件，通过自定义显示的列模板，可以实现各式各样的展现方式。列定义如下：

  1. DataGrid的列定义，通过Binding="{Binding Name}"的方式绑定属性，通过ElementStyle="{StaticResource one_center}"的方式绑定样式。
  2. DataGrid预制了几种列展示数据的方式，如：DataGridTextColumn【文本】，DataGridCheckBoxColumn【复选框】，DataGridComboBoxColumn【下拉框】，DataGridHyperlinkColumn【链接】等，如果使用数据模板，则采用DataGridTemplateColumn进行定义。

UI示例如下所示：

<Windowx:Class="WpfApp2.A1Window"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:WpfApp2"mc:Ignorable="d"Title="数据模板示例"Height="450"Width="650"><Window.Resources><Stylex:Key="one_center"TargetType="TextBlock"><SetterProperty="VerticalAlignment"Value="Center"></Setter><SetterProperty="HorizontalAlignment"Value="Center"></Setter></Style><Stylex:Key="one_header"TargetType="DataGridColumnHeader"><SetterProperty="VerticalAlignment"Value="Center"></Setter><SetterProperty="HorizontalAlignment"Value="Center"></Setter><SetterProperty="HorizontalContentAlignment"Value="Center"></Setter><SetterProperty="BorderThickness"Value="0"></Setter></Style></Window.Resources><Grid><DataGridx:Name="one"Margin="10"AutoGenerateColumns="False"CanUserAddRows="False"CanUserSortColumns="False"BorderThickness="0"><DataGrid.Columns><DataGridTextColumnHeader="姓名"Binding="{Binding Name}"Width="*"ElementStyle="{StaticResource one_center}"HeaderStyle="{StaticResource one_header}"/><DataGridTextColumnHeader="年龄"Binding="{Binding Age}"Width="*"ElementStyle="{StaticResource one_center}"HeaderStyle="{StaticResource one_header}"/><DataGridTextColumnHeader="性别"Binding="{Binding Sex}"Width="*"ElementStyle="{StaticResource one_center}"HeaderStyle="{StaticResource one_header}"/><DataGridTextColumnHeader="班级"Binding="{Binding Classes}"Width="*"ElementStyle="{StaticResource one_center}"HeaderStyle="{StaticResource one_header}"/><DataGridTemplateColumnHeader="操作"Width="*"HeaderStyle="{StaticResource one_header}"><DataGridTemplateColumn.CellTemplate><DataTemplate><StackPanelOrientation="Horizontal"VerticalAlignment="Center"HorizontalAlignment="Center"><Buttonx:Name="edit"Content="编辑"Width="60"Margin="3"Height="25"></Button><Buttonx:Name="delete"Content="删除"Width="60"Margin="3"Height="25"></Button></StackPanel></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns></DataGrid></Grid></Window>

 

b. 后台数据绑定

 

后台数据绑定通过ItemsSource进行赋值，绑定的数据的属性名，要和DataGrid的列绑定数据的名称保持一致，如下所示：

namespaceWpfApp2{
/// <summary>/// A1Window.xaml 的交互逻辑/// </summary>publicpartialclassA1Window : Window    {
publicA1Window()
        {
InitializeComponent();
List<Student>lst=newList<Student>();
lst.Add(newStudent() { Name="张三", Age=22, Sex="男", Classes="一班" });
lst.Add(newStudent() { Name="李四", Age=21, Sex="男", Classes="二班" });
lst.Add(newStudent() { Name="王五", Age=20, Sex="女", Classes="一班" });
lst.Add(newStudent() { Name="刘大", Age=19, Sex="男", Classes="三班" });
lst.Add(newStudent() { Name="麻子", Age=18, Sex="男", Classes="四班" });
one.ItemsSource=lst;
        }
    }
publicclassStudent    {
publicstringName { get; set; }
publicintAge { get; set; }
publicstringSex { get; set; }
publicstringClasses { get; set; }
    }
}

DataGrid示例，如下所示：

 

2. ListBox和ComboBox

 

a. 数据模板


ListBox，ComboBox，均是包含可选择的项的列表，只是ListBox不需要下拉显示，ComboBox需要下拉显示。通过定义数据模板，可以丰富数据的展示形式。

通过ItemTemplate="{StaticResource item_template}"的形式，进行数据模板的绑定。如下所示：

 

<Windowx:Class="WpfApp2.A2Window"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:WpfApp2"mc:Ignorable="d"Title="数据模板示例"Height="450"Width="800"><Window.Resources><DataTemplatex:Key="item_template"><StackPanelOrientation="Horizontal"Margin="5 ,0"><BorderWidth="10"Height="10"Background="{Binding Code}"></Border><TextBlockText="{Binding Code}"Margin="5,0"></TextBlock></StackPanel></DataTemplate></Window.Resources><Grid><StackPanelMargin="3"Orientation="Horizontal"HorizontalAlignment="Center"VerticalAlignment="Center"><ComboBoxx:Name="one"Height="25"Width="120"Margin="5"ItemTemplate="{StaticResource item_template}"></ComboBox><ListBoxx:Name="two"Width="120"Margin="5"ItemTemplate="{StaticResource item_template}"></ListBox></StackPanel></Grid></Window>

 

b. 后台数据绑定

 

与DataGrid一样，后台通过ItemsSource进行数据的绑定。如下所示：

namespaceWpfApp2{
/// <summary>/// A2Window.xaml 的交互逻辑/// </summary>publicpartialclassA2Window : Window    {
publicA2Window()
        {
InitializeComponent();
List<Color>lst=newList<Color>();
lst.Add(newColor() { Code="#FE8C00" });
lst.Add(newColor() { Code="#1F7F50" });
lst.Add(newColor() { Code="#AA8C00" });
lst.Add(newColor() { Code="#FEAA00" });
lst.Add(newColor() { Code="#008CAA" });
lst.Add(newColor() { Code="#FEBB00" });
one.ItemsSource=lst;
two.ItemsSource=lst;
        }
    }
publicclassColor    {
publicstringCode { get; set; }
    }
}

示例截图，如下所示：

 

3. ItemsControl

 

a. 数据模板


ItemsControl，主要用于展示集合数据的项，也是列表控件的一种。ItemsControl 需要设置两个内容：

  1. ItemsControl.ItemsPanel，做为数据展示的容器。
  2. ItemsControl.ItemTemplate，用于单个数据的展示形式。

具体如下所示：

<Windowx:Class="WpfApp2.A3Window"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:WpfApp2"mc:Ignorable="d"Title="A3Window"Height="450"Width="800"><Grid><ItemsControlx:Name="one"><ItemsControl.ItemsPanel><ItemsPanelTemplate><WrapPanel></WrapPanel></ItemsPanelTemplate></ItemsControl.ItemsPanel><ItemsControl.ItemTemplate><DataTemplate><ButtonWidth="50"Height="50"Margin="5"Content="{Binding Code}"></Button></DataTemplate></ItemsControl.ItemTemplate></ItemsControl></Grid></Window>


b. 后台数据绑定

 

与DataGrid一样，后台通过ItemsSource进行数据的绑定。如下所示：

namespaceWpfApp2{
/// <summary>/// A3Window.xaml 的交互逻辑/// </summary>publicpartialclassA3Window : Window    {
publicA3Window()
        {
InitializeComponent();
List<Test>lst=newList<Test>();
lst.Add(newTest() { Code="1" });
lst.Add(newTest() { Code="2" });
lst.Add(newTest() { Code="3" });
lst.Add(newTest() { Code="4" });
lst.Add(newTest() { Code="5" });
lst.Add(newTest() { Code="6" });
one.ItemsSource=lst;
        }
    }
publicclassTest    {
publicstringCode { get; set; }
    }
}

示例截图

控件模板和数据模板的应用场景还有很多，本文旨在抛砖引玉，一起学习，共同进步。

文章标签：
C#
UED
Windows
算法
容器
关键词：
wpf控件
wpf模板
wpf数据
wpf控件模板数据
老码识途
目录
相关文章
追逐时光者
|
6天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
追逐时光者
78 0
老码识途
|
6天前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道，在绘制流程图时，当选择或鼠标移动到控件时，都会在控件的四周出现锚点，以便于修改大小，移动位置，或连接线等，那此功能是如何实现的呢？在WPF开发中，想要在控件四周实现锚点，可以通过装饰器来实现，今天通过一个简单的小例子，简述如何在WPF开发中，应用装饰器，仅供学习分享使用，如有不足之处，还请指正。
老码识途
69 1
Rick_1/2
|
9月前
|
C# Windows
WPF技术之RichTextBox控件
WPF RichTextBox是Windows Presentation Foundation (WPF)中提供的一个强大的文本编辑控件，它可以显示富文本格式的文本，支持多种文本处理操作。
Rick_1/2
363 0
老码识途
|
6天前
|
前端开发 C# 容器
浅谈WPF之控件拖拽与拖动
使用过office的visio软件画图的小伙伴都知道，画图软件分为两部分，左侧图形库，存放各种图标，右侧是一个画布，将左侧图形库的图标控件拖拽到右侧画布，就会生成一个新的控件，并且可以自由拖动。那如何在WPF程序中，实现类似的功能呢？今天就以一个简单的小例子，简述如何在WPF中实现控件的拖拽和拖动，仅供学习分享使用，如有不足之处，还请指正。
老码识途
118 2
追逐时光者
|
6天前
|
C# 开发者 C++
一套开源、强大且美观的WPF UI控件库
一套开源、强大且美观的WPF UI控件库
追逐时光者
147 0
Rick_1/2
|
9月前
|
定位技术 C# UED
WPF技术之ScrollViewer控件
WPF ScrollViewer是WPF中常用的一个控件，它提供了滚动视图的功能，可用于显示超出容器可视区域的内容。ScrollViewer通常用于容纳大量内容的控件，以在有限的空间内显示这些内容，并允许用户通过滚动来查看隐藏的部分。
Rick_1/2
830 0
Rick_1/2
|
9月前
|
前端开发 C#
WPF技术之ContentControl 控件
ContentControl 是 WPF 中的一个常见控件，用于显示单个内容元素。它可以包含任意类型的内容，包括文本、图像、控件等。
Rick_1/2
853 0
Rick_1/2
|
9月前
|
XML C# 数据格式
WPF技术之DocumentViewer控件
WPF 的 DocumentViewer 是一个强大的控件，用于在应用程序中显示各种类型的文档，如 XPS（XML Paper Specification）、FlowDocument 和 FixedDocument 等。
Rick_1/2
1181 1
Rick_1/2
|
9月前
|
C# Windows
WPF技术之图形系列Polygon控件
WPF Polygon是Windows Presentation Foundation (WPF)框架中的一个标记元素，用于绘制多边形形状。它可以通过设置多个点的坐标来定义多边形的形状，可以绘制任意复杂度的多边形。
Rick_1/2
499 0
Rick_1/2
|
9月前
|
数据挖掘 数据处理 C#
WPF技术之DataGrid控件
WPF DataGrid是一种可以显示和编辑数据的界面控件。它可以作为表格形式展示数据，支持添加、删除、修改、排序和分组操作。
Rick_1/2
195 0