稳扎稳打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, 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
[源码下载]