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)当鼠标点击时

相关文章推荐

通过 PythonNet 使用 XAML 混合编程

(欢迎光临我的独立博客) 在昨天的文章里,我介绍了如何利用 PythonNet 来从 Python 中调用 WPF 类库。这只是第一步。接下来将面临的挑战是,如何有效的应付复杂多变的 UI 设计呢?...

使用XAML创建自定义图形

  • 2010-06-28 16:49
  • 236KB
  • 下载

6.在Xamarin.Forms中使用XAML代码创建页面

xaml代码的方式也是和WPF的差不多,比如写一个label<Label Text="Hello from XAML!" IsVisible="True" XAl...

使用XAML和C#创建按钮

  • 2010-06-28 16:50
  • 204KB
  • 下载

XAML组件属性重复使用 资源(Resources)与样式(Style)介绍

转载自:http://www.it165.net/pro/html/201311/7923.html 前言   在学习开发XAML时,有时候画面上某些组件可能会需要设定一样的属性(如:我有三个T...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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