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

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

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

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

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

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

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