WPF點滴（3） 行為-Behavior

TigerLu發表於2018-05-14

為了定製個性化的使用者介面，我們通常會藉助於WPF強大的樣式（style），修改控制元件屬性，重寫控制元件模板（template），樣式幫助我們構建一致的個性化控制元件。通過樣式可以調整介面的顯示效果，這只是介面構成的一部分，介面有很多功能是與程式功能無關的，比如停靠、拖動、縮放等，這些通用的功能要如何實現呢，所有用到的地方都單獨實現肯定是不現實的，行為（behavior）這時就可以大展拳腳了。

什麼是行為，行為是為控制元件封裝好的功能。你可以為Image控制元件封裝縮放行為，或者為所有控制元件（UIElement）封裝拖動行為，後面有例子。

行為（Behavior）不是基礎WPF的一部分，他是作為Expression Blend的設計特性而引入的，因此使用Behavior時需要手動新增reference，C:Program Files (x86)Microsoft SDKsExpressionBlend.NETFrameworkv4.5LibrariesSystem.Windows.Interactivity.dll，安裝完visual studio就會有這個檔案啦。

現在開始封裝一個行為，實現控制元件在Canvas皮膚上的拖拽。Behavior是一個模板類，封裝控制元件的行為只需要繼承Behavior<T>就可以了，T為控制元件的型別，這裡要為所有控制元件封裝拖拽行為，因此使用了UIElement。

需要過載 OnAttached和OnDetaching方法，其中AssociatedObject指的是封裝了該行為的控制元件。

using System.Windows.Interactivity;

public class DragInCanvsBehavior : Behavior<UIElement>
    {
        private Canvas m_Canvas;
        private bool m_IsDraging;
        private Point m_PositionOffset;

        protected override void OnAttached()
        {
            base.OnAttached();

            AssociatedObject.MouseLeftButtonDown += AssociatedObjectOnMouseLeftButtonDown;
            AssociatedObject.MouseMove += AssociatedObjectOnMouseMove;
            AssociatedObject.MouseLeftButtonUp += AssociatedObjectOnMouseLeftButtonUp;
        }

        private void AssociatedObjectOnMouseLeftButtonDown(object sender, MouseButtonEventArgs mouseButtonEventArgs)
        {
            if (m_Canvas == null)
                m_Canvas = (Canvas)VisualTreeHelper.GetParent(AssociatedObject);

            m_IsDraging = true;

            m_PositionOffset = mouseButtonEventArgs.GetPosition(AssociatedObject);
            AssociatedObject.CaptureMouse();
        }

        private void AssociatedObjectOnMouseMove(object sender, MouseEventArgs mouseEventArgs)
        {
            if(!m_IsDraging)
                return;

            Point mouseposition = mouseEventArgs.GetPosition(m_Canvas);
            AssociatedObject.SetValue(Canvas.LeftProperty, mouseposition.X - m_PositionOffset.X);
            AssociatedObject.SetValue(Canvas.TopProperty, mouseposition.Y - m_PositionOffset.Y);
        }

        private void AssociatedObjectOnMouseLeftButtonUp(object sender, MouseButtonEventArgs mouseButtonEventArgs)
        {
            if (!m_IsDraging)
                return;

            m_IsDraging = false;
            AssociatedObject.ReleaseMouseCapture();
        }

        protected override void OnDetaching()
        {
            base.OnDetaching();
            AssociatedObject.MouseLeftButtonDown -= AssociatedObjectOnMouseLeftButtonDown;
            AssociatedObject.MouseMove -= AssociatedObjectOnMouseMove;
            AssociatedObject.MouseLeftButtonUp -= AssociatedObjectOnMouseLeftButtonUp;
        }
    }

使用Behavior的方法如下，這時就會得到一個可以拖動的矩形了。

<Window x:Class="BehaviorDemo.MainWindow"
        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:local="clr-namespace:BehaviorDemo"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas>
        <Rectangle Height="40" Width="80" Canvas.Left="100" Canvas.Top="50" Fill="Aqua">
            <i:Interaction.Behaviors>
                <local:DragInCanvsBehavior/>
            </i:Interaction.Behaviors>
        </Rectangle>

        <Ellipse Height="40" Width="80" Fill="AntiqueWhite"/>
    </Canvas>
</Window>

在i:Interaction下面除了Behavior之外，還可以定義Triggers，但是這個觸發器和樣式（style）中的觸發器（Trigger）可不是同一個東西，這個觸發器是為Silverlight準備的，因為silverlight不支援樣式觸發器，因此如果使用WPF，就不用關注這部分了。

相關文章