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 模版的使用