WPF Style和Template

 

WPF中的Style类似于Web应用程序中的CSS，它是控件的一个属性，属于资源的一种。

通常把Style定义在Resources中，使用方式如下：

<Windows.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>

<Window.Resources>

<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)的具体例子，请参考：

WPF 4 DataGrid 控件（自定义样式篇） 

WPF/Silverlight HierarchicalDataTemplate 模版的使用