WPF---控件模板（一）

一、控件模板概述

控件的外觀通過一個ControlTemplate類型的對象確定，該對象指定了組成一個控件的顯示的各種視覺元素。

當WPF創建一個控件時，會創建一個控件類（模板父）的實例，然后實例化通過它的ControlTemplate設定的這個控件的外觀樹（組成這個控件的內部UI元素）。

 

二、開發自定義的簡單控件模板

為了簡單起見，我們開發一個簡單的Button控件模板。步驟參見以下：

1）在Window的Resources中定義一個名字為myButtonTemplate的控件模板

2）在使用StaticResource標記擴展為Button的Template屬性賦值

至此，一個簡單的Button的ControlTemplate就算開發好了，但是仔細看圖，我們會發現一個問題，我們按鈕實際顯示的文本信息與我們設定的文本信息是不一致的，這不是我們的預期，就連背景色和Border的顏色也不是我們的預設值，而是使用了模板的默認值，那么我們該如何修改控件模板來達到我們的預期呢？

三、控件模板之TemplateBinding

為了達到上述預期的效果，我們可以使用TemplateBinding將控件模板中的屬性綁定到控件本身（模板父）。參見以下代碼：

從圖中可以看出，現在已經達到了預期的效果。

為了達到上述同樣顯示文本的效果，我們也可以使用ContentPresenter。

四、ContentPresenter對象

1）ContentPresenter作為一個占位符，用來在模板中指定Content應該放置的位置；

2）默認情況下，ContentPresenter從模板父（應用控件模板的控件本身）獲取實際的內容，然后綁定到自己的Content屬性；

3）為了使用ContentPresenter，我們需要設置ControlTemplate的TargetType屬性為模板父的類型。

使用了ContentPresenter的ControlTemplate參見以下：

五、觸發器

1）Trigger必須在ControlTemplate.Triggers的節點下；

2）Triggers集合中可以包含任意數量的Trigger；

3）一個Trigger可以有任意數量的Setter；

4）每個Setter中指定三個屬性，分別是TargetName、Property和Value。

帶有觸發器的控件模板參見以下：

當鼠標移動到按鈕上面的時候，按鈕和Border和背景色會變成模板中預設的樣式。

 

附錄：代碼

<Window x:Class="ControlTemplateDemo1.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"
        xmlns:local="clr-namespace:ControlTemplateDemo1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ControlTemplate x:Key="myButtonTemplate" TargetType="Button">
            <Border Background="{TemplateBinding Background}" 
                    BorderBrush="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderBrush}" 
                    BorderThickness="1"  CornerRadius="3"  Name="border">
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="Red" TargetName="border"/>
                    <Setter Property="Background" Value="Silver" TargetName="border"/>
                </Trigger>
            </ControlTemplate.Triggers>
                
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <Button Content="Button" Background="Pink" BorderBrush="Green" 
                Template="{StaticResource myButtonTemplate}" Width="60" Height="30" >
        </Button>
    </Grid>
</Window>