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奉上

<UserControl

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

x:Class="Blend6_1.MainPage"

Width="640" Height="480">


<Grid x:Name="LayoutRoot" Background="White">

<ToggleButton x:Name="toggleButton" Content="ToggleButton" HorizontalAlignment="Left" Margin="72,172,0,0" VerticalAlignment="Top">

<i:Interaction.Triggers>

<i:EventTrigger EventName="Checked" SourceName="toggleButton" SourceObject="{Binding ElementName=toggleButton}">

<ei:ChangePropertyAction TargetName="rectangle" PropertyName="Visibility" TargetObject="{Binding ElementName=rectangle}">

<ei:ChangePropertyAction.Value>

<Visibility>Collapsed</Visibility>

</ei:ChangePropertyAction.Value>

</ei:ChangePropertyAction>

</i:EventTrigger>

<i:EventTrigger EventName="Unchecked" SourceName="toggleButton" SourceObject="{Binding ElementName=toggleButton}">

<ei:ChangePropertyAction TargetName="rectangle" PropertyName="Visibility" TargetObject="{Binding ElementName=rectangle}">

<ei:ChangePropertyAction.Value>

<Visibility>Visible</Visibility>

</ei:ChangePropertyAction.Value>

</ei:ChangePropertyAction>

</i:EventTrigger>

</i:Interaction.Triggers>

</ToggleButton>

<Rectangle x:Name="rectangle" Height="100" Margin="222,123,318,0" Stroke="Black" VerticalAlignment="Top">

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFE57E7E" Offset="0"/>

<GradientStop Color="#FFF32C2C" Offset="1"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Grid>

</UserControl>

 

再来看一个例子，这个是用来演示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奉上：

<UserControl

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" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" mc:Ignorable="d"

x:Class="Blend6_2.MainPage"

Width="640" Height="480">


<Grid x:Name="LayoutRoot" Background="#FFE57E7E">

<i:Interaction.Triggers>

<i:EventTrigger EventName="MouseEnter" SourceObject="{Binding ElementName=button}">

<ei:GoToStateAction StateName="Insane"/>

</i:EventTrigger>

<i:EventTrigger EventName="MouseLeave" SourceObject="{Binding ElementName=button}">

<ei:GoToStateAction StateName="Normal"/>

</i:EventTrigger>

</i:Interaction.Triggers>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="VisualStateGroup">

<VisualState x:Name="Normal"/>

<VisualState x:Name="Insane">

<Storyboard>

<ColorAnimation Duration="0" To="#FF1B1919" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Button x:Name="button" Content="Button" HorizontalAlignment="Right" Margin="0,114,204,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="3.213,1.818"/>

</Grid>

</UserControl>