稳扎稳打Silverlight(12) - 2.0外观之样式, 模板, 视觉状态和视觉状态管理器

[索引页]
[源码下载]

稳扎稳打Silverlight(12) - 2.0外观之样式, 模板, 视觉状态和视觉状态管理器

作者： webabcd


介绍
Silverlight 2.0 外观控制：样式(Style), 模板(Template), 视觉状态(VisualState)和视觉状态管理器(VisualStateManager)


在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html


示例
1、样式(App.xaml)

< Application  xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
             x:Class ="Silverlight20.App"
              >
     < Application.Resources >
    
         <!-- 全局样式 - 任何地方都可引用 -->
         <!--
        Style - 自定义样式资源。用于修改控件的样式。各个控件的默认样式可参见文档
            x:Key - 唯一标识
            TargetType - 目标对象类型
            Setter - 属性设置器
                Property - 需要设置的属性名称
                Value - 需要设置的属性值
         -->
         < Style  x:Key ="styleTestApp"  TargetType ="TextBox" >
             < Setter  Property ="FontSize"  Value ="24" />
             < Setter  Property ="Foreground"  Value ="#0000FF" />
         </ Style >

     </ Application.Resources >
</ Application >

样式(Style.xaml)

< UserControl  x:Class ="Silverlight20.Appearance.Style"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >
     < StackPanel  HorizontalAlignment ="Left" >
    
         < StackPanel.Resources >
        
             <!-- 容器内样式 - 所属容器内可引用 -->
             <!--
            Style - 自定义样式资源。用于修改控件的样式。各个控件的默认样式可参见文档
                x:Key - 唯一标识
                TargetType - 目标对象类型
                Setter - 属性设置器
                    Property - 需要设置的属性名称
                    Value - 需要设置的属性值
             -->
             < Style  x:Key ="styleTestInContainer"  TargetType ="TextBox" >
                 < Setter  Property ="FontSize"  Value ="24" />
                 < Setter  Property ="Foreground"  Value ="#00FF00" />
             </ Style >
            
         </ StackPanel.Resources >


         <!-- 全局样式的应用 -->
         < TextBox  Text ="我是TextBox（全局样式的应用）"  Margin ="5"  Style =" {StaticResource styleTestApp} "   />

         <!-- 容器内样式的应用 -->
         < TextBox  Text ="我是TextBox（容器内样式的应用）"  Margin ="5"  Style =" {StaticResource styleTestInContainer} "   />
        
         <!-- 内联样式的应用。内联样式优先级高于全局样式和容器内样式 -->
         < TextBox  Text ="我是TextBox（内连样式的应用）"  Margin ="5"  Foreground ="#FF0000"   Style =" {StaticResource styleTestInContainer} "   />
        
     </ StackPanel >
</ UserControl >

2、模板(App.xaml)

< Application  xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
             x:Class ="Silverlight20.App"
              >
     < Application.Resources >
    
         <!-- 全局模板 - 任何地方都可引用 -->
         <!--
        ControlTemplate - 自定义控件模板。用于修改控件的外观。各个控件的默认模板可参见文档
            x:Key - 唯一标识
            TargetType - 目标对象类型
        ContentPresenter - 用于显示继承自 System.Windows.Controls.ContentControl 的控件的内容
        TemplateBinding - 绑定到所指定的属性名称
         -->
         < ControlTemplate  x:Key ="templateTestApp"  TargetType ="Button" >
             < Border  BorderBrush ="Red"  BorderThickness ="1" >
                 < Grid  Background =" {TemplateBinding Background} " >
                     < ContentPresenter  HorizontalAlignment ="Right"   />
                 </ Grid >
             </ Border >
         </ ControlTemplate >

     </ Application.Resources >
</ Application >

模板(Template.xaml)

< UserControl  x:Class ="Silverlight20.Appearance.Template"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >
     < StackPanel  HorizontalAlignment ="Left" >

         < StackPanel.Resources >

             <!-- 容器内模板 - 所属容器内可引用 -->
             <!--
            ControlTemplate - 自定义控件模板。用于修改控件的外观。各个控件的默认模板可参见文档
                x:Key - 唯一标识
                TargetType - 目标对象类型
            ContentPresenter - 用于显示继承自 System.Windows.Controls.ContentControl 的控件的内容
            TemplateBinding - 绑定到所指定的属性名称
             -->
             < ControlTemplate  x:Key ="templateTestInContainer"  TargetType ="Button" >
                 < Border  BorderBrush ="Red"  BorderThickness ="1" >
                     < Grid  Background =" {TemplateBinding Background} " >
                         < ContentPresenter  HorizontalAlignment ="Right"   />
                     </ Grid >
                 </ Border >
             </ ControlTemplate >

             <!-- 样式内设置模板 - 指定了样式即指定了样式内的模板 -->
             < Style  x:Key ="templateTestInStyle"  TargetType ="Button" >
                 < Setter  Property ="Template" >
                     < Setter.Value >
                         < ControlTemplate  TargetType ="Button" >
                             < Border  BorderBrush ="Red"  BorderThickness ="1" >
                                 < Grid  Background =" {TemplateBinding Background} " >
                                     < ContentPresenter  HorizontalAlignment ="Right"   />
                                 </ Grid >
                             </ Border >
                         </ ControlTemplate >
                     </ Setter.Value >
                 </ Setter >
             </ Style >

         </ StackPanel.Resources >


         <!-- 全局模板的应用 -->
         < Button  Width ="200"  Margin ="5"  Content ="我是Button（全局模板的应用）"  Background ="Yellow"  Template =" {StaticResource templateTestApp} "   />

         <!-- 容器内模板的应用 -->
         < Button  Width ="200"  Margin ="5"  Content ="我是Button（容器内模板的应用）"  Background ="Yellow"  Template =" {StaticResource templateTestInContainer} "   />

         <!-- 样式内模板的应用 -->
         < Button  Width ="200"  Margin ="5"  Content ="我是Button（样式内模板的应用）"  Background ="Yellow"  Style =" {StaticResource templateTestInStyle} "   />

         <!-- 内联式模板的应用 -->
         < Button  Width ="200"  Margin ="5"  Content ="我是Button（样式内模板的应用）" >
             < Button.Template >
                 < ControlTemplate >
                     < Border  BorderBrush ="Red"  BorderThickness ="1" >
                         < Grid  Background ="Yellow" >
                             < ContentPresenter  HorizontalAlignment ="Right"   />
                         </ Grid >
                     </ Border >
                 </ ControlTemplate >
             </ Button.Template >
         </ Button >
     </ StackPanel >
</ UserControl >

3、视觉状态和视觉状态管理器(App.xaml)

< Application  xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
             x:Class ="Silverlight20.App"
              >
     < Application.Resources >
    
         <!-- 全局视觉状态 - 任何地方都可引用 -->
         <!--
        VisualStateManager - 视觉状态管理器，用来管理视觉状态的。各个控件的默认视觉状态可参见文档
            需要导入命名空间 xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
         -->
         < ControlTemplate  x:Key ="vsmTestApp"  TargetType ="Button"  xmlns:vsm ="clr-namespace:System.Windows;assembly=System.Windows" >
             < Grid >
                 < vsm:VisualStateManager.VisualStateGroups >

                     <!--
                    VisualStateGroup - 视觉状态组
                        如：
                        CommonStates 组有 Normal, MouseOver, Pressed, Disabled
                        FocusStates 组有 Unfocused, Focused
                        每一个视觉状态组取一个视觉状态值就构成了控件的视觉状态
                    x:Name - 视觉状态的所属组别名称
                     -->
                     < vsm:VisualStateGroup  x:Name ="CommonStates" >

                         <!--
                        VisualState - 配置视觉状态
                            x:Name - 所属视觉状态组内的指定的视觉状态名称
                         -->
                         < vsm:VisualState  x:Name ="MouseOver" >
                             < Storyboard >
                                 < ColorAnimation 
                                         Storyboard.TargetName ="borderBrush"  
                                        Storyboard.TargetProperty ="Color"  
                                        To ="Green"
                                        Duration ="0:0:3"   />
                             </ Storyboard >
                         </ vsm:VisualState >

                         < vsm:VisualState  x:Name ="Normal"   />

                         <!--
                        VisualStateGroup.Transitions - 所属视觉状态组内的状态转换的配置
                            From - 转换前的视觉状态名称
                            To - 转换后的视觉状态名称
                            GeneratedDuration - 一个状态转换到另一个状态的所需时间
                         -->
                         < vsm:VisualStateGroup.Transitions >
                             < vsm:VisualTransition  From ="MouseOver"  To ="Normal"  GeneratedDuration ="0:0:3" >
                                 < Storyboard >
                                     < ColorAnimation 
                                         Storyboard.TargetName ="borderBrush"  
                                        Storyboard.TargetProperty ="Color"  
                                        To ="Red"
                                        Duration ="0:0:3"   />
                                 </ Storyboard >
                             </ vsm:VisualTransition >
                         </ vsm:VisualStateGroup.Transitions >

                     </ vsm:VisualStateGroup >
                 </ vsm:VisualStateManager.VisualStateGroups >

                 < Border  x:Name ="border"  BorderThickness ="10" >
                     < Border.BorderBrush >
                         < SolidColorBrush  x:Name ="borderBrush"  Color ="Red"   />
                     </ Border.BorderBrush >
                     < Grid  Background =" {TemplateBinding Background} " >
                         < ContentPresenter  HorizontalAlignment ="Right"   />
                     </ Grid >
                 </ Border >
             </ Grid >
         </ ControlTemplate >

     </ Application.Resources >
</ Application >

视觉状态和视觉状态管理器(VisualStateManager.xaml)

< UserControl  x:Class ="Silverlight20.Appearance.VisualStateManager"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >
     < StackPanel  HorizontalAlignment ="Left" >
    
         < StackPanel.Resources >

             <!-- 容器内视觉状态 - 所属容器内可引用 -->
             <!--
            VisualStateManager - 视觉状态管理器，用来管理视觉状态的。各个控件的默认视觉状态可参见文档
                需要导入命名空间 xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
             -->
             < ControlTemplate  x:Key ="vsmTestInContainer"  TargetType ="Button"  xmlns:vsm ="clr-namespace:System.Windows;assembly=System.Windows" >
                 < Grid >
                     < vsm:VisualStateManager.VisualStateGroups >
                    
                         <!--
                        VisualStateGroup - 视觉状态组
                            如：
                            CommonStates 组有 Normal, MouseOver, Pressed, Disabled
                            FocusStates 组有 Unfocused, Focused
                            每一个视觉状态组取一个视觉状态值就构成了控件的视觉状态
                        x:Name - 视觉状态的所属组别名称
                         -->
                         < vsm:VisualStateGroup  x:Name ="CommonStates" >
                        
                             <!--
                            VisualState - 配置视觉状态
                                x:Name - 所属视觉状态组内的指定的视觉状态名称
                             -->
                             < vsm:VisualState  x:Name ="MouseOver" >
                                 < Storyboard >
                                     < ColorAnimation 
                                         Storyboard.TargetName ="borderBrush"  
                                        Storyboard.TargetProperty ="Color"  
                                        To ="Green"
                                        Duration ="0:0:3"   />
                                 </ Storyboard >
                             </ vsm:VisualState >
                            
                             < vsm:VisualState  x:Name ="Normal"   />
                            
                             <!--
                            VisualStateGroup.Transitions - 所属视觉状态组内的状态转换的配置
                                From - 转换前的视觉状态名称
                                To - 转换后的视觉状态名称
                                GeneratedDuration - 一个状态转换到另一个状态的所需时间
                             -->
                             < vsm:VisualStateGroup.Transitions >
                                 < vsm:VisualTransition  From ="MouseOver"  To ="Normal"  GeneratedDuration ="0:0:3" >
                                     < Storyboard >
                                         < ColorAnimation 
                                         Storyboard.TargetName ="borderBrush"  
                                        Storyboard.TargetProperty ="Color"  
                                        To ="Red"
                                        Duration ="0:0:3"   />
                                     </ Storyboard >
                                 </ vsm:VisualTransition >
                             </ vsm:VisualStateGroup.Transitions >

                         </ vsm:VisualStateGroup >
                     </ vsm:VisualStateManager.VisualStateGroups >

                     < Border  x:Name ="border"  BorderThickness ="10" >
                         < Border.BorderBrush >
                             < SolidColorBrush  x:Name ="borderBrush"  Color ="Red"   />
                         </ Border.BorderBrush >
                         < Grid  Background =" {TemplateBinding Background} " >
                             < ContentPresenter  HorizontalAlignment ="Right"   />
                         </ Grid >
                     </ Border >
                 </ Grid >
             </ ControlTemplate >
            
         </ StackPanel.Resources >


         <!-- 全局视觉状态的应用 -->
         < Button  Content ="我是Button（全局视觉状态的应用）"  Margin ="5"  Background ="Yellow"  Template =" {StaticResource vsmTestApp} "   />

         <!-- 容器内视觉状态的应用 -->
         < Button  Content ="我是Button（容器内视觉状态的应用）"  Margin ="5"  Background ="Yellow"  Template =" {StaticResource vsmTestInContainer} "   />

     </ StackPanel >
</ UserControl >

OK
[源码下载]