Blend 状态的更换 GotoStateBehavior VS. this.状态.Storyboard.Begin();

原创 2012年03月30日 13:29:10

需求:一个grid上,用row,column来分成不同的区域,在不同区域放置border,在点击border时触发状态,并改变其相应区域,达到变大变小渐变的过程。

 

一、GotoStateAction 触发动画

在border处理好之后,添加

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

 

并为border添加事件,可直接用过blend添加:

1:查找到对应行为

直接拖拽至所要触发事件的控件上,.xmal 代码如下:

<i:Interaction.Triggers>
   <i:EventTrigger EventName="MouseLeftButtonDown">
      <ei:GoToStateAction StateName="VisualState"/>
   </i:EventTrigger>
</i:Interaction.Triggers>

在blend中指定触发事件,及其触发的状态名:

 eventname: MouseLeftButtonDown; StateName: 要变换到的状态名称

2:新状态:

创建一个新的状态VisualState,打开FluidLayout 按钮。

添加过滤到*,时间订为1s,添加easingfunction。

  时间框旁边的即为EasingFunction,点击打开如下,添加:

在状态改变过程中,显示的效果。

改变border的column\row\rowspan\columnspan 数据,自动生成代码如下:

<VisualState x:Name="VisualState">
   <Storyboard>
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="border">
	 <DiscreteObjectKeyFrame KeyTime="0">
	     <DiscreteObjectKeyFrame.Value>
		<System:Int32>2</System:Int32>
              </DiscreteObjectKeyFrame.Value>
	 </DiscreteObjectKeyFrame> 
</ObjectAnimationUsingKeyFrames>

 
二、storyboard.Begin() 触发状态

在blend中的创建状态,但是触发状态在后台写,给border加事件MouseLeftButtonDown,双击在后台自动生成,.cs文件下:

        private void border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.VisualState.Storyboard.Begin();
        }


区别:

storyboard 触发的状态改变,没有平滑的过程,而GoToStateAction,可以触发easingfunction的过程,平滑进入等效果。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Blend 状态的更换 GotoStateBehavior VS. this.状态.Storyboard.Begin();

需求:一个grid上,用row,column来分成不同的区域,在不同区域放置border,在点击border时触发状态,并改变其相应区域,达到变大变小渐变的过程。   一、GotoStateAct...

Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)

Silverlight中的动画(Animation)与视图状态管理(Visual State Manager) 结合使用是非常常见的,动画用于管理对象在某段事件段内执行的动画动作,视图状态管理则用于控...

react demo12 (获取组件属性状态this.state)

表单监控,this.state实战练习 需求:定义一个组件,将用户在输入框内输入的内容进行实时显示 分析:组件与用户交换时,存在状态的变化,即输入框的值 react dome ...

3、React中的状态(this.state)

一、什么是state state表示react组件内部的一种状态,通过组件内的getInitialState函数,可以为组件的初始状态赋值,当组件的状态发生改变时,组件会重新渲染。官方对state的...

react demo13 (根据组件属性状态this.state实现表单实时监控)

表单监控,this.state实战练习 需求:定义一个组件,将用户在输入框内输入的内容进行实时显示 分析:组件与用户交换时,存在状态的变化,即输入框的值 react dome ...

Expression Blend 中创建时间线Storyboard实现简单的动画

创建步骤: 打开Blend 4新建Silverlight Application, 添加TextBlock,设置文本为 timeline storyboard 按F6进入Blend...

使用storyboard,设置系统自带的tabbar的选中状态,未选中状态

使用storyboard设置系统自带的tabbar 1. 2.你会发现选中状态是没有图片的而未选中状态是被渲染的灰色 3.设置选中图片这里的作用相当于KVC的功能强制赋值上去 4.然并卵。图片...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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