WPF第六章样式与模板.doc

一、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: <Style TargetType="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>
当按键获得键盘焦点时：

鼠标在其上时：

如果要做到一个应用程序其基本的内容不变，但改变整个应用程序的外观可以这样做：
· 对于每一套外观定义一个ResourceDictionary
· 在应用程序中，动态加载此应用程序（或窗体）的Resource
例如，如下的应用程序，在选择不同的用户时，显示不同的Canvas背景及图片：
主题样式A：

主题样式B：

主题样式C：

主题样式A的ResourceDictionary的XAML文件内容：
1: <ResourceDictionary
2: xmlns="
3: xmlns:x="
4: <!-- Canvas样式 -->
5: <Style TargetType="Canvas">
6: <Setter Property="Background">
7: <Setter.Value>
8: <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
9: <GradientStop Color="#FFFCF6F6" Offset="0"/>
10: <GradientStop Color="#FF201999" Offset="1"/>
11: </LinearGradientBrush>
12: </Setter.Value>
13: </Setter>
14: </Style>
15: </ResourceDictionary>
样式B、样式C的XAML代码与其类似，在这里省略。
窗体应用程序的XAML及CS代码如下：
1: <Window x:Class="StyleAndTemplete.TheMeDemo"
2: xmlns="
3: xmlns:x="
4: Title="TheMe Demo" Height="223" Width="319" ResizeMode="NoResize" Loaded="Window_Loaded">
5: <Canvas>
6: <Image Width="150" Height="150"
7: Canvas.Left="129" Canvas.Top="20"
8: x:Name="userImage"/>
9: <TextBlock Width="78" Height="20"
10: Text="Name:" TextWrapping="Wrap"
11: Canvas.Left="12" Canvas.Top="11"/>
12: <ComboBox Width="97" Height="27"
13: IsSynchronizedWithCurrentItem="True"
14: Canvas.Left="12" Canvas.Top="37"
15: x:Name="userName" SelectionChanged="userName_SelectionChanged" />
16: </Canvas>
17: </Window>
1: using System;
2: using System.Windows;
3: using System.Windows.Controls;
4: using System.Windows.Media.Imaging;
5: 
6: namespace StyleAndTemplete
7: {
8: /// <summary>
9: /// Interaction logic for TheMeDemo.xaml
10: /// </summary>
11: public partial class TheMeDemo : Window
12: {
13: public TheMeDemo()
14: {
15: InitializeComponent();
16: }
17: 
18: private void Window_Loaded(object sender, RoutedEventArgs e)
19: {
20: userName.Items.Add("Patrick");
21: userName.Items.Add("Abbey");
22: userName.Items.Add("Tobey");
23: 
24: userName.SelectedIndex = 0;
25: }
26: 
27: private void userName_SelectionChanged(object sender, SelectionChangedEventArgs e)
28: {
29: string selectedTitle = userName.SelectedItem.ToString();
30: string imgName = string.Format("/TitleImage/tile_{0}.png", selectedTitle);
31: 
32: BitmapImage img = new BitmapImage(
33: new Uri(imgName,UriKind.Relative));
34: 
35: userImage.Source = img;
36: 
37: string dicName = string.Format(
38: "{0}Resource.xaml", selectedTitle);
39:
40: this.Resources = (ResourceDictionary)(Application.LoadComponent(
41: new Uri(dicName,UriKind.Relative)));
42: }
43: }
44: }