WPF样式（Style）与模板（Template）

一、WPF样式

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

1: <Window.Resources>

2:     <Style

3:         TargetType="Button">

4:         <Setter Property="Background" Value="Yellow" />

5:         <Setter Property="Margin" Value="5" />

6:         <Setter Property="FontFamily" Value="Comic Sans MS"/>

7:         <Setter Property="FontSize" Value="14"/>

8:     </Style>

9: </Window.Resources>

10: <StackPanel>

11:     <Button>Button A</Button>

12:     <Button Foreground="Red" Background="White">Button B</Button>

13: </StackPanel>

从执行的结果上来看：

在Style中定义的属性及值，影响到Window中的所有类型为Button的控件的样式
在Button中可以新定义其他属性（如Foreground），覆盖Style中的定义（Background）

这种样式，类似于CSS中的类型选择器，为某种类型定义样式。

此外还可以在Style中加入x:Key属性，做为特定的样式（注意，这种也需要定义TargetType）；定义时还可以基于已定义的某种样式，例如，基于刚才的Button的样式，更改字体的大小及文本的前景及背景颜色：

1: <Window.Resources>

2:     <Style

3:         TargetType="Button">

4:         <Setter Property="Background" Value="Yellow" />

5:         <Setter Property="Margin" Value="5" />

6:         <Setter Property="FontFamily" Value="Comic Sans MS"/>

7:         <Setter Property="FontSize" Value="14"/>

8:     </Style>

9:     <Style

10:         TargetType="Button"

11:         x:Key="ButtonStyleA"

12:         BasedOn="{StaticResource {x:Type Button}}">

13:         <Setter Property="Background" Value="Green" />

14:         <Setter Property="Foreground" Value="Yellow" />

15:         <Setter Property="FontSize" Value="28"/>

16:     </Style>

17: </Window.Resources>

18: <StackPanel>

19:     <Button>Button A</Button>

20:     <Button Foreground="Red" Background="White">Button B</Button>

21:     <Button Style="{StaticResource ButtonStyleA}">Button C</Button>

22:     <Button Style="{StaticResource ButtonStyleA}" Content="Button D">

23:         <Button.Foreground>

24:             <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

25:                 <LinearGradientBrush.GradientStops>

26:                     <GradientStop Offset="0.0" Color="#FFFFFF" />

27:                     <GradientStop Offset="1.0" Color="#0000FF" />

28:                 </LinearGradientBrush.GradientStops>

29:             </LinearGradientBrush>

30:         </Button.Foreground>

31:     </Button>

32: </StackPanel>

二、控件模板（ControlTemplate）

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

1: <Window.Resources>

2:     <StyleTargetType="Button" x:Key="ButtonStyle">

3:         <!--设置按钮的默认的样式-->

4:         <Setter Property="FontFamily" Value="Comic Sans MS"/>

5:         <Setter Property="FontSize" Value="14"/>

6:         <Setter Property="Foreground" Value="Black" />

7:         <Setter Property="Background">

8:             <Setter.Value>

9:                 <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">

10:                     <LinearGradientBrush.GradientStops>

11:                         <GradientStop Offset="0.0" Color="#fff" />

12:                         <GradientStop Offset="1.0" Color="#009" />

13:                     </LinearGradientBrush.GradientStops>

14:                 </LinearGradientBrush>

15:             </Setter.Value>

16:         </Setter>

17:         <!--设置按钮的模板-->

18:         <Setter Property="Template">

19:             <Setter.Value>

20:                 <ControlTemplate TargetType="Button">

21:                     <Grid>

22:                         <Ellipse Fill="{TemplateBinding Background}"/>

23:                         <ContentPresenter

24:                             Margin="5"

25:                             HorizontalAlignment="Center"

26:                             VerticalAlignment="Center"/>

27:                     </Grid>

28:                 </ControlTemplate>

29:             </Setter.Value>

30:         </Setter>

31:     </Style>

32: </Window.Resources>

33: <StackPanel>

34:     <Button Margin="5" Style="{StaticResource ButtonStyle}"

35:             Width="100" Height="100"

36:             Content="My Button">

37:     </Button>

38:     <Button Margin="5" Width="200">Common Button</Button>

39: </StackPanel>

三、触发器

值得注意的是，这个时候，对于此按钮，无论是否获得焦点、鼠标是处于其上方，显示的外观均是相同的，如果要定义以上的一些效果，可以使用触发器来实现。

Style、ControlTemplate 和 DataTemplate 都具有 Triggers 属性，该属性可以包含一组触发器。某个属性值更改时，或某个事件引发时，触发器会相应地设置属性或启动操作（如动画操作）。

触发器包含以下几种：

属性触发器
EventTrigger 和 Storyboard
MultiTrigger、DataTrigger 和 MultiDataTrigger

我们这里可以使用属性触发器来实现：

例如，在ControlTemplate中（即上段代码28行前插入以下代码）：

1: <ControlTemplate.Triggers>

2:     <Trigger Property="IsMouseOver" Value="True">

3:         <!--鼠标在上移动时-->

4:         <Setter Property="Foreground" Value="Yellow" />

5:     </Trigger>

6:     <Trigger Property="IsKeyboardFocused" Value="True">

7:         <!--控件获得键盘焦点时-->

8:         <Setter Property="Foreground" Value="White" />

9:     </Trigger>

10: </ControlTemplate.Triggers>

当按键获得键盘焦点时：





鼠标在其上时：





转自：http://hzyup.blog.163.com/blog/static/10332601200910133743602/