【WPF學習】第三十八章行為-有解無憂

　　樣式提供了重用一組屬性設定的實用方法，它們為幫助構建一致的、組織良好的界面邁出了重要的第一步——但是它們也是有許多限制，

　　問題是在典型的應用程式中，屬性設定僅是用戶界面基礎結構的一小部分，甚至最基本的程式通常也需要大量的用戶界面代碼，這些代碼與應用程式的功能無關，在許多程式中，用于用戶界面任務的代碼（如驅動影片、實作平滑效果、維護用戶界面狀態，以及支持諸如拖放、縮放以及停靠等用戶界面特性）無論是在數量山還是復雜性上都超出了業務代碼，許多這類代碼是通用的，這意味著在創建的每個WPF物件中需要撰寫相同的內容，所有這些作業幾乎都單調乏味的，

　　為回應這一挑戰，Expression Blend創作者開發了稱為行為(behavior)的特征，其思想很簡單：創建封裝了一些通用用戶界面功能的行為，這一功能可以是基本功能（如啟動故事板或導航到超鏈接），也可以是復雜功能（如處理多點觸摸互動，或構建使用實時物理引擎的碰撞模型），一旦構建功能，就可將它們添加到任意應用程式的另一個控制元件中，具體方法是將該控制元件鏈接到適當的行為并設定行為的屬性，在Expression Blend中，只通過拖放操作就可以使用行為，

一、獲取行為支持

　　重用用戶界面的代碼通用塊得基礎結構不是WPF的一部分，反而，它被捆綁到Expression Blend，這是因為行為開始時作為Expression Blend的設計時特性引入的，但這并不意味著行為只能用于Expression Blend，只需要付出很少的努就可以在Visual Studio應用程式中的創建和使用行為，只需要手動縮寫標記，而不是使用工具箱，

　　為了獲得支持行為的程式集，有兩種選擇：

　　可按照Expression Blend 3、Expression Blend 4 或Visual Studio 2012以上版本，所有這些版本都包含Visual Studio中的行為功能所需的程式集，
　　可安裝Expression Blend SDK，

　　無論是使用Expression Blend的哪個版本，都可以在檔案夾中看到所需的兩個相同的重要程式集：

　　System.Windows.Interactivity.dll，這個程式集定義了支持行為的基本類，它是行為特征的基礎，
　　Microsoft.Expression.Interactions.dll，這個程式集通過添加可選的以核心行為類為基礎的動作和觸發器類，增加了一些有用的擴展，

二、理解行為模型

　　行為特性具有兩個版本：一個版本是旨在Silverlight添加行為支持，Silverlight是Microsoft的針對瀏覽器的富客戶端插件；而另一個版本是針對WPF設計的，盡管這兩個版本提供了相同的特性，但行為特性和Silverlight領域更吻合，因為它彌補了更大的鴻溝，與WPF不同，Silverlight不支持觸發器，所以實作行為的程式集也實作觸發器更合理，然而，WPF支持觸發器，行為特性包含自己的觸發器系統，而觸發器系統與WPF模型不匹配，這確實令人感到有些困惑，

　　問題在于具有類似名稱的這兩個特性有部分重合但不完全相同，在WPF中，觸發器最重要的角色是構建靈活的樣式和控制元件模板，在觸發器的幫助下，樣式和模板變得更加智能；例如，當一些熟悉發生變化時可應用可視化效果，然而，Expression Blend中的觸發器系統具有不同的目的，通過使用可視化設計工具，允許為應用程式添加簡單功能，換句話說，WPF觸發器支持更加強大的樣式和控制元件模板，而Expression Blend觸發器支持快速的不需要代碼的應用程式設計，

　　那么，對于使用WPF的普遍開發人員來說所有這些意味著什么呢？下面是幾條指導原則：

　　行為模型不是WPF的核心部分，所以行為不像樣式和模板那樣確定，換句話說，可撰寫不使用行為的WPF應用程式，但如果不使用樣式和模板，就不能創建比“Hello World”演示更復雜的WPF應用程式，
　　如果在Expression Blend上耗費大量時間，或希望為其他Expression Blend用戶開發組件，可能會對Expression Blend中的觸發器特性感興趣，盡管和WPF中的觸發器系統使用相同的名稱，但它們不能相互重疊，可以同時使用這兩者，
　　如果不使用Expression Blend，可完全略過觸發器特性——但仍應分析Expression Blend提供的功能完整的行為類，這是因為行為比Expression Blend的觸發器更強大也更常用，最終，將準備查找那些提供了可在自己的應用程式中使用的整潔美觀行為的第三方組件，

三、創建行為

　　行為旨在封裝一些UI功能，從而可以不比撰寫代碼就能夠將其應用到元素上，從另一個角度看，每個行為都為元素提供了一個服務，該服務通常涉及監聽幾個不同的事件并執行幾個相關的操作，

　　為更好地理解行為，最好自己創建一個行為，設想希望為任意元素提供使用滑鼠在Canvas面板上拖動元素的功能，對于單個元素實作該功能的基本步驟是非常簡單的——代碼監聽滑鼠事件并修改設定相應Canvas坐標的附加屬性，但通過付出更多一點的努力，可將該代碼轉換為可重用的行為，該行為可為Canvas面板上的所有元素提供拖動支持，

　　在繼續之前，創建一個WPF類別庫程式集，在該程式集中，添加System.Windows.Interactivity.dll程式集的參考，然后，創建一個繼承自Behavior基類的類，Behavior是通用類，該類使用一個型別引數，可使用該型別引數將行為限制到特定的元素，或使用UIElement或FrameworkElement將它們都包含進來，如下所示：

public class DragInCanvasBehavior : Behavior<UIElement>
    {  }

　　在任何行為中，第一步要覆寫OnAttached()和OnDetaching()方法，當呼叫OnAttached()方法時，可通過AssociatedObject屬性訪問放置行為的元素，并可關聯事件處理程式，當呼叫OnDetaching()方法時，移除事件處理程式，

　　下面是DragInCanvasBehavior類用于監視MouseLeftButtonDown、MouseMove以及MouseLeftButtonUp事件代碼：

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

            // Hook up event handlers.            
            this.AssociatedObject.MouseLeftButtonDown += AssociatedObject_MouseLeftButtonDown;
            this.AssociatedObject.MouseMove += AssociatedObject_MouseMove;
            this.AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;
        }

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

            // Detach event handlers.
            this.AssociatedObject.MouseLeftButtonDown -= AssociatedObject_MouseLeftButtonDown;
            this.AssociatedObject.MouseMove -= AssociatedObject_MouseMove;
            this.AssociatedObject.MouseLeftButtonUp -= AssociatedObject_MouseLeftButtonUp;
        }

　　最后一步是在事件處理程式中運行適當的代碼，例如，當用戶單擊滑鼠左鍵時，DragInCanvasBehavior開始拖動操作、記錄元素左上角與滑鼠指標之間的偏移并捕獲滑鼠：

private Canvas canvas;
// Keep track of when the element is being dragged.
        private bool isDragging = false;

        // When the element is clicked, record the exact position
        // where the click is made.
        private Point mouseOffset;

        private void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            // Find the canvas.
            if (canvas == null) canvas = VisualTreeHelper.GetParent(this.AssociatedObject) as Canvas;

            // Dragging mode begins.
            isDragging = true;

            // Get the position of the click relative to the element
            // (so the top-left corner of the element is (0,0).
            mouseOffset = e.GetPosition(AssociatedObject);

            // Capture the mouse. This way you'll keep receiveing
            // the MouseMove event even if the user jerks the mouse
            // off the element.
            AssociatedObject.CaptureMouse();
        }

　　當元素處于拖動模式并移動滑鼠時，重新定位元素：

private void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                // Get the position of the element relative to the Canvas.
                Point point = e.GetPosition(canvas);

                // Move the element.
                AssociatedObject.SetValue(Canvas.TopProperty, point.Y - mouseOffset.Y);
                AssociatedObject.SetValue(Canvas.LeftProperty, point.X - mouseOffset.X);
            }
        }

　　當釋放滑鼠鍵時，結束拖動：

private void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (isDragging)
            {
                AssociatedObject.ReleaseMouseCapture();
                isDragging = false;
            }
        }

　　DragInCanvasBehavior類的完整代碼如下所示：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Interactivity;
using System.Windows.Media;

namespace CustomBehaviorsLibrary
{
    public class DragInCanvasBehavior : Behavior<UIElement>
    {
        private Canvas canvas;

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

            // Hook up event handlers.            
            this.AssociatedObject.MouseLeftButtonDown += AssociatedObject_MouseLeftButtonDown;
            this.AssociatedObject.MouseMove += AssociatedObject_MouseMove;
            this.AssociatedObject.MouseLeftButtonUp += AssociatedObject_MouseLeftButtonUp;
        }

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

            // Detach event handlers.
            this.AssociatedObject.MouseLeftButtonDown -= AssociatedObject_MouseLeftButtonDown;
            this.AssociatedObject.MouseMove -= AssociatedObject_MouseMove;
            this.AssociatedObject.MouseLeftButtonUp -= AssociatedObject_MouseLeftButtonUp;
        }

        // Keep track of when the element is being dragged.
        private bool isDragging = false;

        // When the element is clicked, record the exact position
        // where the click is made.
        private Point mouseOffset;

        private void AssociatedObject_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            // Find the canvas.
            if (canvas == null) canvas = VisualTreeHelper.GetParent(this.AssociatedObject) as Canvas;

            // Dragging mode begins.
            isDragging = true;

            // Get the position of the click relative to the element
            // (so the top-left corner of the element is (0,0).
            mouseOffset = e.GetPosition(AssociatedObject);

            // Capture the mouse. This way you'll keep receiveing
            // the MouseMove event even if the user jerks the mouse
            // off the element.
            AssociatedObject.CaptureMouse();
        }

        private void AssociatedObject_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                // Get the position of the element relative to the Canvas.
                Point point = e.GetPosition(canvas);

                // Move the element.
                AssociatedObject.SetValue(Canvas.TopProperty, point.Y - mouseOffset.Y);
                AssociatedObject.SetValue(Canvas.LeftProperty, point.X - mouseOffset.X);
            }
        }

        private void AssociatedObject_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (isDragging)
            {
                AssociatedObject.ReleaseMouseCapture();
                isDragging = false;
            }
        }
    }
}

DragInCanvasBehavior

四、使用行為

　　為測驗行為，創建一個新的WPF應用程式專案，然后添加對定義DragInCanvasBehavior類的類別庫以及System.Windows.Interactivity.dll程式集得應用，接下來在XML中映射這兩個標記名稱，假定存盤DragInCanvasBehavior類的類別庫名為CustomBehaviorsLibrary，所需的標記如下所示：

<Window x:Class="BehaviorTest.DragInCanvasTest"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:custom="clr-namespace:CustomBehaviorsLibrary;assembly=CustomBehaviorsLibrary"
        Title="DragInCanvasTest" Height="300" Width="300">

　　為使用該行為，只需要使用Interaction.Behaviors附加屬性在Canvas面板中添加任意元素，下面的標記創建一個具有三個圖形的Canvas面板，兩個Ellipse元素使用了DragInCanvasBehavior，并能在Canvas面板中拖動，Rectangle元素沒有使用DraginCanvasBehavior，因此無法移動，

<Canvas>
        <Rectangle Canvas.Left="10" Canvas.Top="10" Fill="Yellow" Width="40" Height="60"></Rectangle>
        <Ellipse Canvas.Left="10" Canvas.Top="70" Fill="Blue" Width="80" Height="60">
            <i:Interaction.Behaviors>
                <custom:DragInCanvasBehavior></custom:DragInCanvasBehavior>
            </i:Interaction.Behaviors>
        </Ellipse>
        <Ellipse Canvas.Left="80" Canvas.Top="70" Fill="OrangeRed" Width="40" Height="70">
            <i:Interaction.Behaviors>
                <custom:DragInCanvasBehavior></custom:DragInCanvasBehavior>
            </i:Interaction.Behaviors>
        </Ellipse>
    </Canvas>

　　下圖顯示了該例的運行效果，

DragInCanvasTest完整代碼：

<Window x:Class="BehaviorTest.DragInCanvasTest"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:custom="clr-namespace:CustomBehaviorsLibrary;assembly=CustomBehaviorsLibrary"
        Title="DragInCanvasTest" Height="300" Width="300">
    <Canvas>
        <Rectangle Canvas.Left="10" Canvas.Top="10" Fill="Yellow" Width="40" Height="60"></Rectangle>
        <Ellipse Canvas.Left="10" Canvas.Top="70" Fill="Blue" Width="80" Height="60">
            <i:Interaction.Behaviors>
                <custom:DragInCanvasBehavior></custom:DragInCanvasBehavior>
            </i:Interaction.Behaviors>
        </Ellipse>
        <Ellipse Canvas.Left="80" Canvas.Top="70" Fill="OrangeRed" Width="40" Height="70">
            <i:Interaction.Behaviors>
                <custom:DragInCanvasBehavior></custom:DragInCanvasBehavior>
            </i:Interaction.Behaviors>
        </Ellipse>
    </Canvas>
</Window>

DragInCanvasTest

　　但這并非是全部內容，如果正在使用Expression Blend進行開發，行為甚至提供了更好的設計體驗——可以根本不用撰寫任何標記，

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/5941.html

標籤：WPF

上一篇：【WPF學習】第三十六章樣式基礎

下一篇：XAML 字符轉義

【WPF學習】第三十八章 行為

【WPF學習】第三十八章行為