穩紮穩打Silverlight(12) - 2.0外觀之樣式, 模闆, 視覺狀态和視覺狀态管理器

<a href="http://webabcd.blog.51cto.com/1787395/342790" target="_blank">[索引頁]</a>

<a href="http://down.51cto.com/data/100302" target="_blank">[源碼下載下傳]</a>

穩紮穩打Silverlight(12) - 2.0外觀之樣式, 模闆, 視覺狀态和視覺狀态管理器

介紹

Silverlight 2.0 外觀控制：樣式(Style), 模闆(Template), 視覺狀态(VisualState)和視覺狀态管理器(VisualStateManager)

線上DEMO

示例

1、樣式(App.xaml)

&lt;Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    

                         x:Class="Silverlight20.App" 

                         &gt; 

        &lt;Application.Resources&gt; 

                &lt;!--全局樣式 - 任何地方都可引用--&gt; 

                &lt;!-- 

                Style - 自定義樣式資源。用于修改控件的樣式。各個控件的預設樣式可參見文檔 

                        x:Key - 唯一辨別 

                        TargetType - 目标對象類型 

                        Setter - 屬性設定器 

                                Property - 需要設定的屬性名稱 

                                Value - 需要設定的屬性值 

                --&gt; 

                &lt;Style x:Key="styleTestApp" TargetType="TextBox"&gt; 

                        &lt;Setter Property="FontSize" Value="24"/&gt; 

                        &lt;Setter Property="Foreground" Value="#0000FF"/&gt; 

                &lt;/Style&gt; 

        &lt;/Application.Resources&gt; 

&lt;/Application&gt;

樣式(Style.xaml)

&lt;UserControl x:Class="Silverlight20.Appearance.Style" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt; 

        &lt;StackPanel HorizontalAlignment="Left"&gt; 

                &lt;StackPanel.Resources&gt; 

                        &lt;!--容器内樣式 - 所屬容器内可引用--&gt; 

                        &lt;!-- 

                        Style - 自定義樣式資源。用于修改控件的樣式。各個控件的預設樣式可參見文檔 

                                x:Key - 唯一辨別 

                                TargetType - 目标對象類型 

                                Setter - 屬性設定器 

                                        Property - 需要設定的屬性名稱 

                                        Value - 需要設定的屬性值 

                        --&gt; 

                        &lt;Style x:Key="styleTestInContainer" TargetType="TextBox"&gt; 

                                &lt;Setter Property="FontSize" Value="24"/&gt; 

                                &lt;Setter Property="Foreground" Value="#00FF00"/&gt; 

                        &lt;/Style&gt; 

                &lt;/StackPanel.Resources&gt; 

                &lt;!--全局樣式的應用--&gt; 

                &lt;TextBox Text="我是TextBox（全局樣式的應用）" Margin="5" Style="{StaticResource styleTestApp}" /&gt; 

                &lt;!--容器内樣式的應用--&gt; 

                &lt;TextBox Text="我是TextBox（容器内樣式的應用）" Margin="5" Style="{StaticResource styleTestInContainer}" /&gt; 

                &lt;!--内聯樣式的應用。内聯樣式優先級高于全局樣式和容器内樣式--&gt; 

                &lt;TextBox Text="我是TextBox（内連樣式的應用）" Margin="5" Foreground="#FF0000"    Style="{StaticResource styleTestInContainer}" /&gt; 

        &lt;/StackPanel&gt; 

&lt;/UserControl&gt;

2、模闆(App.xaml)

                &lt;!--全局模闆 - 任何地方都可引用--&gt; 

                ControlTemplate - 自定義控件模闆。用于修改控件的外觀。各個控件的預設模闆可參見文檔 

                ContentPresenter - 用于顯示繼承自 System.Windows.Controls.ContentControl 的控件的内容 

                TemplateBinding - 綁定到所指定的屬性名稱 

                &lt;ControlTemplate x:Key="templateTestApp" TargetType="Button"&gt; 

                        &lt;Border BorderBrush="Red" BorderThickness="1"&gt; 

                                &lt;Grid Background="{TemplateBinding Background}"&gt; 

                                        &lt;ContentPresenter HorizontalAlignment="Right" /&gt; 

                                &lt;/Grid&gt; 

                        &lt;/Border&gt; 

                &lt;/ControlTemplate&gt; 

模闆(Template.xaml)

&lt;UserControl x:Class="Silverlight20.Appearance.Template" 

                        &lt;!--容器内模闆 - 所屬容器内可引用--&gt; 

                        ControlTemplate - 自定義控件模闆。用于修改控件的外觀。各個控件的預設模闆可參見文檔 

                        ContentPresenter - 用于顯示繼承自 System.Windows.Controls.ContentControl 的控件的内容 

                        TemplateBinding - 綁定到所指定的屬性名稱 

                        &lt;ControlTemplate x:Key="templateTestInContainer" TargetType="Button"&gt; 

                                &lt;Border BorderBrush="Red" BorderThickness="1"&gt; 

                                        &lt;Grid Background="{TemplateBinding Background}"&gt; 

                                                &lt;ContentPresenter HorizontalAlignment="Right" /&gt; 

                                        &lt;/Grid&gt; 

                                &lt;/Border&gt; 

                        &lt;/ControlTemplate&gt; 

                        &lt;!--樣式内設定模闆 - 指定了樣式即指定了樣式内的模闆--&gt; 

                        &lt;Style x:Key="templateTestInStyle" TargetType="Button"&gt; 

                                &lt;Setter Property="Template"&gt; 

                                        &lt;Setter.Value&gt; 

                                                &lt;ControlTemplate TargetType="Button"&gt; 

                                                        &lt;Border BorderBrush="Red" BorderThickness="1"&gt; 

                                                                &lt;Grid Background="{TemplateBinding Background}"&gt; 

                                                                        &lt;ContentPresenter HorizontalAlignment="Right" /&gt; 

                                                                &lt;/Grid&gt; 

                                                        &lt;/Border&gt; 

                                                &lt;/ControlTemplate&gt; 

                                        &lt;/Setter.Value&gt; 

                                &lt;/Setter&gt; 

                &lt;!--全局模闆的應用--&gt; 

                &lt;Button Width="200" Margin="5" Content="我是Button（全局模闆的應用）" Background="Yellow" Template="{StaticResource templateTestApp}" /&gt; 

                &lt;!--容器内模闆的應用--&gt; 

                &lt;Button Width="200" Margin="5" Content="我是Button（容器内模闆的應用）" Background="Yellow" Template="{StaticResource templateTestInContainer}" /&gt; 

                &lt;!--樣式内模闆的應用--&gt; 

                &lt;Button Width="200" Margin="5" Content="我是Button（樣式内模闆的應用）" Background="Yellow" Style="{StaticResource templateTestInStyle}" /&gt; 

                &lt;!--内聯式模闆的應用--&gt; 

                &lt;Button Width="200" Margin="5" Content="我是Button（樣式内模闆的應用）"&gt; 

                        &lt;Button.Template&gt; 

                                &lt;ControlTemplate&gt; 

                                        &lt;Border BorderBrush="Red" BorderThickness="1"&gt; 

                                                &lt;Grid Background="Yellow"&gt; 

                                                        &lt;ContentPresenter HorizontalAlignment="Right" /&gt; 

                                                &lt;/Grid&gt; 

                                        &lt;/Border&gt; 

                                &lt;/ControlTemplate&gt; 

                        &lt;/Button.Template&gt; 

                &lt;/Button&gt; 

3、視覺狀态和視覺狀态管理器(App.xaml)

                &lt;!--全局視覺狀态 - 任何地方都可引用--&gt; 

                VisualStateManager - 視覺狀态管理器，用來管理視覺狀态的。各個控件的預設視覺狀态可參見文檔 

                        需要導入命名空間 xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" 

                &lt;ControlTemplate x:Key="vsmTestApp" TargetType="Button" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"&gt; 

                        &lt;Grid&gt; 

                                &lt;vsm:VisualStateManager.VisualStateGroups&gt; 

                                        &lt;!-- 

                                        VisualStateGroup - 視覺狀态組 

                                                如： 

                                                CommonStates 組有 Normal, MouseOver, Pressed, Disabled 

                                                FocusStates 組有 Unfocused, Focused 

                                                每一個視覺狀态組取一個視覺狀态值就構成了控件的視覺狀态 

                                        x:Name - 視覺狀态的所屬組别名稱 

                                        --&gt; 

                                        &lt;vsm:VisualStateGroup x:Name="CommonStates"&gt; 

                                                &lt;!-- 

                                                VisualState - 配置視覺狀态 

                                                        x:Name - 所屬視覺狀态組内的指定的視覺狀态名稱 

                                                --&gt; 

                                                &lt;vsm:VisualState x:Name="MouseOver"&gt; 

                                                        &lt;Storyboard&gt; 

                                                                &lt;ColorAnimation    

                                                                                Storyboard.TargetName="borderBrush"    

                                                                                Storyboard.TargetProperty="Color"    

                                                                                To="Green" 

                                                                                Duration="0:0:3" /&gt; 

                                                        &lt;/Storyboard&gt; 

                                                &lt;/vsm:VisualState&gt; 

                                                &lt;vsm:VisualState x:Name="Normal" /&gt; 

                                                VisualStateGroup.Transitions - 所屬視覺狀态組内的狀态轉換的配置 

                                                        From - 轉換前的視覺狀态名稱 

                                                        To - 轉換後的視覺狀态名稱 

                                                        GeneratedDuration - 一個狀态轉換到另一個狀态的所需時間 

                                                &lt;vsm:VisualStateGroup.Transitions&gt; 

                                                        &lt;vsm:VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:3"&gt; 

                                                                &lt;Storyboard&gt; 

                                                                        &lt;ColorAnimation    

                                                                                To="Red" 

                                                                &lt;/Storyboard&gt; 

                                                        &lt;/vsm:VisualTransition&gt; 

                                                &lt;/vsm:VisualStateGroup.Transitions&gt; 

                                        &lt;/vsm:VisualStateGroup&gt; 

                                &lt;/vsm:VisualStateManager.VisualStateGroups&gt; 

                                &lt;Border x:Name="border" BorderThickness="10"&gt; 

                                        &lt;Border.BorderBrush&gt; 

                                                &lt;SolidColorBrush x:Name="borderBrush" Color="Red" /&gt; 

                                        &lt;/Border.BorderBrush&gt; 

                        &lt;/Grid&gt; 

視覺狀态和視覺狀态管理器(VisualStateManager.xaml)

&lt;UserControl x:Class="Silverlight20.Appearance.VisualStateManager" 

                        &lt;!--容器内視覺狀态 - 所屬容器内可引用--&gt; 

                        VisualStateManager - 視覺狀态管理器，用來管理視覺狀态的。各個控件的預設視覺狀态可參見文檔 

                                需要導入命名空間 xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" 

                        &lt;ControlTemplate x:Key="vsmTestInContainer" TargetType="Button" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"&gt; 

                                &lt;Grid&gt; 

                                        &lt;vsm:VisualStateManager.VisualStateGroups&gt; 

                                                VisualStateGroup - 視覺狀态組 

                                                        如： 

                                                        CommonStates 組有 Normal, MouseOver, Pressed, Disabled 

                                                        FocusStates 組有 Unfocused, Focused 

                                                        每一個視覺狀态組取一個視覺狀态值就構成了控件的視覺狀态 

                                                x:Name - 視覺狀态的所屬組别名稱 

                                                &lt;vsm:VisualStateGroup x:Name="CommonStates"&gt; 

                                                        &lt;!-- 

                                                        VisualState - 配置視覺狀态 

                                                                x:Name - 所屬視覺狀态組内的指定的視覺狀态名稱 

                                                        --&gt; 

                                                        &lt;vsm:VisualState x:Name="MouseOver"&gt; 

                                                        &lt;/vsm:VisualState&gt; 

                                                        &lt;vsm:VisualState x:Name="Normal" /&gt; 

                                                        VisualStateGroup.Transitions - 所屬視覺狀态組内的狀态轉換的配置 

                                                                From - 轉換前的視覺狀态名稱 

                                                                To - 轉換後的視覺狀态名稱 

                                                                GeneratedDuration - 一個狀态轉換到另一個狀态的所需時間 

                                                        &lt;vsm:VisualStateGroup.Transitions&gt; 

                                                                &lt;vsm:VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:3"&gt; 

                                                                        &lt;Storyboard&gt; 

                                                                                &lt;ColorAnimation    

                                                                        &lt;/Storyboard&gt; 

                                                                &lt;/vsm:VisualTransition&gt; 

                                                        &lt;/vsm:VisualStateGroup.Transitions&gt; 

                                                &lt;/vsm:VisualStateGroup&gt; 

                                        &lt;/vsm:VisualStateManager.VisualStateGroups&gt; 

                                        &lt;Border x:Name="border" BorderThickness="10"&gt; 

                                                &lt;Border.BorderBrush&gt; 

                                                        &lt;SolidColorBrush x:Name="borderBrush" Color="Red" /&gt; 

                                                &lt;/Border.BorderBrush&gt; 

                                                &lt;Grid Background="{TemplateBinding Background}"&gt; 

                &lt;!--全局視覺狀态的應用--&gt; 

                &lt;Button Content="我是Button（全局視覺狀态的應用）" Margin="5" Background="Yellow" Template="{StaticResource vsmTestApp}" /&gt; 

                &lt;!--容器内視覺狀态的應用--&gt; 

                &lt;Button Content="我是Button（容器内視覺狀态的應用）" Margin="5" Background="Yellow" Template="{StaticResource vsmTestInContainer}" /&gt; 

OK

     本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/343042，如需轉載請自行聯系原作者