silverlight基本使用Visual State Manager

代码如下：

<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状态：

Normal--->>>MouseOver:

MouseOver--->>>Pressed: