Silverlight2 边学边练 之七 模板与状态

感觉书里讲的模板好复杂，看的我一头雾水。书中说常规Button组件的模板程序
打印出来需要4张纸那么多（恐怖～）。看来想利用好模板这东东还真不是件易事。
言归正传，本篇也以按键为例来练习模板（Template）与状态（State）相关知识。

首先要了解一下Button的状态，Button一共有2个状态组、6种状态：
CommonStates：Normal、MouseOver、Pressed、Disabled
FocusStates：Focused、Unfocused
下面来了解一下如何利用这些状态为Button设定模板，先看Demo效果：

XAML Code：

<UserControl x:Class="TemplateTest.Page"

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

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

    Width="400" Height="120">

    <!--创建Resource-->

    <UserControl.Resources>

        <!--创建Button模板-->

        <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">

            <!--设置RenderTransformOrigin以Button中心为变形原点-->

            <Grid RenderTransformOrigin="0.5,0.5">

                <!--默认Grid缩放比例为1：1-->

                <Grid.RenderTransform>

                    <ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1">

                    </ScaleTransform>

                </Grid.RenderTransform>

                

                <!--创建VisualState组，共用2个组-->

                <VisualStateManager.VisualStateGroups>

                    

                    <!--组1：常规状态组，共用4个状态-->

                    <VisualStateGroup x:Name="CommonStates">

                        <!--状态1：鼠标从Button上移开，从MouseOver状态转为Normal状态-->

                        <VisualStateGroup.Transitions>

                            <VisualTransition From="MouseOver" To="Normal" 

                                              GeneratedDuration="0:0:0.7">

                                <Storyboard>

                                    <!--将Grid ScaleX比例从0变为1，即从小变大-->

                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform"

                                                                   Storyboard.TargetProperty="ScaleX">

                                        <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="0">

                                        </LinearDoubleKeyFrame>

                                        <LinearDoubleKeyFrame KeyTime="0:0:0.7" Value="1">

                                        </LinearDoubleKeyFrame>

                                    </DoubleAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualTransition>

                        </VisualStateGroup.Transitions>

                        

                        <!--状态2：鼠标移动到Button上的状态-->

                        <VisualState x:Name="MouseOver">

                            <Storyboard>

                                <!--Button底色变为橙色-->

                                <ColorAnimation Duration="0:0:0" 

                                                Storyboard.TargetName="ButtonBackgroundBrush" 

                                                Storyboard.TargetProperty="Color" 

                                                To="Orange" />

                            </Storyboard>

                        </VisualState>

                        

                        <!--状态3：常规状态-->

                        <VisualState x:Name="Normal">

                            <Storyboard>

                                <!--Button底色变为红色-->

                                <ColorAnimation Duration="0:0:0" 

                                                Storyboard.TargetName="ButtonBackgroundBrush" 

                                                Storyboard.TargetProperty="Color" 

                                                To="Red" />

                                <!--焦点框透明度为0-->

                                <DoubleAnimation Duration="0" 

                                                 Storyboard.TargetName="FocusVisualElement"

                                                 Storyboard.TargetProperty="Opacity" 

                                                 To="0" />

                            </Storyboard>

                        </VisualState>

                        

                        <!--状态4：点击状态-->

                        <VisualState x:Name="Pressed">

                            <Storyboard>

                                <!--边框颜色变为黑色-->

                                <ColorAnimation Duration="0:0:0" 

                                                Storyboard.TargetName="BorderBrush" 

                                                Storyboard.TargetProperty="Color" 

                                                To="Black" />

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                    

                    <!--组2：鼠标点击后的焦点状态，共2个状态-->

                    <VisualStateGroup x:Name="FocusStates">

                        

                        <!--状态1：点击状态-->

                        <VisualState x:Name="Focused">

                            <Storyboard>

                                <!--焦点框透明度为1-->

                                <DoubleAnimation Duration="0" 

                                                 Storyboard.TargetName="FocusVisualElement"

                                                 Storyboard.TargetProperty="Opacity" 

                                                 To="1" />

                            </Storyboard>

                        </VisualState>

                        

                        <!--状态2：非点击状态-->

                        <VisualState x:Name="Unfocused">

                            <Storyboard>

                                <!--焦点框透明度0-->

                                <DoubleAnimation Duration="0" 

                                                 Storyboard.TargetName="FocusVisualElement"

                                                 Storyboard.TargetProperty="Opacity" 

                                                 To="0" />

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                </VisualStateManager.VisualStateGroups>

                

                <!--创建Button属性-->

                <Border x:Name="ButtonBorder" BorderThickness="5" CornerRadius="15">

                    <!--边框色-->

                    <Border.BorderBrush>

                        <SolidColorBrush  x:Name="BorderBrush" 

                                          Color="Orange"></SolidColorBrush>

                    </Border.BorderBrush>

                    <!--底色-->

                    <Border.Background>

                        <SolidColorBrush  x:Name="ButtonBackgroundBrush" 

                                          Color="Red"></SolidColorBrush>

                    </Border.Background>

                    <!--文字显示部分绑定了Button默认模板-->

                    <ContentPresenter Content="{TemplateBinding Content}"

                                      ContentTemplate="{TemplateBinding ContentTemplate}"

                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 

                                      Margin="0,5,0,5" />



                </Border>

                

                <!--鼠标点击后的焦点框-->

                <Rectangle x:Name="FocusVisualElement" 

                           Stroke="Black" Margin="8" Opacity="0"

                           RadiusX="10" RadiusY="10" 

                           StrokeThickness="1" StrokeDashArray="1 2"></Rectangle>



            </Grid>

        </ControlTemplate>

        

        <!--设定Button风格-->

        <Style x:Key="ButtonStyle" TargetType="Button">

            <!--模板引用上面创建的ButtonTemplate模板-->

            <Setter Property="Template" Value="{StaticResource ButtonTemplate}"></Setter>

            <!--文字颜色-->

            <Setter Property="Foreground" Value="White"></Setter>

            <!--文字大小-->

            <Setter Property="FontSize" Value="15"></Setter>

        </Style>

    </UserControl.Resources>

    

    <!--创建两个Button，均引用ButtonStyle风格-->

    <Grid x:Name="LayoutRoot" Background="White" Margin="5">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

        </Grid.RowDefinitions>

        <Button Margin="5" Content="Button One" 

                Style="{StaticResource ButtonStyle}"></Button>

        <Button Grid.Row="2" Margin="5" Content="Button Two" 

                Style="{StaticResource ButtonStyle}" ></Button>

    </Grid>

</UserControl>

有时看书的上的内容怎么也搞不明白，不知道书里说什么呢。找一些实例操练一下再返回去看书，
便知其所云，毛主席教导我们说：“实践出真知”吗。
本例参考自《Pro Silverlight 2 in C# 2008》CHAPTER 11 STYLES, TEMPLATES, AND CUSTOM CONTROLS