Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template

概述在上一篇，介绍了Visual State Manager视觉状态管理器，其中涉及到控件的样式（Style）和模板（Template），本篇将详细介绍样式（Style）和模板（Template）在Silverlight项目中的应用，并介绍如何使用Blend设计样式（Style）和模板（Template）。   在LOB（Line-of-Business）企业级应用项目开发中，为了使项目的视觉效果多样 在上一篇，介绍了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”，系统会d出提示窗口，询问“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,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,92,0"  WIDth ="139"  Content ="button"  HorizontalAlignment ="Right"  d:LayoutOverrIDes ="WIDth"  Height ="55"  VerticalAlignment ="top" />
4       < button  margin ="94,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” ->选中当前需要被应用的样式，在主设计窗口即可看到控件样式的变化。

 

  现在，我们切换左边的Objects and Timeline 到 States，当前选中的States是CommonStates组中的normal， 阅读过上一篇VSM教程的，相信对这里并不陌生，normal表示button控件的正常视图状态。

  这里我们可以看到，在主设计窗口，button样式仍旧是紫色

  当我们选中MouSEOver视图状态时，主设计窗口button样式，变成默认的样式。这说明，每个Visual State视觉状态都有自己独立样式，和上一篇讲述的控件每个视图状态都有独立性是相符的。

  所以，要修改完整的一套控件样式，需要以控件的视图状态为基础，修改每个会引起控件视图产生变化的状态。这里，我们选中MouSEOver后，切换Tab到 Objects and Timeline， 选中“BackgroundGradIEnt”，修改button控件在鼠标覆盖后的背景，

  保存后，F5运行该例程，当鼠标放在button上，自动会切换button样式。 normal状态：

MouSEOver状态：

pressed状态：

  上图可以看出pressed状态并没有改变，仍旧是默认样式。其样式修改方法与上面的方法相同，这里不再重复，大家可以按照以上方法修改。 对于控件样式的的控制，基本已经讲完。在下一篇将介绍Template模板的应用实例。 总结

以上是内存溢出为你收集整理的Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template全部内容，希望文章能够帮你解决Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。