随笔 - 616, 文章 - 0, 评论 - 10492
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
[索引页]
[源码下载]


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