Silverlight 外觀之樣式, 模板, 視覺狀態和視覺狀態管理器

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