Silverlight和WPF的行为与触发器 - 理解、探索和开发交互性（使用C#、Visual Studio和Blend）
4.82/5 (23投票s)
一份关于理解、探索和开发Silverlight和WPF行为与触发器的优质入门指南 - 使用C#、Visual Studio和Blend
引言
本文系列的目的是快速概述Silverlight和WPF中的行为（Behaviors）、触发器（Triggers）和动作（Actions）。它们共同为UI提供了大量的设计时交互性。它们还使得交互逻辑的重用和重新分发成为可能。
注意：在本帖中，我们将稍微玩一下Microsoft Expression Blend 4.0 Beta版，以帮助我们进一步理解这些概念。所以，如果你没有Blend 4.0 Beta版，
- 在此处下载并安装Blend 4.0 Beta版，它是免费试用版。
行为
行为（Behaviors） – 初探
行为是您附加到某个元素上的东西，它会改变该元素应如何呈现自身，或者该元素应如何响应用户交互。首先，让我们向一个对象添加一个现有的行为，看看行为是如何工作的。稍后我们将创建一个自定义行为，并可能在Blend中使用它。
步骤 1。 让我们从一个简单的Silverlight应用程序开始。启动Expression Blend 4.0 Beta版，然后点击“文件”->“新建”，选择一个Silverlight 4.0应用程序，然后点击“确定”。
步骤 2。 项目创建完成后，只需将一个矩形添加到您的MainPage.xaml画布上，并使用颜色选择器为其设置一个漂亮的背景色（我用了蓝色:))。同时，此时，点击视图->活动文档视图->拆分视图 – 这样您就可以在查看设计器的同时查看XAML。如果您愿意，也可以按F5运行项目，并确保您目前无法拖动矩形；）。
步骤 3。 现在，我们的目标是为矩形附加一个拖动行为，以便用户可以在屏幕上拖动它。为此，我们将MouseDragElementBehaviour附加到我们的矩形上。要做到这一点，请在Blend中的Assets选项卡（参见下方箭头）中，点击Behaviors标签。现在，从Assets选项卡的右侧窗格中，将MouseDragElementBehaviour拖放到您的矩形上。按F5运行项目，您会看到您可以随意拖动您的元素。
步骤 4。 让我们在此退后一步，看看XAML。您会看到MouseDragElementBehaviour已被添加到我们这个简单的矩形的Behaviors附加属性中。
幕后
System.Windows.Interactivity基础设施（最初在Blend 3中引入）简化了行为、触发器和动作的创建。
xmlns:i="clr-namespace:System.Windows.Interactivity;
assembly=System.Windows.Interactivity"
xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;
assembly=Microsoft.Expression.Interactions"
System.Windows.Interactivity命名空间有多个类可供继承，用于创建您自己的行为、触发器和动作。WPF和Silverlight版本位于C:\Program Files\Microsoft SDKs\Expression\YourBlendVersion\Interactivity\Libraries。在同一个文件夹中，您还会找到Microsoft.ExpressionBlend.Interactions.dll，它包含了各种具体的行为和触发器，例如我们刚才应用的MouseDragElementBehaviour。
如果您使用Reflector查看MouseDragElementBehavior，您会发现MouseDragElementBehaviour继承自System.Windows.Interactivity中的Behaviour<T> abstract类。
创建您自己的行为（Behaviors）
那么，让我们创建一个自定义行为。
步骤 1 – 创建一个行为。 在Blend中，右键单击“项目”窗格中的项目，然后点击“添加新项”，以打开“新建项”对话框。从中选择“行为”，给它一个好名字，然后点击“确定”。
步骤 2 – 看看里面有什么。 查看已添加到您项目的新行为类。您会发现我们的Behavior类继承自System.Windows.Interactivity中的Behavior<T>，正如我们之前讨论过的。另外，看看重写的方法OnAttached和OnDetaching（以及它们下面的注释）。
步骤 3 – 添加一些实质内容。 那么，我们应该在行为中做什么呢？当鼠标悬停在应用了此行为的对象上时，让我们稍微倾斜一下该对象。只需修改OnAttached，使其包含以下代码。行为的AssociatedObject属性将提供应用此行为的当前对象上下文。让我们挂钩MouseEnter和MouseLeave事件，这样当鼠标悬停在对象上时，我们将应用一个简单的投影到对象，并在鼠标离开对象时重置投影。
步骤 4 – 重新构建。 现在，在Expression Blend菜单中点击“项目”->“构建项目”。然后再次进入Assets窗口，点击Behaviors，查看“MyBehavior”。只需将该行为拖放到您的对象上。可以看到，新的行为也被添加到了XAML中的Rectangle中。
步骤 5 – 运行。 您已经完成了。按F5运行您的项目，并观察当您将鼠标移到矩形上来开始拖动时，矩形会稍微倾斜。
触发器（Triggers）和动作（Actions） – 初探
当触发器被触发时，它可以调用一组动作。例如，您可以在EventTrigger中嵌套几个动作（如PropertyChangeAction来更改元素的属性），以便在发生特定事件时执行这些动作。您可以向一个元素附加多个触发器。
如果您有WPF背景，您可能会很快想起DataTriggers、MultiDataTriggers等。
有各种“开箱即用”的触发器和动作，它们位于System.Windows.Interactivity和Microsoft.Expression.Interactions中。
- 触发器 - EventTrigger、TimerTrigger、StoryBoardCompletedTrigger、KeyTrigger 等。
- 动作 - ChangePropertyAction、ControlStoryBoardAction、PlaySoundAction 等。
让我们开始玩一些现有的触发器和动作。
1. 准备场景 - 如上所述，在Blend中创建一个新的Silverlight应用程序项目。默认情况下，您将看到MainPage.xaml的设计界面。这次，从Blend工具栏中选择“椭圆”工具，在设计界面上绘制一个球。也给它一个漂亮的颜色:)
另外，此时，点击视图->活动文档视图->拆分视图 – 这样您就可以在查看设计器的同时查看XAML。
2. 向对象附加触发器和动作 - 转到Blend中的Assets窗格，然后点击Behaviors链接。将ChangePropertyAction拖到您添加的椭圆上，并查看XAML。您会发现Blend已自动为您添加了一个EventTrigger，并将MouseLeftButtonDown作为默认事件，并将您的ChangePropertyAction“夹”在其中。
在XAML编辑器或“对象和时间线”窗口中选择ChangePropertyAction。查看Blend中的属性窗口，以查看触发器和动作的属性（参见下图）。默认情况下，触发器将针对我们球体的MouseLeftButtonDown事件触发。另外，您可能会注意到，目前我们还没有为ChangePropertyAction指定任何参数。
3. 修改ChangePropertyAction
现在，当发生MouseLeftButtonDown时，让我们通过更改椭圆的Width属性来稍微挤压我们的椭圆。为此，请转到属性窗口，然后
- 将我们
ChangePropertyAction的‘PropertyName’参数更改为‘Width’。 - 将值设置为
200，这样当Action被调用时，Width将增加到200。 - 在
ChangePropertyAction的动画属性中，将持续时间设置为4秒，并将Ease属性更改为Elastic Out。
我们完成了。按F5运行应用程序，然后单击椭圆。您将看到一些有趣的动画。您将看到一些有趣的动画。
请尝试一下，以了解触发器和动作如何协同工作。回来后，向下滚动以阅读更多内容 – 关于创建我们自己的触发器和动作。
创建自定义触发器（Custom Trigger）
是时候深入研究了。然后，我们将用我们正在创建的自定义触发器替换我们上面示例中使用的‘EventTrigger’，以拉伸球体！！。
首先，让我们创建一个最小化的自定义触发器 – 命名为KeyDownTrigger，它将在每次按下按键时触发。让我们继续我们上面项目的进度。
步骤 1 – 创建一个触发器： 在Blend中，右键单击“项目”窗格中的项目，然后点击“添加新项”，以打开“新建项”对话框。从中选择“触发器”，命名为‘KeyDownTrigger’，然后点击“确定”。
步骤 2 – 添加一些实质内容。 查看已添加到您项目的新触发器类。您会发现我们的Trigger类继承自System.Windows.Interactivity中的TriggerBase<T>。另外，看看重写的方法OnAttached和OnDetaching（以及它们下面的注释）。让我们为那里已有的代码添加一些实质内容。将代码修改为这样。
提示：如果您安装了Visual Studio 2010 Beta版，您可以随时在Blend 4.0项目浏览器中右键单击一个文件，然后选择“在Visual Studio中编辑”，如果您更喜欢在VS中编写代码而不是在Blend中。
public class KeyDownTrigger : TriggerBase<FrameworkElement>
{
protected override void OnAttached()
{
base.OnAttached();
// Insert code that you want to run when the Trigger is attached to an object.
this.AssociatedObject.Loaded += (sender, args) =>
{
Application.Current.RootVisual.KeyDown +=
new KeyEventHandler(Visual_KeyDown);
};
}
protected override void OnDetaching()
{
base.OnDetaching();
// Insert code that you would want run when the Trigger
//is removed from an object.
Application.Current.RootVisual.KeyDown -=
new KeyEventHandler(Visual_KeyDown);
}
//A property for the trigger so that users can specify keys
//as comma separated values
public string Keys { get; set; }
//Invoke the actions in this trigger, if a key is in the list
void Visual_KeyDown(object sender, KeyEventArgs args)
{
var key = Enum.GetName(typeof(Key), args.Key);
if (Keys.Split(',').Contains(key))
InvokeActions(key);
}
}
代码本身就说明了问题，但这里是我们基本所做的：当关联对象加载时，我们挂钩到根可视化元素的KeyDown事件。当KeyDown被触发时，如果用户输入了按键，我们就会调用此触发器内的动作。
步骤 3 – 将KeyDownTrigger关联到我们的球体
在Blend中，点击Project->Build Project菜单。现在，回到您有球体的MainPage.xaml。和我们之前一样，在XAML编辑器或“对象和时间线”窗口中选择ChangePropertyAction，以调出属性窗口 - 和我们之前一样。在属性窗口中，在触发器窗格的TriggerType旁点击“新建”按钮（参见图片）。在出现的对话框中，选择我们最近添加的‘KeyDownTrigger’，然后点击“确定”。
现在，您会看到我们之前存在的‘EventTrigger’已被‘KeyDownTrigger’替换。请注意，我们添加到Trigger类中的‘Keys’属性可在Blend UI中看到 - 这样使用我们触发器的用户就可以在那里输入值来指定哪些按键应该触发触发器内的动作。只需在Keys字段中输入几个按键名称（例如A、B、C），不带空格。
步骤 4 – 成功
太棒了，我们完成了。按F5运行您的项目。单击表面以获得焦点，然后按下A、B或C来查看球体被拉伸。太棒了！！我们刚刚创建并实现了一个最小化的触发器。
现在，有了这些见解，我建议您查看我的WPF Experimental Hacks和Silverlight Experimental Hacks中的触发器和动作。阅读...
还有，请保持联系。我会在Twitter上发布，@amazedsaint 或者订阅我的博客
祝您编码愉快！！
历史
- 2010年2月9日：初次发布