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