WPF样式与模板

一、WPF样式（Style）
类似于Web应用程序中的CSS，在WPF中可以为控件定义统一的样式（Style）。样式属于资源的一种，例如为Button定义统一的背景颜色和字体：

  <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Yellow" />
            <Setter Property="Margin" Value="5" />
            <Setter Property="FontFamily" Value="Comic Sans MS"/>
            <Setter Property="FontSize" Value="14"/>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button>Button A</Button>
        <Button Foreground="Red" Background="White">Button B</Button>
</StackPanel>

执行如下：

从执行的结果上来看：
• 在Style中定义的属性及值，影响到Window中的所有类型为Button的控件的样式
• 在Button中可以新定义其他属性（如Foreground），覆盖Style中的定义（Background）
这种样式，类似于CSS中的类型选择器，为某种类型定义样式。
此外还可以在Style中加入x:Key属性，做为特定的样式（注意，这种也需要定义TargetType）；定义时还可以基于已定义的某种样式，例如，基于刚才的Button的样式，更改字体的大小及文本的前景及背景颜色：

 <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Yellow" />
            <Setter Property="Margin" Value="5" />
            <Setter Property="FontFamily" Value="Comic Sans MS"/>
            <Setter Property="FontSize" Value="14"/>
        </Style>
        <Style TargetType="Button" x:Key="ButtonStyleA" BasedOn="{StaticResource {x:Type Button}}">
            <Setter Property="Background" Value="Green" />
            <Setter Property="Foreground" Value="Yellow" />
            <Setter Property="FontSize" Value="28"/>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button>Button A</Button>
        <Button Foreground="Red" Background="White">Button B</Button>
        <Button Style="{StaticResource ButtonStyleA}">Button C</Button>
        <Button Style="{StaticResource ButtonStyleA}" Content="Button D">
            <Button.Foreground>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0.0" Color="#FFFFFF" />
                        <GradientStop Offset="1.0" Color="#0000FF" />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Button.Foreground>
        </Button>
</StackPanel>

执行如下：

二、控件模板（ControlTemplate）
当使用一个控件时，如果控件的属性、方法、事件满足程序的需求，但控件的外观不满足要求的时候，除了自定义控件这种方法外，我们还可以通过使用“控件模板”的方式更改控件的外观。例如定义一个圆形的按钮：
二、控件模板（ControlTemplate）
当使用一个控件时，如果控件的属性、方法、事件满足程序的需求，但控件的外观不满足要求的时候，除了自定义控件这种方法外，我们还可以通过使用“控件模板”的方式更改控件的外观。例如定义一个圆形的按钮：

<Window.Resources>
          <Style TargetType="Button" x:Key="ButtonStyle">
            <!--设置按钮的默认的样式-->
            <Setter Property="FontFamily" Value="Comic Sans MS"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Foreground" Value="Black" />
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <LinearGradientBrush.GradientStops>
                            <GradientStop Offset="0.0" Color="#fff" />
                            <GradientStop Offset="1.0" Color="#009" />
                        </LinearGradientBrush.GradientStops>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <!--设置按钮的模板-->
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Fill="{TemplateBinding Background}"/>
                            <ContentPresenter
                               Margin="5"
                               HorizontalAlignment="Center"
                               VerticalAlignment="Center"/>
                        </Grid>
                 第28行：</ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Margin="5" Style="{StaticResource ButtonStyle}" 
              Width="100" Height="100" 
               Content="My Button">
        </Button>
        <Button Margin="5" Width="200">Common Button</Button>
</StackPanel>

执行如下：

三、触发器（Trigger）
值得注意的是，这个时候，对于此按钮，无论是否获得焦点、鼠标是处于其上方，显示的外观均是相同的，如果要定义以上的一些效果，可以使用触发器来实现。
Style、ControlTemplate 和 DataTemplate 都具有 Triggers 属性，该属性可以包含一组触发器。某个属性值更改时，或某个事件引发时，触发器会相应地设置属性或启动操作（如动画操作）。
触发器包含以下几种：
• 属性触发器
• EventTrigger 和 Storyboard
• MultiTrigger、DataTrigger 和 MultiDataTrigger
我们这里可以使用属性触发器来实现：
例如，在ControlTemplate中（即上段代码28行前插入以下代码）：

<ControlTemplate.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
            <!--鼠标在上移动时-->
            <Setter Property="Foreground" Value="Yellow" />
        </Trigger>
        <Trigger Property="IsKeyboardFocused" Value="True">
            <!--控件获得键盘焦点时-->
            <Setter Property="Foreground" Value="White" />
        </Trigger>
</ControlTemplate.Triggers>

当按键获得键盘焦点时：

鼠标在其上时：