silverlight基本使用Visual State Manager

来源：互联网发布：Ad手机后期软件编辑：程序博客网时间：2024/05/22 02:25
代码如下：
<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: