模版

　　　　前面介绍过,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定义触发器

　　触发器中设置属性,和触发值

　　鼠标放在按钮上,呈现效果以下: