2.0外观之样式, 模板, 视觉状态和视觉状态管理器

介绍
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

你可能感兴趣的:(管理)