代码如下：
<UserControl x:Class="VsmState.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="800" d:DesignWidth="800">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Resources>
<Style x:Key="ButtonTemplete" targettype="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate targettype="Button">
<Border x:Name="border" Width="300" Height="100" Opacity="1" BorderThickness="2" >
<!--状态组合-->
<visualstatemanager.VisualStateGroups>
<!--单个状态组合-->
<VisualStateGroup x:Name="commentstate">
<!--设置单个的状态组里不同状态切换时的动画时间-->
<VisualStateGroup.Transitions>
<VisualTransition From="normal" To="MouSEOver" GeneratedDuration="0:0:0.3"></VisualTransition>
<VisualTransition From="MouSEOver" To="normal" GeneratedDuration="0:0:0.2"></VisualTransition>
<VisualTransition From="MouSEOver" To="pressed" GeneratedDuration="0:0:0.2"></VisualTransition>
<VisualTransition From="pressed" To="MouSEOver" GeneratedDuration="0:0:0.2"></VisualTransition>
</VisualStateGroup.Transitions>
<!--单个状态的动画，下面的x:Name不能写错哦，不然无效果-->
<VisualState x:Name="normal"></VisualState>
<VisualState x:Name="MouSEOver" >
<Storyboard>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Width" To="600"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Height" To="120"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="0.8"></DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="0.8"></DoubleAnimation>
<ColorAnimation Storyboard.TargetName="BackgroundBrush" Storyboard.TargetProperty="Color" To="LightSkyBlue" />
<ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="Blue" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</visualstatemanager.VisualStateGroups>
<!--内容设置.-->
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<!--背景色设置.-->
<Border.Background>
<SolidColorBrush x:Name="BackgroundBrush" Color="Gray"/>
</Border.Background>
<!--边框颜色设置.-->
<Border.BorderBrush>
<SolidColorBrush x:Name="BorderBrush" Color="Black"/>
</Border.BorderBrush>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<!--button引用ButtonTemplate模板.-->
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Content="I'm a Button" Style="{StaticResource ButtonTemplete}"/>
</Grid>
</UserControl>
效果有点像android里面的选择器Seletor
效果如下：
normal状态：
