xaml中VisualState的使用

发布时间：2024-12-22 16:33

耳机使用中的充电宝使用注意事项 #生活技巧# #数码产品使用技巧# #耳机使用心得#

原文网址：http://www.cnblogs.com/jason_zhou/archive/2012/06/12/2546485.html

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 x:Key ="ButtonTemplate" TargetType ="Button" >
                 < Setter Property ="Template" >
                     < Setter.Value >
                         < ControlTemplate TargetType ="Button" >

< Border x:Name ="Button_RootElement" Width ="500" Height ="100" Opacity ="1" BorderThickness ="2" >
                                 < VisualStateManager.VisualStateGroups >
                                      < VisualStateGroup x:Name ="CommonStates" > 
                                         < VisualStateGroup.Transitions >
                                             
                                             < VisualTransition From ="Normal" To ="MouseOver" GeneratedDuration ="0:0:0.3" /> 
                                             < VisualTransition From ="MouseOver" To ="Normal" GeneratedDuration ="0:0:0.2" /> 
                                             < VisualTransition From ="MouseOver" To ="Pressed" GeneratedDuration ="0:0:0.2" /> 
                                             < VisualTransition From ="Pressed" To ="MouseOver" GeneratedDuration ="0:0:0.2" /> </ VisualStateGroup.Transitions > 
                                         < VisualState x:Name ="Normal" />

< 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 > 
                                         < 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 Style =" {StaticResource ButtonTemplate} "
             HorizontalAlignment ="Center" VerticalAlignment ="Center"
            Content ="I'm a Button" /> </ Grid >
</ UserControl >

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

1)button初始化时