这是我第三次探索Behavior，依然记得2年前第一次和Behavior打交道。

郑州，2013年初……

当时刚毕业不久，满腔热血的投入到WindowsPhone App 开发，一个毛头小子对什么都充满了好奇，对WindowsPhone的开发工具自然而然的也一一进行探索，其中Blend肯定是少不了去接触的。然而一次无意的探索让我第一次接触到Behavior。

当时对Behavior的概念几乎没有，百度一番过后得知是拖放到控件上就能产生一定的行为效果，于是就把Blend中提供的所有Behavior挨个拖放到控件中看看到底是起什么作用。具体的细节现在都忘记了，只记住了一个特别的Behavior，叫什么也忘记了，记得它的作用是能让控件支持随意拖动的行为，也就是可以用手指将一个小球(Ellipse控件)随意放置到屏幕任何位置。那时的我兴奋的好像自己实现了什么多牛逼的功能似的，其实然并卵而已，兴奋了几天后也就忘记了Behavior的存在。这就是我第一次和Behavior打交道，懵懂而又青涩……

第二次和Behavior打交道是因为MVVM框架，使用Blend 提供的Behavior能够很方便的使UI与VM逻辑结合起来，使得代码很清爽干净，但也仅仅局限于使用Blend中提供的Behavior，具体的Blend 中内置的Behavior使用方法请移步：Behavior的使用详解

最近在开发中，接触到了自定义Behavior，百度谷歌一番，无不发现每个开发者对Behavior的赞美。那么Behavior到底是什么？真的那么神奇？

简单点说就是，Behavior可以让某些功能行为附加到一个控件上，也就是说Behavior可以定义一组行为来循环使用或者提供给其他人使用。

那么自定义Behavior在UWP中到底怎么使用？下面我们就来利用自定义Behavior实现一个行为（Blend中自带的Behavior在这里不讨论）。

例子：自定义一个Behavior，实现元素鼠标经过时变大、离开时变小。

首先添加Behaviors SDK引用（忽略兼容性提示），实现自定义Behavior必须继承Behaviors SDK 中的DependencyObject 类并实现IBehavior接口。
***附件停止解析***


新建一个类，暂时起名叫做BtnGetFocusBehavior.cs ，继承DependencyObject 类并实现IBehavior接口
[mw_shl_code=csharp,true]public sealed class BtnGetFocusBehavior : DependencyObject, IBehavior
{
public void Attach(DependencyObject associatedObject)
{
throw new NotImplementedException();
}

public void Detach()
{
throw new NotImplementedException();
}

public DependencyObject AssociatedObject { get; }
}[/mw_shl_code]



代码中Attach方法就是当该Behavior被关联到某一元素时要执行的代码，参数为元素对象的引用

Detach方法是党Behavior与关联的元素分离时要执行的代码

AssociatedObject是获取与Behavior关联起来的元素对象



接下来我们需要在Attach方法中实现被关联元素所拥有的行为，代码很简单就不解释了
[mw_shl_code=csharp,true]public sealed class BtnGetFocusBehavior : DependencyObject, IBehavior
{
private DependencyObject _associatedObject;

private readonly Storyboard _focuStoryboard = new Storyboard();

private const double AnimFrom = 1;

private const double AnimTo = 1.5;

private readonly DoubleAnimation _scaleXAnim = new DoubleAnimation();

private readonly DoubleAnimation _scaleYAnim = new DoubleAnimation();

public void Attach(DependencyObject associatedObject)
{
//获取关联的对象
_associatedObject = associatedObject;
if (associatedObject == null) return;
var obj = _associatedObject as FrameworkElement;
if (obj == null) return;

var ct = new CompositeTransform();
//添加CompositeTransform缩放支持
obj.RenderTransform = ct;

//设置动画关联对象
Storyboard.SetTarget(_scaleXAnim, obj.RenderTransform);
Storyboard.SetTargetProperty(_scaleXAnim, nameof(CompositeTransform.ScaleX));

//设置动画关联对象
Storyboard.SetTarget(_scaleYAnim, obj.RenderTransform);
Storyboard.SetTargetProperty(_scaleYAnim, nameof(CompositeTransform.ScaleY));

//将动画添加到故事版
_focuStoryboard.Children.Add(_scaleYAnim);
_focuStoryboard.Children.Add(_scaleXAnim);

//关联事件
obj.PointerEntered += Obj_PointerEntered;
obj.PointerExited += Obj_PointerExited;
}

private void Obj_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
StartScaleStoryboard(AnimTo, AnimFrom);
}

private void Obj_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
StartScaleStoryboard(AnimFrom, AnimTo);
}

private void StartScaleStoryboard(double from, double to)
{
_scaleYAnim.From = _scaleXAnim.From = from;
_scaleYAnim.To = _scaleXAnim.To = to;
_scaleYAnim.EasingFunction = _scaleXAnim.EasingFunction = new ExponentialEase { Exponent = 4 };
_scaleYAnim.Duration = _scaleXAnim.Duration = new Duration(TimeSpan.FromSeconds(0.3));
_focuStoryboard.Begin();
}

public void Detach()
{
var obj = _associatedObject as FrameworkElement;
if (obj==null) return;
//解除事件
obj.PointerEntered -= Obj_PointerEntered;
obj.PointerExited -= Obj_PointerExited;
}

public DependencyObject AssociatedObject => _associatedObject;
}[/mw_shl_code]



实现了自定义Behavior后，来看看在UI上怎么使用。

首先引用Microsoft.Xaml.Interactivity命名空间，我们需要把我们的Behavior放入到Interaction.Behaviors里面，这样才能使Behavior关联到我们的元素中，如下：
[mw_shl_code=csharp,true]xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Ellipse Width="100" Height="100" Fill="#FF1E5FBD" RenderTransformOrigin="0.5,0.5" >
<Interactivity:Interaction.Behaviors>
<beh:BtnGetFocusBehavior />
</Interactivity:Interaction.Behaviors>
</Ellipse>
</Grid>[/mw_shl_code]


其实还有个更方便的使用我们自定义的Behavior的方法

我们打开Blend – "资产"面板 – "Behaviors行为"，看看里面有什么？
***附件停止解析***


对，有我们刚自定义的BtnGetFocusBehavior，在Blend中我们可以直接拖拽该Behavior到页面的任意元素上，界面代码Blend会自动帮我们实现，是不是很方便？

Ok，Demo很简单，但意义重大，起个抛砖引玉功能，更优秀的Behavior还需要大家花花心思好好设计一番。

来看下运行效果：
***附件停止解析***


本文出自：53078485群大咖Aran