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

8天入门wpf—— 第四天 模板

2016-04-13 1958
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

今天说下wpf中的模板，前面一篇中我们讲到了style，但是style所能做的仅仅是在现有控件的基础上进行修修补补，但是如果我们想

彻底颠覆控件样式，那么我们就必须使用这一篇所说的模板。

老外写书都喜欢在篇头搞一个类图，方便我们宏观认识，这里我也上一个。

一：控件模板

1：ControlTemplate

我们知道wpf的控件都是继承自Control，在Control类中有一个Template属性，类型就是ControlTemplate。

那么利用这个ControlTemplate就可以彻底的颠覆控件的默认外观，这里我把一个checkbox变成一个小矩形，蛮有意思的。

<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <ControlTemplate x:Key="rect" TargetType="{x:Type CheckBox}">
 <StackPanel>
 <Rectangle Name="breakRectangle" Stroke="Red" StrokeThickness="2" Width="20" Height="20">
 <Rectangle.Fill>
 <SolidColorBrush Color="White"/>
 </Rectangle.Fill>
 </Rectangle>
 </StackPanel>
 </ControlTemplate>
 </Window.Resources>
 <Canvas>
 <CheckBox Template="{StaticResource ResourceKey=rect}" Content="我是CheckBox"/>
 </Canvas>
</Window>

确实，我们干了一件漂亮的事情，把checkbox变成了“小矩形”，但是我们发现了一个小问题，为什么我的Content=“xxx”没有显示到模板上？

很简单，我们已经重定义了控件模板，默认模板将会被覆盖...

2：ContentPresenter

幸好，wpf给我们提供了一个ContentPresenter，它的作用就是把原有模板的属性原封不动的投放到自定义模板中。

<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <ControlTemplate x:Key="rect" TargetType="{x:Type CheckBox}">
 <StackPanel>
 <Rectangle Name="breakRectangle" Stroke="Red" StrokeThickness="2" Width="20" Height="20">
 <Rectangle.Fill>
 <SolidColorBrush Color="White"/>
 </Rectangle.Fill>
 </Rectangle>
 <ContentPresenter/>
 </StackPanel>
 </ControlTemplate>
 </Window.Resources>
 <Canvas>
 <CheckBox Template="{StaticResource ResourceKey=rect}" Content="我是CheckBox"/>
 </Canvas>
</Window>

当然你也可以玩一些小技巧，比如我想在"矩形“和”文字”中间设置边距，那么我们可以设置ContentPresenter的margin。

<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <ControlTemplate x:Key="rect" TargetType="{x:Type CheckBox}">
 <StackPanel>
 <Rectangle Name="breakRectangle" Stroke="Red" StrokeThickness="2" Width="20" Height="20">
 <Rectangle.Fill>
 <SolidColorBrush Color="White"/>
 </Rectangle.Fill>
 </Rectangle>
 <ContentPresenter Margin="10" />
 </StackPanel>
 </ControlTemplate>
 </Window.Resources>
 <Canvas>
 <CheckBox Template="{StaticResource ResourceKey=rect}" Content="我是CheckBox"/>
 </Canvas>
</Window>

如果你够聪明，你会发现我设置的margin是一个非常呆板的事情，意思就是说能不能根据具体控件灵活控制margin呢？答案肯定是没问题的，

因为我们记得一个控件可以绑定到另一个控件上，比如这里我将模板中的Margin绑定到原控件中的Padding上去。



<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <ControlTemplate x:Key="rect" TargetType="{x:Type CheckBox}">
 <StackPanel>
 <Rectangle Name="breakRectangle" Stroke="Red" StrokeThickness="2" Width="20" Height="20">
 <Rectangle.Fill>
 <SolidColorBrush Color="White"/>
 </Rectangle.Fill>
 </Rectangle>
 <ContentPresenter Margin="{TemplateBinding Padding}" />
 </StackPanel>
 </ControlTemplate>
 </Window.Resources>
 <Canvas>
 <CheckBox Template="{StaticResource ResourceKey=rect}" Content="我是CheckBox" Padding="10"/>
 </Canvas>
</Window>

3：Trigger

我们知道style里面也是有trigger的，废话不多说，上代码说话。


<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <ControlTemplate x:Key="rect" TargetType="{x:Type CheckBox}">
 <ControlTemplate.Resources>
 <SolidColorBrush x:Key="redBrush" Color="Red"/>
 </ControlTemplate.Resources>
 <StackPanel>
 <Rectangle Name="breakRectangle" Stroke="Red" StrokeThickness="2" Width="20" Height="20">
 <Rectangle.Fill>
 <SolidColorBrush Color="White"/>
 </Rectangle.Fill>
 </Rectangle>
 <ContentPresenter/>
 </StackPanel>
 <ControlTemplate.Triggers>
 <Trigger Property="IsChecked" Value="True">
 <Setter TargetName="breakRectangle" Property="Fill" Value="{StaticResource ResourceKey=redBrush}">
 </Setter>
 </Trigger>
 </ControlTemplate.Triggers>
 </ControlTemplate>
 </Window.Resources>
 <Canvas>
 <CheckBox Template="{StaticResource ResourceKey=rect}" Content="我是CheckBox"/>
 </Canvas>
</Window>

最后形成的效果就是当checkbox选中时为实心框，不选中为空心框。

4：与Style混搭

可能刚才我也说了，style只能在原有的控件基础上修修补补，如果我们让Style修补Control控件的Template属性时，此时我们是不是

就可以实现ControlTemplate和Style的混搭呢？


<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <Style x:Key="cbx" TargetType="{x:Type CheckBox}">
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="{x:Type CheckBox}">
 <ControlTemplate.Resources>
 <SolidColorBrush x:Key="redBrush" Color="Red"/>
 </ControlTemplate.Resources>
 <StackPanel>
 <Rectangle Name="breakRectangle" Stroke="Red" StrokeThickness="2" Width="20" Height="20">
 <Rectangle.Fill>
 <SolidColorBrush Color="White"/>
 </Rectangle.Fill>
 </Rectangle>
 <ContentPresenter/>
 </StackPanel>
 <ControlTemplate.Triggers>
 <Trigger Property="IsChecked" Value="True">
 <Setter TargetName="breakRectangle" Property="Fill" Value="{StaticResource ResourceKey=redBrush}">
 </Setter>
 </Trigger>
 </ControlTemplate.Triggers>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>

 </Window.Resources>
 <Canvas>
 <CheckBox Style="{StaticResource ResourceKey=cbx}" Content="我是CheckBox"/>
 </Canvas>
</Window>

二：数据模板

现在我们已经知道“控件模板”是用于改变控件外观，那么“数据模板”顾名思义就是控制数据的显示方式，下面做个demo让person绑定到listbox上。


namespace WpfApplication1
{
 /// <summary>
 /// MainWindow.xaml 的交互逻辑
 /// </summary>
 public partial class MainWindow : Window
 {
 public static string name = "一线码农";

 public MainWindow()
 {
 InitializeComponent();
 }
 }

 public class PersonList : ObservableCollection<Person>
 {
 public PersonList()
 {
 this.Add(new Person() { Name = "一线码农", Age = 24, Address = "上海" });
 this.Add(new Person() { Name = "小师妹", Age = 20, Address = "上海" });
 }
 }

 public class Person
 {
 public string Name { get; set; }

 public int Age { get; set; }

 public string Address { get; set; }
 }
}

xaml：
<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 xmlns:src="clr-namespace:WpfApplication1"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <ObjectDataProvider x:Key="personList" ObjectType="{x:Type src:PersonList}"/>
 </Window.Resources>
 <Grid>
 <ListBox ItemsSource="{Binding Source={StaticResource ResourceKey=personList}}"></ListBox>
 </Grid>
</Window>

最后我们发现，listbox中并没有呈现我们需要的数据，只是呈现了当前类的ToString()方法，很简单，因为我们绑定的不是简单的数据类型集合，

而是多字段的复杂类型，更重要的是我们并没有告诉wpf该如何呈现person数据。

<1>重写Tostring()

既然wpf在Render数据的时候呈现的是当前的ToString()形式，那下面我们来重写ToString()试试看。


public class Person
 {
 public string Name { get; set; }

 public int Age { get; set; }

 public string Address { get; set; }

 public override string ToString()
 {
 return string.Format("姓名:{0}, 年龄:{1}, 地址:{2}", Name, Age, Address);
 }
 }

最后看看效果，如我们所愿，person信息已经呈现。

<2>DataTemplate重写

或许有的人比较苛刻，他需要person是作为矩形一块一块的呈现，而不是这些简单的形式，那么此时我们就可以用DataTemplate来颠覆。


<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 xmlns:src="clr-namespace:WpfApplication1"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <ObjectDataProvider x:Key="personList" ObjectType="{x:Type src:PersonList}"/>
 <DataTemplate x:Key="rect">
 <Border Name="border" BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5">
 <StackPanel>
 <StackPanel Orientation="Horizontal">
 <TextBlock Text="{Binding Name}" Margin="5,0,0,0"/>
 <TextBlock Text="{Binding Age}" Margin="5,0,0,0"/>
 </StackPanel>
 <StackPanel Orientation="Horizontal">
 <TextBlock Text="{Binding Address}" Margin="5,0,0,0"/>
 </StackPanel>
 </StackPanel>
 </Border>
 </DataTemplate>
 </Window.Resources>
 <Grid>
 <ListBox ItemsSource="{Binding Source={StaticResource ResourceKey=personList}}"
 ItemTemplate="{StaticResource ResourceKey=rect}"></ListBox>
 </Grid>
</Window>

哈哈，果然是以一块一块的形式展现，大功告成，当然这里的”触发器“和”style混搭“跟ConrolTemplate非常相似，我想应该不需要累赘了。

三： ItemsPanelTemplate

在条目控件（ItemControl)里面，有一个属性叫ItemPanel,类型是ItemPanelTemplate。

那么ItemsPanelTemplate主要用来干什么的呢？首先我们要知道常见的条目控件有：ListBox,Menu,StatusBar，比如拿ListBox来说，

我们经过仔细研究，发现ItemBox的ItemPanel其实是一个VisualizingStackPanel，就是说ListBox的每一项的排列方式是遵循StackPanel的

原则，也就是从上到下的排列方式，比如”一线码农“和”小师妹“是按照竖行排列方式，好，我现在的要求就是能够”横排“，该如何做到呢？


<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 xmlns:src="clr-namespace:WpfApplication1"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <ObjectDataProvider x:Key="personList" ObjectType="{x:Type src:PersonList}"/>
 <DataTemplate x:Key="rect">
 <Border Name="border" BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5">
 <StackPanel>
 <StackPanel Orientation="Horizontal">
 <TextBlock Text="{Binding Name}" Margin="5,0,0,0"/>
 <TextBlock Text="{Binding Age}" Margin="5,0,0,0"/>
 </StackPanel>
 <StackPanel Orientation="Horizontal">
 <TextBlock Text="{Binding Address}" Margin="5,0,0,0"/>
 </StackPanel>
 </StackPanel>
 </Border>
 </DataTemplate>
 <ItemsPanelTemplate x:Key="items">
 <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/>
 </ItemsPanelTemplate>
 </Window.Resources>
 <Grid>
 <ListBox ItemsSource="{Binding Source={StaticResource ResourceKey=personList}}"
 ItemTemplate="{StaticResource ResourceKey=rect}" ItemsPanel="{StaticResource ResourceKey=items}"></ListBox>
 </Grid>
</Window>

哈哈，确实有意思，我们改变了ListBox中Item的默认排序方向，当然在menu，statusBar中我们也可以用同样的方式来更改。

四： HierarchicalDataTemplate

它是针对具有分层数据结构的控件设计的，比如说TreeView，相当于可以每一个层级上做DataTemplate，很好很强大。


<Window x:Class="WpfApplication1.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
 xmlns:src="clr-namespace:WpfApplication1"
 Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
 <XmlDataProvider x:Key="Info" XPath="Nations">
 <x:XData>
 <Nations xmlns="">
 <Nation Name="中国">
 <Provinces>
 <Province Name="安徽">
 <Citys>
 <City Name="安庆">
 <Countrys>
 <Country Name="潜山"/>
 <Country Name="桐城"/>
 </Countrys>
 </City>
 <City Name="合肥">
 <Countrys>
 <Country Name="长丰"/>
 <Country Name="肥东"/>
 </Countrys>
 </City>
 </Citys>
 </Province>
 <Province Name="江苏">
 <Citys>
 <City Name="南京">
 <Countys>
 <Country Name="溧水"/>
 <Country Name="高淳"/>
 </Countys>
 </City>
 <City Name="苏州">
 <Countys>
 <Country Name="常熟"/>
 </Countys>
 </City>
 </Citys>
 </Province>
 </Provinces>
 </Nation>
 </Nations>
 </x:XData>
 </XmlDataProvider>
 <HierarchicalDataTemplate DataType="Nation" ItemsSource="{Binding XPath=Provinces/Province}">
 <StackPanel Background="AliceBlue">
 <TextBlock FontSize="20" Text="{Binding XPath=@Name}"/>
 </StackPanel>
 </HierarchicalDataTemplate>
 <HierarchicalDataTemplate DataType="Province" ItemsSource="{Binding XPath=Citys/City}">
 <StackPanel Background="LightBlue">
 <TextBlock FontSize="18" Text="{Binding XPath=@Name}"/>
 </StackPanel>
 </HierarchicalDataTemplate>
 <HierarchicalDataTemplate DataType="City" ItemsSource="{Binding XPath=Countrys/Country}">
 <StackPanel Background="LightBlue">
 <TextBlock FontSize="18" Text="{Binding XPath=@Name}"/>
 </StackPanel>
 </HierarchicalDataTemplate>
 <HierarchicalDataTemplate DataType="Country">
 <StackPanel Background="LightSalmon">
 <TextBlock FontSize="18" Text="{Binding XPath=@Name}"/>
 </StackPanel>
 </HierarchicalDataTemplate>
 </Window.Resources>
 <TreeView ItemsSource="{Binding Source={StaticResource ResourceKey=Info},XPath=Nation}"></TreeView>
</Window>


文章标签：
C#
关键词：
wpf入门
wpf模板
一线码农
目录
相关文章
长梦
|
2月前
|
C# 开发者 Windows
WPF 应用程序开发：一分钟入门
本文介绍 Windows Presentation Foundation (WPF)，这是一种用于构建高质量、可缩放的 Windows 桌面应用程序的框架，支持 XAML 语言，方便 UI 设计与逻辑分离。文章涵盖 WPF 基础概念、代码示例，并深入探讨常见问题及解决方案，包括数据绑定、控件样式与模板、布局管理等方面，帮助开发者高效掌握 WPF 开发技巧。
长梦
159 65
土木林森
|
3月前
|
C# 开发者 Windows
全面指南：WPF无障碍设计从入门到精通——让每一个用户都能无障碍地享受你的应用，从自动化属性到焦点导航的最佳实践
【8月更文挑战第31天】为了确保Windows Presentation Foundation (WPF) 应用程序对所有用户都具备无障碍性，开发者需关注无障碍设计原则。这不仅是法律要求，更是社会责任，旨在让技术更人性化，惠及包括视障、听障及行动受限等用户群体。
土木林森
79 0
土木林森
|
3月前
|
开发者 C# 存储
WPF开发者必读：资源字典应用秘籍，轻松实现样式与模板共享，让你的WPF应用更上一层楼！
【8月更文挑战第31天】在WPF开发中，资源字典是一种强大的工具，用于共享样式、模板、图像等资源，提高了应用的可维护性和可扩展性。本文介绍了资源字典的基础知识、创建方法及最佳实践，并通过示例展示了如何在项目中有效利用资源字典，实现资源的重用和动态绑定。
土木林森
70 0
土木林森
|
3月前
|
开发者 C# 存储
WPF开发者必读：样式与模板的艺术，轻松定制UI外观，让你的应用程序更上一层楼！
【8月更文挑战第31天】在WPF应用开发中，样式与模板是实现美观界面与一致性的关键工具。样式定义了控件如字体、颜色等属性，而模板则允许自定义控件布局与子控件，两者均可存储于`.xaml`文件中。本文介绍了样式与模板的基础知识，通过示例展示了如何创建并应用它们来改变按钮的外观，从而提升用户体验。
土木林森
65 0
土木林森
|
3月前
|
C# Windows IDE
WPF入门实战：零基础快速搭建第一个应用程序，让你的开发之旅更上一层楼！
【8月更文挑战第31天】在软件开发领域，WPF（Windows Presentation Foundation）是一种流行的图形界面技术，用于创建桌面应用程序。本文详细介绍如何快速搭建首个WPF应用，包括安装.NET Framework和Visual Studio、理解基础概念、创建新项目、设计界面、添加逻辑及运行调试等关键步骤，帮助初学者顺利入门并完成简单应用的开发。
土木林森
89 0
老码识途
|
12月前
|
算法 C# UED
浅谈WPF之控件模板和数据模板
WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计，同时还推出了以模板为核心的新一代设计理念。在WPF中，通过引入模板，将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类：数据模板【Data Template】和控件模板【Control Template】。
老码识途
194 8
关关长语
|
C#
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
WPF-Binding问题-模板样式使用Binding TemplatedParent与TemplateBinding区别
关关长语
205 0
步、步、为营
|
前端开发 C# 数据库
WPF MVVM系统入门-下
本文详细讲解WPF，MVVM开发，实现UI与逻辑的解耦。
步、步、为营
228 0
步、步、为营
|
前端开发 数据可视化 C#
WPF MVVM系统入门-上
本文详细讲解WPF，MVVM开发，实现UI与逻辑的解耦。
步、步、为营
272 0
码农技术君
|
C#
C#编程-127：WPF初级入门
C#编程-127：WPF初级入门
码农技术君
86 0
C#编程-127：WPF初级入门