WPF Style和Template
WPF中的Style类似于Web应用程序中的CSS，它是控件的一个属性，属于资源的一种。
通常把Style定义在Resources中，使用方式如下：
<Windows.Resources><Window.Resources>
<Style x:Key="btnstyle" TargetType="Button"> <Setter Property="Width" Value="80"/> <Setter Property="Height" Value="50"/> <Setter Property="Foreground" Value="Pink"/> <Setter Property="FontSize" Value="20"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="Background" Value="pink"/> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsMouseOver" Value="false"/> <Condition Property="FontSize" Value="20"/> </MultiTrigger.Conditions> <MultiTrigger.Setters> <Setter Property="Background" Value="Gold"/> </MultiTrigger.Setters> </MultiTrigger> </Style.Triggers> </Style>
<Button x:Name="button1" Style="{StaticResource btnstyle}" Content="button1" >
button1.style=(style)Resources["btnstyle"];
如果只需对控件进行小幅度修饰（调整大小、位置、字体、颜色等）就用style;如果需要改变控件的外观和行为就用controlTemplate（形状、事件触发如鼠标停留效果等）。在实际项目中，经常把Template定义在Style中，通过Style 中的Property来设置控件的Template属性。
WPF中的所有COntrol控件都有Template属性。下面以代码的形式，展现WPF中常用的Template。
<Window x:Class="WPFXAMLTest.WindowControlTemplate"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowControlTemplate" Height="300" Width="300">
<Grid Background="Yellow">
<Button Width="200" Height="60" Background="Cyan">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle Width="180" Height="50" Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20"/>
<ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" RecognizesAccessKey="True"/>
</Grid>
</ControlTemplate>
</Button.Template>
<Button.Content>
<Grid>
<Ellipse Fill="Red" Width="160" Height="40"/>
<TextBlock Text="DebugLZQ" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</Button.Content>
</Button>
<Button HorizontalAlignment="Left" Margin="105,190,0,0" VerticalAlignment="Top" Width="75">
<Button.Template>
<ControlTemplate >
<TextBlock Text="DebugLZQ" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Window>
Template经常和Style一起用：
<Style x:Key="btnstyle" TargetType="Button">
<Setter Property="Width" Value="80"/>
<Setter Property="Height" Value="50"/>
<Setter Property="Foreground" Value="Pink"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="Template"><!--所有Control控件都有Style和Template属性，前者用来控制控件的原有属性；后者用来定义控件的内部结构，对控件外观和形状进行改变 -->
<Setter.Value>
<ControlTemplate TargetType="Button"><!--ControlTemplate 描述控件的行为和样式-->
<Grid Width="80" Height="50">
<Image Source="Images/1.png" Stretch="Fill" />
<!---->
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="4"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button x:Name="button1" Style="{StaticResource btnstyle}" Content="button1" Click="Button_Click" Margin="30,23,393,238"/>
<Style x:Key="btnstyle2" TargetType="Button">
<Setter Property="Width" Value="80"/>
<Setter Property="Height" Value="50"/>
<Setter Property="ContentTemplate"><!--2.ContentTemplate不改变控件行为的基础上，只对控件内容进行更改 -->
<Setter.Value>
<DataTemplate><!--返回值是 DataTemplate-->
<Grid>
<Image Source="Images/1.png" Stretch="Fill" />
<TextBlock Text="{TemplateBinding Content}" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Pink" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Button x:Name="button2" Style="{StaticResource btnstyle2}" Content="button2" Margin="30,117,392,144" />
<Style x:Key="lstboxstyle" TargetType="ListBox">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Image Source="{Binding ImgPath}" Width="70" Height="70" Margin="0"/>
<TextBlock Text="{Binding ImgTxt}" HorizontalAlignment="Center" Margin="5"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<ListBox Style="{StaticResource lstboxstyle }" Height="214" HorizontalAlignment="Left" Margin="226,12,0,0" Name="listBox1" VerticalAlignment="Top" Width="153" />
Binding部分代码如下：
//Binding ListBox
ArrayList list = new ArrayList();
list.Add(new { ImgPath="Images/1.png",ImgTxt="DebugLZQ1"});
list.Add(new { ImgPath = "Images/1.png", ImgTxt = "DebugLZQ2" });
list.Add(new { ImgPath = "Images/1.png", ImgTxt = "DebugLZQ3" });
listBox1.ItemsSource = listBox2.ItemsSource = list;
<Style x:Key="lstboxstyle2" TargetType="ListBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate><!-- ItemsPanelTemplate指定控件子项的布局样式，Combox,TreeView,DataGrid,TabelControl也都均有此属性-->
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemTemplate"><!-- ItemTemplate定义子项的外观-->
<Setter.Value>
<DataTemplate><!-- 返回值DataTemplate-->
<StackPanel>
<Image Source="{Binding ImgPath}" Width="70" Height="70" Margin="0"/>
<TextBlock Text="{Binding ImgTxt}" HorizontalAlignment="Center" Margin="5" Foreground="Pink"/><!--可以这里改-->
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle"><!--也能在这里改，也能直接在TextBlock里改-->
<Setter.Value>
<Style TargetType="ListBoxItem">
<Setter Property="FontSize" Value="20"/>
</Style>
</Setter.Value>
</Setter>
</Style>
<ListBox Style="{StaticResource lstboxstyle2 }" Height="131" HorizontalAlignment="Left" Margin="42,256,0,0" Name="listBox2" VerticalAlignment="Top" Width="417" />
由此可见，控件只是个数据和行为的载体、是个抽象的概念，至于它会长什么样子(控件的内部结构)、它的数据会长什么样子(数据显示结构)都是靠Template生成的。决定控件外观的是ControlTemplate，决定数据外观的是DataTemplate，他们正是Control类的Template和ControlTemplate两个属性的值。
Style和Template的用法就是这样，根据不同的需求进行灵活的设计与编写。园子里也有很多具体的例子，譬如GridView的样式定义，TreeView(HierarchicalDataTemplate)的具体例子，请参考：
浙公网安备 33010602011771号