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

Posted 2023-02-19 LisenYang

在上一篇，介绍了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" >
Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template

Expression Blend实例中文教程 - 界面快速入门

Expression Blend实例中文教程 - 布局控件快速入门Grid

Expression Blend实例中文教程 - 开篇

Expression Blend实例中文教程 - 动画基础快速入门Animation

Expression Blend实例中文教程(13) - 控件模板快速入门ControlTemplates