chapter6 Interactivity

首先，Action和Behavior是开发人员写好逻辑供设计人员使用的，避免了后台代码与前台页面的部分交互。

Action和Behavior，Blend内置了很多，打开Assets->Behaviors,如图所示，后缀为Action的为Action，后缀为Behavior的为Behavior。你可以点击Expression Gallery去寻找更多的第三方提供的Behaviors。

顾名思义，Action是个动作（如调用方法，改变属性，播放声音，播放动画等），Behavior是种行为（如MouseDragElementBehavior， Repositions an object when you drag it；FluidMoveBehavior， Animates changes to the layout properties of objects inside a panel；ClippingBehavior， Provides a rounded rectangular clipping that scales with the

Element；TransparencyBehavior， Makes an element semitransparent when the mouse moves

away from it）。

Action需要Trigger配合使用，Behavior则更独立，并在需要保留object的状态时尤其有用。

下面演示一个例子。

1. 打开Blend，新建一个工程，拖进去一个ToggleButton和一个Rectangle控件（填充红色）。

2. 然后找到ChangePropertyAction，鼠标拖动至ToggleButton松开，在右侧的Property面板设置Trigger的Source为刚刚拖进来的ToggleButton，事件选Checked。在CommonProperties的Target设为刚刚拖进来的Rectangle，Property选Visibility，Value选Collapsed。

3. 然后Copy这个Action（当然你可以在此改Action的名字），点击toggleButton，Ctrl+V，事件改为Unchecked，Value改为Visible

4. F5，运行，点击toggle看效果。

Ps：Blend生成的xaml奉上

Collapsed













Visible

 

再来看一个例子，这个是用来演示GoToStateAction的。

1. 首先，新建一个工程，给LayoutRoot的背景填充#FFE57E7E，拖一个Button控件上去。

2. 然后给Layout新建一个VisualStateGroup（一个组中状态最多同时应用一个），并新建两个VisualState，Normal和Insane，当你新建的时候会自动开始录制这个State的变换（甚至可以建Storyboard），点击上面的base会回到初始状态。在此，Normal状态即为初始状态，我什么都没做；Insane状态我改变了Background为#FF1B1919。

3. 然后点击Base，回到base状态。找到GoToStateAction,拖动至LayoutRoot上松开鼠标。SourceObject选刚刚拖进来的Button，事件选择MouseEnter，StateName选择Insane。

4. 复制这个Action，选中LayoutRoot，Ctrl+V。

5. 选中刚刚复制的Action，EventName改为MouseLeave，StateName改为Normal。F5，运行，鼠标放在Button上，并离开button，看效果（在此若用ToggleButton，可用按下事件实现两种状态的切换，是比较方便的，如上例）。

Ps：Blend生成的Xaml奉上：