silverlight基础6-VisualStateManager

VisualStateManager

 

VisualStateManager用于管理控件的状态以及用于状态过渡的逻辑，一般放在controltemplate里面。

xmal中：

<templateRoot>
  <VisualStateManager.VisualStateGroups>
    oneOrMoreVisualStateGroups
  </VisualStateManager.VisualStateGroups>
</templateRoot>

 

 

一个<VisualStateManager>的结构如下：

------------------------------------------------------------------------------------------------------------------------------------

      <VisualStateManager.VisualStateGroups>  状态组组合

         <VisualStateGroup>   设置单个的状态组

             <VisualStateGroup.Transitions>  设置单个的状态组里不同状态切换时的动画时间
             <VisualState>    设置单个的状态的动画效果
        </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>

-------------------------------------------------------------------------------------------------------------------------------------

    

      以下的例子创建了一个VisualStateManager，里面包含了3种状态情形（VisualState：Normal，Mouseover，Pressed）

      此外创建了一个button引用这个，当鼠标放在这个button上时，button会变大，当鼠标按下这个button时，button颜色会改变

xmal中：

<UserControl x:Class="VisualStateManager_Sample.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="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.Resources>
            <!--Style-包含-ControlTemplate-包含-VisualStateManager-->
            <Style x:Key="ButtonTemplate" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                             <!--设置控件的Width，Height，Opacity，BorderThickness-->
                            <Border x:Name="Button_RootElement" Width="500" Height="100" Opacity="1" BorderThickness="2">
                                <VisualStateManager.VisualStateGroups>
                                    <!--VisualStateGroup - 视觉状态组，包含CommonStates和FocusStates                       
                            CommonStates 包括： Normal, MouseOver, Pressed, Disabled四个VisualState
                            FocusStates 包括： Unfocused, Focused两个VisualState-->

                                    <VisualStateGroup x:Name="CommonStates">
                                       
                                        <!--设置视觉状态组改变时的动画时间-->
                                        <VisualStateGroup.Transitions>
                                            <!--Take 0.3 second from Normal state to trasition to the MouseOver state.-->
                                            <VisualTransition From="Normal" To="MouseOver" GeneratedDuration="0:0:0.3"/>

                                            <!--Take 0.2 second from MouseOver state to trasition to the Normal state.-->
                                            <VisualTransition From="MouseOver" To="Normal" GeneratedDuration="0:0:0.2"/>

                                            <!--Take 0.2 second from MouseOver state to trasition to the Pressed state.-->
                                            <VisualTransition From="MouseOver" To="Pressed" GeneratedDuration="0:0:0.2"/>

                                            <!--Take 0.2 second from Pressed state to trasition to the MouseOver state.-->
                                            <VisualTransition From="Pressed" To="MouseOver" GeneratedDuration="0:0:0.2"/>

                                        </VisualStateGroup.Transitions>

                                        <!--3个VisualState，第一个VisualState为Normal-->
                                        <VisualState x:Name="Normal" />

                                        <!--Change the button Width and Height when the mouse is over the button.
                                        分别设置Button_RootElement下的Width和Height属性，鼠标放在button上时，button会变大-->
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="Button_RootElement" 
                                                 Storyboard.TargetProperty="Width" To="600" />
                                                <DoubleAnimation Storyboard.TargetName="Button_RootElement" 
                                                 Storyboard.TargetProperty="Height" To="120" />
                                            </Storyboard>                                          
                                        </VisualState>

                                        <!--Change the BackgroundBrush背景色, BackgroundBrush边框色, Opacity when the button is pressed.-->
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="Button_RootElement" 
                                                 Storyboard.TargetProperty="Opacity" To="0.8" />
                                                <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 Style="{StaticResource ButtonTemplate}" 
             HorizontalAlignment="Center" VerticalAlignment="Center"             
            Content="I'm a Button" />
 
    </Grid>
</UserControl>

 

界面如下（由于是截屏，鼠标不可见）

1)button初始化时

2）鼠标在button时

3）当鼠标点击时