感觉书里讲的模板好复杂，看的我一头雾水。书中说常规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
