1、介紹

對(duì)于Windows桌面端應(yīng)用開(kāi)發(fā)來(lái)講，WPF以其界面渲染的特殊性，靈活的界面布局而讓人津津樂(lè)道，因?yàn)樗転橛脩?hù)提供更好的交互體驗(yàn)。如何利用WPF開(kāi)發(fā)出讓人賞心悅目的界面與功能呢？這里不僅僅只是布局的功勞，很大一部分都在WPF模板的靈活使用，那么這里就來(lái)聊一聊WPF的三大模板。

2、控件模板ControlTemplate

WPF所有控件都是基于呈現(xiàn)與行為分離的模式，開(kāi)發(fā)人員可以在自己應(yīng)用場(chǎng)景中根據(jù)需要進(jìn)行不同呈現(xiàn)狀態(tài)的更改，而不會(huì)影響到控件的原始功能行為，能讓我們?cè)谌我飧淖兛丶庥^的同時(shí)還能保留控件的操作動(dòng)作，這里其實(shí)除了模板的分離還得益于WPF的路由事件（后面有機(jī)會(huì)再聊，今天就先說(shuō)模板）。下面以一個(gè)控件為例，可以進(jìn)行不同的模板修改。

這里我們可以直接使用窗口資源，創(chuàng)建一個(gè)ControlTemplate對(duì)象，呈現(xiàn)結(jié)果與代碼如下：

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

三個(gè)按鈕根據(jù)不同的模板進(jìn)行不了同的呈現(xiàn)，但是原始功能依然保留，不受任何影響

3、數(shù)據(jù)模板DataTemplate

數(shù)據(jù)模板其實(shí)是為了解決數(shù)據(jù)集綁定中數(shù)據(jù)呈現(xiàn)的問(wèn)題，它規(guī)定了數(shù)據(jù)集中數(shù)據(jù)如何布局，一般在數(shù)據(jù)集控件中使用，比如ItemsControl、ListView、ListBox、DataGrid等，下面還是以一個(gè)簡(jiǎn)單的例子來(lái)介紹：

?<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就規(guī)定了綁定到ItemsControl的數(shù)據(jù)集中的數(shù)據(jù)如何顯示，而且被綁定的值才能顯示，沒(méi)有被綁定的值無(wú)法顯示

4、容器模板ItemsPanelTemplate

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

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

有時(shí)候有人為問(wèn)我：如何讓一個(gè)布局控件通過(guò)綁定的方式進(jìn)行子項(xiàng)的動(dòng)態(tài)增刪？那么這個(gè)問(wèn)題的奧秘就在上面這個(gè)例子中，借助一個(gè)數(shù)據(jù)集合控件，將此控件的容器模板改變成所要?jiǎng)討B(tài)增刪子項(xiàng)的容器就可以，不僅僅是Grid、StackPanel還包括UniformGrid、WrapPanel、DockPanel、Canvas都可以，靈活運(yùn)用能得到意想不到的效果。

最后展示一個(gè)利用自定義容器的方式，進(jìn)行了一個(gè)瀑布流式布局的動(dòng)態(tài)數(shù)據(jù)呈現(xiàn)：

END

持續(xù)關(guān)注后續(xù)更新更多干貨！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。