WPF Templates

Style 只能就 element 已有的 property 設定，template 可以完全取代 element 的視覺外觀 (visual tree)，而不會改變原有的功能與程式碼。Control templates 都是由 ControlTemplate class 所衍生的。

Control Templates

利用 ControlTemplate 定義 control 的外觀，並以 x:Key 設定 template 的名稱。

<Grid>     <Grid.Resources>         <ControlTemplate x:Key="buttonTemplate">             <Grid Width="100" Height="30">                 <Rectangle Fill="Bisque" Stroke="Brown" RadiusX="5" RadiusY="5"/>                 <Ellipse Width="24" Height="24" Fill="Brown" HorizontalAlignment="Left" Margin="3"/>             </Grid>         </ControlTemplate>     </Grid.Resources>     <Button Template="{StaticResource buttonTemplate}"/> </Grid>

Control Template Trigger

如同 style，template 也可以利用 trigger 來動態調整 control 的外觀。

<Grid>     <Grid.Resources>         <ControlTemplate x:Key="buttonTemplate">             <Grid Width="100" Height="30">                 <Rectangle Fill="Bisque" Stroke="Brown" RadiusX="5" RadiusY="5"/>                 <Ellipse x:Name="Icon" Width="24" Height="24" Fill="Brown" HorizontalAlignment="Left" Margin="3"/>             </Grid>             <ControlTemplate.Triggers>                 <Trigger Property="Button.IsMouseOver" Value="True">                     <Setter TargetName="Icon" Property="Fill" Value="Red"/>                 </Trigger>             </ControlTemplate.Triggers>         </ControlTemplate>     </Grid.Resources>     <Button Template="{StaticResource buttonTemplate}">OK</Button> </Grid>

Restricting the Target Type

與 style 相同，template 也可以指定要套用的類別，但在  dictionary 中，不允許移除 x:Key 的設定。

<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">     <Grid Width="100" Height="30">         …     </Grid> </ControlTemplate>

Content Property

在前面的範例中，我們希望能顯示出原有 Button.Content 中的文字， 則可以透過 TemplateBinding 來達成。

<TextBlock Text="{TemplateBinding Content}" Margin="36,0,0,0" VerticalAlignment="Center"/>

不過要特別注意，Button 的 Content 不一定是文字型態，因此使用 ContentControl 或 ContentPresenter 是比較正確的寫法。ContentPresenter 比 ContentControl 輕些，因為 ControlControl 在 ContentPresenter 外面又包了一層物件。

<ContentPresenter Content="{TemplateBinding Content}"/>

Other Properties

除了 content property，也可以沿用原來物件的其他 property，例如 Background, FontSize,..等…。下列的範例，要特別注意，矩形的背景，直接使用 TemplateBinding 來達成，而圓形使用漸層上色，必須將 brush 轉換成 color，因此語法不同：

<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">     <Grid Width="100" Height="30">         <Rectangle Fill="{TemplateBinding Background}" Stroke="Brown" RadiusX="5" RadiusY="5"/>         <Ellipse x:Name="Icon" Width="24" Height="24" HorizontalAlignment="Left" Margin="3">             <Ellipse.Fill>                 <LinearGradientBrush StartPoint="0,0" EndPoint="0, 1">                     <GradientStop Offset="0"                                     Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground.Color}"/>                     <GradientStop Offset="1" Color="Red"/>                 </LinearGradientBrush>             </Ellipse.Fill>         </Ellipse>         <ContentPresenter Content="{TemplateBinding Content}" Margin="36,0,0,0" VerticalAlignment="Center"/>     </Grid> </ControlTemplate>

在上面的範例中，使用 Binding 取代 TemplateBinding，可以獲得更細密的內容。另外，在使用 trigger 時，因為是在 visual tree 外面動態處理，只能使用 Binding 而無法使用 TemplateBinding。

Control Parts

許多較複雜的 control 是由不同的 part 所組成，例如 ComboBox 由 PART_EditableTextBox 與 PART_Popup 組成。WPF 內建的 control 皆以 PART_xxx 命名。當設計 template 時，可能需要注意到這些細節。

Control States

在 WPF 4.0 之後，增加了 State 的設計，可以透過 VisualStateManager.GoToState 切換狀態。一個 control 可以有多個 state group，每個 group 又有多個 state。例如 Button 的 CommonStates group 包含了 Normal, MouseOver, Pressed, Disabled 四種狀態，而 FocusStates group 包含了 Unfocused, Focused 兩種狀態。在任何時候，Button 一定會在每一組 group 中的某個 state 中，例如 MouseOver & Focused。

設計 template 時，可以使用 <VisualStateManager.VirtualStateGroup> 來設計各種狀態的轉換方式。

Mixing Templates With Styles

將 template 設置在 style 中，可以用來取代 WPF 預設的 style，使用方式如下。注意在下列的範例中，ControlTemplate 可以不用 x:Key 來指定 template 的名稱。

<Grid>     <Grid.Resources>         <Style TargetType="{x:Type Button}">             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="{x:Type Button}">                         …                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>     </Grid.Resources>     <Button>OK</Button> </Grid>