Blend 3入门之深入Behavior

简介: 学WPF 的一定知道,触发器是非常强大。这是一种对象,该对象侦听特定条件(例如事件触发或属性设置为某个值),并调用一项或多项关联的操作作为响应。行为就是一组对象,在没有来自触发器或类似触发器的项目的外部通知的情况下也可以执行用户定义的动作。

学WPF 的一定知道,触发器是非常强大。这是一种对象,该对象侦听特定条件(例如事件触发或属性设置为某个值),并调用一项或多项关联的操作作为响应。行为就是一组对象,在没有来自触发器或类似触发器的项目的外部通知的情况下也可以执行用户定义的动作。尽管需要满足某种条件,但它不必由触发器调用。

一、了解Behavior

    1 .Blend中包含三种基本的行为:
       a)  Behavior --将状态信息和零个或更多个 ICommand 封装到一个可附加的对象中,提供对象绑定和撤销绑定的事件,适应大多数情况。
       b)  TriggerAction --代表封装功能单元的可附加对象。
       c)  TargetTriggerAction --代表一项操作,可以将该操作确定为目标以影响不同于其 AssociatedObject 的对象,提供了更高层次的抽象设计,AssociatedObject 就 是被绑定的上层对象。
    2.使用行为的泛型,如 Behavior<T>,TriggerAction<T>,TargetTriggerAction<T>
      因为这是基础结构类。操作设计者应从 泛型 而不是从此类中派生 。可以看下面的结构图

 

image 

<>

二、在Blend 3.0中应用Behavior

  1. 新建项目
    image 
  2. 拖动一个圆形控件到白板
    image 
    找到Behavior组件,这里我们选择MouseDragElementBehavior(可拖动行为)。
    image 
    将其拖动到白板上的圆形控件上,或者是Objects And Timeline 面板上的Ellipse对象上,我们得到如下图。
    image
    Ok,我们为圆形添加了一个可拖动的行为,即现在圆形在运行后就可以自由拖动了,可以运行下看看.
    很简洁,很方便,很强大,Allways , No Code。
  3. 再进一步,我们为原型添加MouseEnter的VisualState,其实就是鼠标移入的一种样式改变。
    image  image image
    注意按右边加号添加VisualState,并改名。
    当此VisualState前有个红色圆点,表示现在已经开始记录状态,你可以修改Ellipse控件的外观了,结束了按下上面的Base退出编辑。
    image 
    选择GoToStateAction 行为,并将其拖到Ellcipse上面。
    image image image
    选中GoToStateAction,将属性面板中StateName选择为InCircle状态,EventName设置为MouseEnter。
    Ok,我们已经为圆添加了鼠标移入事件。运行看看吧。
  4. 当然,鼠标移入之后就一直保持那个状态了,那就再给它加个OutCircle的虚拟状态,自己尝试吧,但现在不要急着将再创建个Behavior,我们留给下面的TiggerAction来完成,以便区别两者的不同。

三、在Blend 3 中应用TiggerAction

  1. 在上面项目基础上我们新建项,File –>New Item,取名为OutStateAction.cs
     image
    按下Shift+Ctrl+B给整个项目编译一下。这是我们再到Assets面板的Behavior中就会发现我们刚才创建的动作,将它拖到我们的圆上。
    image image image
    修改行为组件的属性,这里我们要让对象MouseLeave事件触发时执行指定的动作,然而这个动作在哪实现呢??
  2. 打开OutStateAction.cs,我们发现里面有注释提示你,Invoke函数就是你想要实现的动作,Ok,加入你的代码吧。
    这里我们想让圆的颜色变为蓝色,那么如何获取这个被附加的上层对象呢,前面已经介绍过,TriggerAction中的AssociatedObject 属性就是被绑定的上层对象的引用。有了这个引用,我们可以做很多事情了,在Invoke函数中插入下面的代码
         var ellipse = this.AssociatedObject as Ellipse;
         ellipse.Fill = new SolidColorBrush(Colors.Red);
  3. 好了,现在可以运行下看下效果(这里在程序中改变Fill的颜色后再使用VisualState好像就失效了,估计应该是覆盖了吧,有大侠指点下:-)

三、Blend 3 中应用TargetTriggerAction

默认情况下,尽管你可以更改操作所影响的对象,但操作只能访问它所附加到的元素(父元素),即 AssociatedObject 属性。为了消除这种上下级的依赖,实现松散耦合的操作,由用户自定义操作的目标,我们就从 TargetedTriggerAction(而不是 TriggerAction)中扩展表示操作的类。

  1. 在上面基础上,我们新建一个类。并让它继承自TargetedTriggerAction<DependencyObject>
    image
  2. TargetedTriggerAction<DependencyObject> 依然有一个Invoke函数需要你重写,但是这次你要针对的对象是由程序在运行时提供,该类本身并不了解具体的Target Object是什么,触发器是什么。但它提供了一个访问这个抽象Target的引用。
    我们先在InVoke中添加如下简单的事件
    protected override void Invoke(object o)
    {
             MessageBox.Show("Hello world");
    }
    不管外界是何触发器,一旦满足了触发条件,程序就会执行Invoke,并将获取当前Target的引用
  3. Shift + Ctrl +B 编译后,可以看到我们的ObjectTriggerAction行为组件,把它拖到圆上
    image image image
    看到TargetName已经设为ellipse了,当然,我们可以改成其他对象为目标
    修改EventName 为MouseLeftButtonUp,当鼠标按下松开后,我们的程序就会自动将Target对象输送给Action了,设计得很完美。
  4. 运行一下看到是否拖动完后会弹出个对话框呢,那就OK了。
    image 

其实Behavior的功能远比我谈到的这些要强大,只是这里结合Blend 3的基本操作界面而谈,所以不讨论那些理论性的东西,想深入研究的请关注Blend 3 SDK 官方手册。
还有一点要注意,Behavior的所有功能组件都在System.windows.Interactivity.DLL中,而这个只是Blend 3 SDK 中自带的,并不包含在Silverlight 3.0 中,只因为我们的项目是用Blend开发的,所以IDE会自动添加引用,如果用Visual Studio 中开发还需要手动导入.

真的很佩服Blend 3 的设计者创造了这么强大的IDE, 其实往往我们评论一些软件工具的时候,我们了解的只是冰山一角。

 

作者 :双宇

本文系原创文章,转载请注明出处,谢谢!
目录
相关文章
|
C#
WPF Interaction框架简介(一)——Behavior
原文:WPF Interaction框架简介(一)——Behavior 在WPF 4.0中,引入了一个比较实用的库——Interactions,这个库主要是通过附加属性来对UI控件注入一些新的功能,除了内置了一系列比较好用的功能外,还提供了比较良好的扩展接口。
2266 0
|
算法 C#
【HLSL学习笔记】WPF Shader Effect Library算法解读之[Embossed]
原文:【HLSL学习笔记】WPF Shader Effect Library算法解读之[Embossed] Embossed(浮雕效果)          浮雕效果主要有两个参数:Amount和Width。
1402 0
|
算法 程序员 C#
【HLSL学习笔记】WPF Shader Effect Library算法解读之[BandedSwirl]
原文:【HLSL学习笔记】WPF Shader Effect Library算法解读之[BandedSwirl] 因工作原因,需要在Silverlight中使用Pixel Shader技术,这对于我来说可算是相当有难度了,首先我是个Java Web开发程序员,从来没正经地学过微软的开发语言和工具;其次,对于算法这种东西,向来有种天生的排斥,一看便头疼。
1782 0
|
算法 C#
【HLSL学习笔记】WPF Shader Effect Library算法解读之[DirectionalBlur]
原文:【HLSL学习笔记】WPF Shader Effect Library算法解读之[DirectionalBlur] 方位模糊是一个按照指定角度循环位移并叠加纹理,最后平均颜色值并输出的一种特效。
810 0
UWP:使用Behavior实现FlipView简单缩放效果
原文:UWP:使用Behavior实现FlipView简单缩放效果 先上效果图 首先安装Behavior SDK:在Nuget中搜索安装 Microsoft.Xaml.Behaviors.Uwp.Managed 。
1083 0
Expression Blend学习四控件
原文:Expression Blend学习四控件 Expression Blend制作自定义按钮 1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点击此按钮,选择Edit control parts(template)>Edit a copy.
714 0
Expression Blend学习5控件
原文:Expression Blend学习5控件 Expression Blend ButtonStyle- TextButton 本章以TextButton为例,讲解如何最简单,最快速的制作一个专业的TextButton。
844 0
|
C# 内存技术
Expression Blend学习动画基础
原文:Expression Blend学习动画基础 什么是动画(Animation)? 动画就是时间+换面的组合,画面跟着时间变化。最常见的是flash的动画,还有GIF动态图片。 动画的主要元素 时间线(Timeline):定义了值随着时间的变化方式。
689 0
|
Go C#
Motion Paths in WPF 4 using Expression Blend 4
原文 Motion Paths in WPF 4 using Expression Blend 4 Posted by: Pravinkumar Dabade , on 3/19/2011, in Category WPF  Views: 65576  Abstract: I...
1183 0
|
JavaScript C#
零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页
原文:零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页 本章将教大家如何把制作好的Blend专案变为可以让任何人在网际网路...
1303 0