模版

　　　　前面介紹過,Button控件能夠包含任何內容,例如簡單的文本,還能夠給按鈕添加一個Canvas元素,Canvas元素能夠包含圖形。也能夠給按鈕添加Grid,視頻。按鈕還能夠完成更多的操做。

　　　　控件的外觀,操做方式及其功能在WPF中是徹底分離的。按鈕有默認的外觀,但能夠用模版徹底定製其外觀。

　　　　ControlTemplate模版:

　　　　　　使用ControlTemplate能夠指定控件的可視化結構,從新設計其外觀。

　　　　ItemPanelTemplate模版:

　　　　　　對於ItemsControl,能夠賦予一個ItemsPanelTemplate,以指定其項的佈局。每一個ItemsControl都有一個默認的ItemPanelTemplate。MenuItem使用WrapPanel,StatusBar使用DockPanel,ListBox使用VirtualizingStackPanel

　　　　DataTemplate模版：

　　　　　　DataTemplates很是適用於對象的圖形化表示.給列表指定樣式

　　　　HierarchicalData模版:

　　　　　　用於安排對象的樹形結構。這個控件支持HeaderedItemsControl,例如TreeViewItem和MenuItem

　　　　

　　　　下面在Button樣式中添加一個ControlTemplate模版:

    <Window.Resources>
        <Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="2*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Rectangle Grid.RowSpan="2" RadiusX="4" RadiusY="8" Stroke="Green"
                                       Fill="{TemplateBinding Background}"/>
                            <Rectangle RadiusX="4" RadiusY="8" Margin="2">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Offset="0" Color="LightBlue"/>
                                        <GradientStop Offset="0.5" Color="#afff"/>
                                        <GradientStop Offset="1" Color="#6faa"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter Grid.RowSpan="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                               VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                               Margin="{TemplateBinding Padding}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Foreground">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Offset="0" Color="LightBlue"/>
                                            <GradientStop Offset="0.4" Color="Cyan"/>
                                            <GradientStop Offset="0.8" Color="LightCyan"/>         
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Foreground" Value="Black"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>    
    <StackPanel>
        <Button Name="button3" Background="LightBlue" Height="100" Width="220" FontSize="24"
                  Style="{StaticResource ButtonStyle2}">Template Button</Button>
    </StackPanel>

　　在代碼中樣式中設置Setter的Property爲Template模版模式,在Value中能夠設置一個ControlTemplate模版。

　　在ControlTemplate模版中設置兩行內容, 定義了兩個Rectange元素,第一個Rectange元素橫跨兩行, 把其Fill屬性設置爲{TemplateBinding Background}。標記擴展TemplateBinding容許控件模版使用模版控件中的內容。這裏,舉行用按鈕定義的背景來填充。

　　第二個矩形佔據第一行,填充爲漸變顏色刷

　　定義第二個矩形後,使用ContentPresenter元素. 該元素默認從模版控件中提取內容,根據定義放置這些內容。若是定義了一個ContentPresenter元素,就必須用ControlTemplate設置TargetType.

　　下面使用ControlTemlate定義觸發器

　　觸發器中設置屬性,和觸發值

　　鼠標放在按鈕上,呈現效果以下: