xaml中VisualState的使用

转载 2013年12月02日 01:55:25

原文网址: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-包含-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)当鼠标点击时

silverlight/WPF 自定义VisualState 状态切换

想要一个控件在选中和未选中时表现两种状态,就想到了ToggleButton的Checked,
  • wushang923
  • wushang923
  • 2014年06月13日 15:45
  • 3216

Win10开发:视觉状态VisualState与自适应UI

VSM可以根据程序的设置,在设定的条件下更改某些UI的呈现状态。在Win10中因为自适应UI的需求,因此需要VSM的助攻。在Win10中常常可以根据程序的运行环境,或者说运行平台(Phone,Tabl...
  • zmq570235977
  • zmq570235977
  • 2015年09月01日 21:58
  • 1207

XAML中特殊字符

题目:创建一个包含文本的按钮 错误的XAML如下:   正确的XAML如下: <Click Me>       在XAML中使用实体引用来代替那些特殊字符,实体...
  • wangshubo1989
  • wangshubo1989
  • 2015年07月08日 14:17
  • 5273

WPF学习------XAML 语法详述

XAML 语言规范 XAML 语言规范中也定义或引用了此处定义的 XAML 语法术语。 XAML 是一种基于 XML 并遵循或扩展 XML 结构规则的语言。 其中某些术语共享自或基于描述 ...
  • lanse_my
  • lanse_my
  • 2014年06月13日 08:34
  • 3534

在XAML代码中导入名称空间

使用如下的代码导入指定的名称空间。不仅导入了名称空间,而且还为该名称空间指定了一个前缀local,当然也可以指定为其他的前缀名,这个可自行定义。导入后,该名称空间的公开成员即可在当前XAML代码中使用...
  • gjysk
  • gjysk
  • 2014年08月16日 10:45
  • 1750

编译:XAML与程序代码结合(转载)

编译:XAML与程序代码结合(Compilation: Mixing XAML with Procedural Code)            wpf应用程序完全可以用纯程序代码来实现。而XAML的...
  • kissjob
  • kissjob
  • 2010年04月27日 10:48
  • 1163

WPF基础之XAML----(XAML 根元素和 xmlns,事件和 XAML 代码隐藏)

XAML 根元素和 xmlns 一个 XAML 文件只能有一个根元素,这样才能成为格式正确的 XML 文件和有效的 XAML 文件。通常,应选择属于应用程序模型一部分的元素(例如,为页面选择 W...
  • cdefg198
  • cdefg198
  • 2012年05月16日 17:59
  • 6332

WPF XAML X名称空间详解

X名称空间里面的成员(如X:Name,X:Class)都是写给XAML编译器看的、用来引导XAML编译器将XAML代码编译为CLR代码。 【X名称空间里面到底都有些什么】     x名称空间...
  • aoshilang2249
  • aoshilang2249
  • 2015年03月18日 21:19
  • 1619

如何在.cs中统一动态修改xaml中style资源定义的样式

情形一:单纯的修改一个控件元素的样式,那么只要在.cs中仅仅针对这个控件的样式属性的修改即可。 情形二:如果是要针对同一类的所有控件的样式进行相同的属性修改,比如针对页面中所有的Label控件进行修...
  • u010792238
  • u010792238
  • 2015年05月03日 15:06
  • 979

【.Net码农】XAML资源入门

一.  资源(Resources) 1.  XAML 中定义资源的语法格式如下: 在 Windows 8 Metro 应用开发中,每个 Framework 对象都支持 Resource...
  • CrackLibby
  • CrackLibby
  • 2015年05月11日 16:48
  • 305
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:xaml中VisualState的使用
举报原因:
原因补充:

(最多只允许输入30个字)