1、介紹

對于Windows桌面端應用開發來講，WPF以其界面渲染的特殊性，靈活的界面布局而讓人津津樂道，因為它能為用戶提供更好的交互體驗。如何利用WPF開發出讓人賞心悅目的界面與功能呢？這里不僅僅只是布局的功勞，很大一部分都在WPF模板的靈活使用，那么這里就來聊一聊WPF的三大模板。

2、控件模板ControlTemplate

WPF所有控件都是基于呈現與行為分離的模式，開發人員可以在自己應用場景中根據需要進行不同呈現狀態的更改，而不會影響到控件的原始功能行為，能讓我們在任意改變控件外觀的同時還能保留控件的操作動作，這里其實除了模板的分離還得益于WPF的路由事件（后面有機會再聊，今天就先說模板）。下面以一個控件為例，可以進行不同的模板修改。

這里我們可以直接使用窗口資源，創建一個ControlTemplate對象，呈現結果與代碼如下：

?<Window x:Class="Zhaoxi.ControlTemplate.Demo.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"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><ControlTemplate TargetType="Button" x:Key="ButtonTemplate1"><Border Background="Red" Width="80" Height="30" CornerRadius="5"><ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>Border>ControlTemplate><ControlTemplate TargetType="Button" x:Key="ButtonTemplate2"><Border Background="Orange" Width="80" Height="80" CornerRadius="40"><ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>Border>ControlTemplate><ControlTemplate TargetType="Button" x:Key="ButtonTemplate3"><Grid><Polygon Points="40,0 80,80 0,80" Fill="Green"/><ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>Grid>ControlTemplate>Window.Resources><UniformGrid Rows="1"><Button Content="Button1" Template="{StaticResource ButtonTemplate1}"VerticalAlignment="Center" HorizontalAlignment="Center"/><Button Content="Button1" Template="{StaticResource ButtonTemplate2}"VerticalAlignment="Center" HorizontalAlignment="Center"/><Button Content="Button1" Template="{StaticResource ButtonTemplate3}"VerticalAlignment="Center" HorizontalAlignment="Center"/>UniformGrid>Window>

三個按鈕根據不同的模板進行不了同的呈現，但是原始功能依然保留，不受任何影響

3、數據模板DataTemplate

數據模板其實是為了解決數據集綁定中數據呈現的問題，它規定了數據集中數據如何布局，一般在數據集控件中使用，比如ItemsControl、ListView、ListBox、DataGrid等，下面還是以一個簡單的例子來介紹：

?<Window x:Class="Zhaoxi.DataTemplate.Demo.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"mc:Ignorable="d"xmlns:sys="clr-namespace:System;assembly=mscorlib"Title="MainWindow" Height="450" Width="800"><Window.Resources><x:Array Type="sys:String" x:Key="datas"><sys:String>ABCDEFGsys:String><sys:String>1234567sys:String>x:Array><DataTemplate x:Key="DataTemplate1"><Border BorderBrush="#DDD" BorderThickness="0,0,0,1"><Grid MinHeight="30"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/>Grid.ColumnDefinitions><TextBlock Text="{Binding [0]}" VerticalAlignment="Center" HorizontalAlignment="Center"/><StackPanel Grid.Column="1"><TextBlock Text="{Binding [1]}" Margin="0,5"/><TextBlock Text="{Binding [2]}" Margin="0,5"/>StackPanel><TextBlock Text="{Binding [3]}" Grid.Column="2"/>Grid>Border>DataTemplate>Window.Resources><Grid><ItemsControl ItemsSource="{StaticResource datas}" ItemTemplate="{StaticResource DataTemplate1}">ItemsControl>Grid>Window>

這里的DataTemplate就規定了綁定到ItemsControl的數據集中的數據如何顯示，而且被綁定的值才能顯示，沒有被綁定的值無法顯示

4、容器模板ItemsPanelTemplate

窗口模板也是伴隨送數據集合控件一起了，它規定了數據呈現的排列方式，可以通過指定不同的布局控件進行不同的布局顯示，比如下面的例子介紹了以UniformGrid方式進行布局的例子

?<Window x:Class="Zhaoxi.VisualState.Demo.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"mc:Ignorable="d"xmlns:sys="clr-namespace:System;assembly=mscorlib"Title="MainWindow" Height="100" Width="800"><Window.Resources><x:Array Type="sys:String" x:Key="datas"><sys:String>ABCDEFGsys:String><sys:String>1234567sys:String>x:Array><DataTemplate x:Key="DataTemplate1"><Border BorderBrush="#DDD" BorderThickness="1"><Grid MinHeight="30"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/><ColumnDefinition/>Grid.ColumnDefinitions><TextBlock Text="{Binding [0]}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Red"/><StackPanel Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"><TextBlock Text="{Binding [1]}" Margin="0,5"/><TextBlock Text="{Binding [2]}" Margin="0,5"/>StackPanel><TextBlock Text="{Binding [3]}" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"Foreground="Green"/>Grid>Border>DataTemplate>Window.Resources><Grid><ItemsControl ItemsSource="{StaticResource datas}" ItemTemplate="{StaticResource DataTemplate1}"><ItemsControl.ItemsPanel><ItemsPanelTemplate><UniformGrid Rows="1"/>ItemsPanelTemplate>ItemsControl.ItemsPanel>ItemsControl>Grid>Window>

有時候有人為問我：如何讓一個布局控件通過綁定的方式進行子項的動態增刪？那么這個問題的奧秘就在上面這個例子中，借助一個數據集合控件，將此控件的容器模板改變成所要動態增刪子項的容器就可以，不僅僅是Grid、StackPanel還包括UniformGrid、WrapPanel、DockPanel、Canvas都可以，靈活運用能得到意想不到的效果。

最后展示一個利用自定義容器的方式，進行了一個瀑布流式布局的動態數據呈現：

END

持續關注后續更新更多干貨！

總結

以上是生活随笔為你收集整理的你知道WPF这三大模板实例运用吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。