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

概述[索引页] [源码下载] 稳扎稳打Silverlight(12) - 2.0外观之样式, 模板, 视觉状态和视觉状态管理器 作者： webabcd 介绍 Silverlight 2.0 外观控制：样式(Style), 模板(Template), 视觉状态(VisualState)和视觉状态管理器(VisualStateManager) 在线DEMO http://www.cnblogs.com/w [索引页]
[源码下载]


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

以上是内存溢出为你收集整理的稳扎稳打Silverlight(12) - 2.0外观之样式, 模板, 视觉状态和视觉状态管理器全部内容，希望文章能够帮你解决稳扎稳打Silverlight(12) - 2.0外观之样式, 模板, 视觉状态和视觉状态管理器所遇到的程序开发问题。

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