Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template-阿里云开发者社区

在上一篇，介绍了Visual State Manager视觉状态管理器，其中涉及到控件的样式（Style）和模板（Template），本篇将详细介绍样式（Style）和模板（Template）在Silverlight项目中的应用，并介绍如何使用Blend设计样式（Style）和模板（Template）。

在LOB（Line-of-Business）企业级应用项目开发中，为了使项目的视觉效果多样化，不仅仅使用动画效果，而且经常还需要修改部分控件的样式（Style）和模板（Template）。在Silverlight的控件包中，微软已经定义了默认控件样式和模板，开发人员可以在这些默认的代码上进行修改和调整，以达到项目需求。但是由于默认的控件样式和模板代码过于冗长，手工修改起来相对复杂和繁琐，对此，微软封装了一些新的功能在Blend中，方便开发人员和设计人员对模板和样式进行控制。在学习Blend控制样式（Style）和模板（Template）前，还是先快速了解一下样式（Style）和模板（Template）。

样式（Style），有HTML开发基础的朋友对传统的CSS样式表并不陌生，HTML将所有公用的属性代码汇集到CSS文件中，使用CSS控制页面的背景，控制表格的宽度，控制控件距离等。Silverlight中的样式（Style）和CSS相同，允许设计人员和开发人员将控件的公用属性定义到资源文件中，允许相同属性控件自由调用，这样不仅提高了代码的复用性，而且保证了控件外观在项目中的一致性。

模板（Template），模板的概念在传统的Web页面开发中已经被引入，早期Dreamweaver因为支持创建Web模板设计，吸引了不少Web开发者。Silverlight中同样引进了模板的概念。在Silverlight中，凡是继承自System.Windows.Controls命名控件的控件都有一套默认的模板，设计人员和开发人员可以基于默认模板的基础上进行修改，创建自定义模板。

样式（Style）和模板（Template）的定义

在Silverlight中，样式和模板定义是很简单的，因为很多属性已经被封装好，不需要自行创建，只需要调用就可以了。简单的演示代码：

Style：

1 < UserControl.Resources >
2    < Style x:Key ="TextBoxStyle" TargetType ="TextBox" >
3     这里定义具体样式属性
4    </ Style >
5 </ UserControl.Resources >

Template：

1 <UserControl.Resources>
2   <ControlTemplate x:Key="TextBoxTemplate" TargetType="TextBox" >
3     <Border BorderBrush="Orange" BorderThickness="3" CornerRadius="10"
4      Background="Red">
5           这里定义具体模板
6     </Border>
7   </ControlTemplate>
8 </UserControl.Resources>

样式（Style）和模板（Template）的使用

在Silverlight中样式（Style）和模板（Template）都属于控件资源，也就是说，两者都可以被定义在资源文件中，而在项目页面中，仅需使用Style和Template属性调用就可以了。

Style：

1 < TextBox Style ={"StaticResource TextBoxStyle"} Text ="样式测试" />

Template：这个方法，也是Blend所支持的方法，下面我们看看实例，进一步理解。

1 < TextBox Template ={"StaticResource TextBoxTemplate"} Text ="模板测试" />

上面介绍了样式和模板的最基本的用法。在实际项目中，我们经常把模板（Template）定义在样式（Style）中，也就是将Template作为一个属性被赋值在Style中，这样当样式（Style）被应用在控件中时，新的模板也会同时加载。例如下面Button样式代码，<Setter Property="Template"> Template是作为Style的属性被设置的:

代码

  1 < ResourceDictionary >
  2              < Style x:Key ="ButtonStyle1" TargetType ="Button" >
  3                  < Setter Property ="Background" Value ="#FF1F3B53" />
  4                  < Setter Property ="Foreground" Value ="#FF000000" />
  5                  < Setter Property ="Padding" Value ="3" />
  6                  < Setter Property ="BorderThickness" Value ="1" />
  7                  < Setter Property ="BorderBrush" >
  8                      < Setter.Value >
  9                          < LinearGradientBrush EndPoint ="0.5,1" StartPoint ="0.5,0" >
10                              < GradientStop Color ="#FFA3AEB9" Offset ="0" />
11                              < GradientStop Color ="#FF8399A9" Offset ="0.375" />
12                              < GradientStop Color ="#FF718597" Offset ="0.375" />
13                              < GradientStop Color ="#FF617584" Offset ="1" />
14                          </ LinearGradientBrush >
15                      </ Setter.Value >
16                  </ Setter >
17                  < Setter Property ="Template" >
18                      < Setter.Value >
19                          < ControlTemplate TargetType ="Button" >
20                              < Grid >
21                                  < VisualStateManager.VisualStateGroups >
22                                      < VisualStateGroup x:Name ="CommonStates" >
23                                          < VisualState x:Name ="Normal" />
24                                          < VisualState x:Name ="MouseOver" >
25                                              < Storyboard >
26                                                  < DoubleAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundAnimation" Storyboard.TargetProperty ="Opacity" >
27                                                      < SplineDoubleKeyFrame KeyTime ="0" Value ="1" />
28                                                  </ DoubleAnimationUsingKeyFrames >
29                                                  < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" >
30                                                      < SplineColorKeyFrame KeyTime ="0" Value ="#F2FFFFFF" />
31                                                  </ ColorAnimationUsingKeyFrames >
32                                                  < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" >
33                                                      < SplineColorKeyFrame KeyTime ="0" Value ="#CCFFFFFF" />
34                                                  </ ColorAnimationUsingKeyFrames >
35                                                  < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" >
36                                                      < SplineColorKeyFrame KeyTime ="0" Value ="#7FFFFFFF" />
37                                                  </ ColorAnimationUsingKeyFrames >
38                                              </ Storyboard >
39                                          </ VisualState >
40                                          < VisualState x:Name ="Pressed" >
41                                              < Storyboard >
42                                                  < ColorAnimationUsingKeyFrames Storyboard.TargetName ="Background" Storyboard.TargetProperty ="(Border.Background).(SolidColorBrush.Color)" >
43                                                      < SplineColorKeyFrame KeyTime ="0" Value ="#FF6DBDD1" />
44                                                  </ ColorAnimationUsingKeyFrames >
45                                                  < DoubleAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundAnimation" Storyboard.TargetProperty ="Opacity" >
46                                                      < SplineDoubleKeyFrame KeyTime ="0" Value ="1" />
47                                                  </ DoubleAnimationUsingKeyFrames >
48                                                  < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" >
49                                                      < SplineColorKeyFrame KeyTime ="0" Value ="#D8FFFFFF" />
50                                                  </ ColorAnimationUsingKeyFrames >
51                                                  < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" >
52                                                      < SplineColorKeyFrame KeyTime ="0" Value ="#C6FFFFFF" />
53                                                  </ ColorAnimationUsingKeyFrames >
54                                                  < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" >
55                                                      < SplineColorKeyFrame KeyTime ="0" Value ="#8CFFFFFF" />
56                                                  </ ColorAnimationUsingKeyFrames >
57                                                  < ColorAnimationUsingKeyFrames Storyboard.TargetName ="BackgroundGradient" Storyboard.TargetProperty ="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" >
58                                                      < SplineColorKeyFrame KeyTime ="0" Value ="#3FFFFFFF" />
59                                                  </ ColorAnimationUsingKeyFrames >
60                                              </ Storyboard >
61                                          </ VisualState >
62                                          < VisualState x:Name ="Disabled" >
63                                              < Storyboard >
64                                                  < DoubleAnimationUsingKeyFrames Storyboard.TargetName ="DisabledVisualElement" Storyboard.TargetProperty ="Opacity" >
65                                                      < SplineDoubleKeyFrame KeyTime ="0" Value =".55" />
66                                                  </ DoubleAnimationUsingKeyFrames >
67                                              </ Storyboard >
68                                          </ VisualState >
69                                      </ VisualStateGroup >
70                                      < VisualStateGroup x:Name ="FocusStates" >
71                                          < VisualState x:Name ="Focused" >
72                                              < Storyboard >
73                                                  < DoubleAnimationUsingKeyFrames Storyboard.TargetName ="FocusVisualElement" Storyboard.TargetProperty ="Opacity" >
74                                                      < SplineDoubleKeyFrame KeyTime ="0" Value ="1" />
75                                                  </ DoubleAnimationUsingKeyFrames >
76                                              </ Storyboard >
77                                          </ VisualState >
78                                          < VisualState x:Name ="Unfocused" />
79                                      </ VisualStateGroup >
80                                  </ VisualStateManager.VisualStateGroups >
81                                  < Border x:Name ="Background" Background ="White" BorderBrush =" {TemplateBinding BorderBrush} " BorderThickness =" {TemplateBinding BorderThickness} " CornerRadius ="3" >
82                                      < Grid Margin ="1" Background =" {TemplateBinding Background} " >
83                                          < Border x:Name ="BackgroundAnimation" Opacity ="0" Background ="#FF448DCA" />
84                                          < Rectangle x:Name ="BackgroundGradient" >
85                                              < Rectangle.Fill >
86                                                  < LinearGradientBrush EndPoint =".7,1" StartPoint =".7,0" >
87                                                      < GradientStop Color ="#FFFFFFFF" Offset ="0" />
88                                                      < GradientStop Color ="#F9FFFFFF" Offset ="0.375" />
89                                                      < GradientStop Color ="#E5FFFFFF" Offset ="0.625" />
90                                                      < GradientStop Color ="#C6FFFFFF" Offset ="1" />
91                                                  </ LinearGradientBrush >
92                                              </ Rectangle.Fill >
93                                          </ Rectangle >
94                                      </ Grid >
95                                  </ Border >
96                                  < ContentPresenter x:Name ="contentPresenter" HorizontalAlignment =" {TemplateBinding HorizontalContentAlignment} " Margin =" {TemplateBinding Padding} " VerticalAlignment =" {TemplateBinding VerticalContentAlignment} " Content =" {TemplateBinding Content} " ContentTemplate =" {TemplateBinding ContentTemplate} " />
97                                  < Rectangle x:Name ="DisabledVisualElement" Fill ="#FFFFFFFF" RadiusX ="3" RadiusY ="3" IsHitTestVisible ="false" Opacity ="0" />
98                                  < Rectangle x:Name ="FocusVisualElement" Stroke ="#FF6DBDD1" StrokeThickness ="1" RadiusX ="2" RadiusY ="2" Margin ="1" IsHitTestVisible ="false" Opacity ="0" />
99                              </ Grid >
100                          </ ControlTemplate >
101                      </ Setter.Value >
102                  </ Setter >
103              </ Style >
104          </ ResourceDictionary >

下面我们用一个简单的实例来理解Style（样式）和Template（模板）。

首先，我们创建一个新的项目StyleTemplateDemo作为演示。

打开MainPage，在主设计窗口中，添加三个按钮控件到该页面，

对于Button控件的 样式属性控制，最简单的方法就是从右边Properties属性栏，

如果需要创建自定义样式，则需要按照以下步骤：

首先选中其中一个按钮控件，在左上角可以看到Button控件下拉菜单，

点击“[Button]”下拉菜单，选择“Edit Template”，然后选择“Edit a Copy”，

或者，可以在主设计窗口，使用鼠标右键选中控件，选择“Edit Template”，然后选择“Edit a Copy”，

选中“Edit a Copy”，系统会弹出提示窗口，询问“Create Style Resource”是否创建样式资源，

其中Name（Key）是样式名，以后调用该样式将使用这个Name；

Define in 有三个选择：

1. Application（应用），该选项是将该样式代码添加到App.Xaml文件中；

2. This document（当前文档），该选项是将该样式代码添加到当前编辑文档中，当前我们编辑MainPage.Xaml,如果选中此项，样式代码将被输出到该文件中；

3. Resource dictionary（资源目录），该选项是将该样式代码添加到自定义资源文件中，如果没有资源文件，可以点击“New”创建自定义资源文件；

在This document（当前文档）中，该选项有两个选择，

“UserControl:<no name>”,选中该选项样式代码将在当前文档创建<UserControl.Resources>，

调用是使用前面的基础调用代码：

1 < Button Margin ="114,197,0,228" Width ="139" Content ="Button" HorizontalAlignment ="Left" d:LayoutOverrides ="Width" Style =" {StaticResource ButtonStyle1} " />

“Button:<no name>”，选中该选项样式代码将创建在该控件资源下，

对比以上三种定义样式代码方式，第一种和第三种方法相对来说比较灵活，将样式代码放在公共资源文件中，方便其他页面相同属性控件调用；而第二种方法，仅供该文件中的相同属性控件调用。

这里我们Define in选择Application，定义样式代码到App.xaml中，点击确定后，系统会打开App.xaml文件，进入控件样式编辑状态，这时就可以对控件样式进行编辑。

当前主设计窗口打开文件为"App.xaml",因为该文件包含了要编辑的样式和模板代码。

在控件处于样式和模板编辑状态下，从Objects and Timeline窗口可以查看该控件模板的子部件，通过修改包含的子部件样式，来改变原按钮控件样式。

例如我们想改变Button的背景色，可以修改BackgroundGradient属性，从上图的Objects and Timeline中选中BackgroundGradient，

在右边Properties属性栏，修改颜色，即可看到在主设计窗口按钮的背景色在改变。

保存以上修改后，回到主设计窗口，能看到两个Button已经被应用了新的Button样式，

1 < Grid x:Name ="LayoutRoot" Background ="White" >
2      < Button x:Name ="bt1" Margin ="254,151,247,0" Width ="139" Content ="按钮样式" Style =" {StaticResource ButtonStyle1} " Height ="55" VerticalAlignment ="Top" />
3      < Button Margin ="0,151,92,0" Width ="139" Content ="Button" HorizontalAlignment ="Right" d:LayoutOverrides ="Width" Height ="55" VerticalAlignment ="Top" />
4      < Button Margin ="94,151,0,0" Width ="139" Content ="Button" HorizontalAlignment ="Left" d:LayoutOverrides ="Width" Style =" {StaticResource ButtonStyle1} " Height ="55" VerticalAlignment ="Top" />
5 </ Grid >

从代码中可以看出，使用 Style =" {StaticResource ButtonStyle1} " 的按钮，已经将默认Button样式替换为新的Button样式。如果想修改最后一个Button的样式，同样，把 Style =" {StaticResource ButtonStyle1} " 属性添加到Button中即可。在Blend中可以非常简单的应用新的样式到控件。

在需要被应用样式的Button控件上点击鼠标右键，然后选择“Edit Template”->“Apply Resource” ->选中当前需要被应用的样式，在主设计窗口即可看到控件样式的变化。