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

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

  問題是在典型的應用程序中,屬性設置僅是用戶界面基礎結構的一小部分。甚至最基本的程序一般也須要大量的用戶界面代碼,這些代碼與應用程序的功能無關。在許多程序中,用於用戶界面任務的代碼(如驅動動畫、實現平滑效果、維護用戶界面狀態,以及支持諸如拖放、縮放以及停靠等用戶界面特性)不管是在數量山仍是複雜性上都超出了業務代碼。許多這類代碼是通用的,這意味着在建立的每一個WPF對象中須要編寫相同的內容。全部這些工做幾乎都單調乏味的。瀏覽器

  爲迴應這一挑戰,Expression Blend創做者開發了稱爲行爲(behavior)的特徵。其思想很簡單:建立封裝了一些通用用戶界面功能的行爲。這一功能能夠是基本功能(如啓動故事板或導航到超連接),也能夠是複雜功能(如處理多點觸摸交互,或構建使用實時物理引擎的碰撞模型)。一旦構建功能,就可將它們添加到任意應用程序的另外一個控件中,具體方法是將該控件連接到適當的行爲並設置行爲的屬性。在Expression Blend中,只經過拖放操做就可使用行爲。ide

1、獲取行爲支持工具

  重用用戶界面的代碼通用塊得基礎結構不是WPF的一部分。反而,它被捆綁到Expression Blend。這是由於行爲開始時做爲Expression Blend的設計時特性引入的。但這並不意味着行爲只能用於Expression Blend。只須要付出不多的努就能夠在Visual Studio應用程序中的建立和使用行爲。只須要手動縮寫標記,而不是使用工具箱。測試

  爲了得到支持行爲的程序集,有兩種選擇:動畫

  •   可按照Expression Blend 三、Expression Blend 4 或Visual Studio 2012以上版本。全部這些版本都包含Visual Studio中的行爲功能所需的程序集。
  •   可安裝Expression Blend SDK。

  不管是使用Expression Blend的哪一個版本,均可以在文件夾中看到所需的兩個相同的重要程序集:this

  •   System.Windows.Interactivity.dll。這個程序集定義了支持行爲的基本類。它是行爲特徵的基礎。
  •   Microsoft.Expression.Interactions.dll。這個程序集經過添加可選的以核心行爲類爲基礎的動做和觸發器類,增長了一些有用的擴展。

2、理解行爲模型spa

  行爲特性具備兩個版本:一個版本是旨在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的觸發器更強大也更經常使用。最終,將準備查找那些提供了可在本身的應用程序中使用的整潔美觀行爲的第三方組件。

3、建立行爲

  行爲旨在封裝一些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

4、使用行爲

  爲測試行爲,建立一個新的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進行開發,行爲甚至提供了更好的設計體驗——能夠根本不用編寫任何標記。

相關文章
相關標籤/搜索