关闭

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

1465人阅读 评论(0) 收藏 举报

需求:一个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的过程,平滑进入等效果。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:20806次
    • 积分:366
    • 等级:
    • 排名:千里之外
    • 原创:14篇
    • 转载:2篇
    • 译文:0篇
    • 评论:7条
    文章分类
    文章存档