2. 程式人生 > >【WPF學習】第三十八章 行為

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

阿新 • • 發佈：2020-02-12

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

　　問題是在典型的應用程式中，屬性設定僅是使用者介面基礎結構的一小部分。甚至最基本的程式通常也需要大量的使用者介面程式碼，這些程式碼與應用程式的功能無關。在許多程式中，用於使用者介面任務的程式碼（如驅動動畫、實現平滑效果、維護使用者介面狀態，以及支援諸如拖放、縮放以及停靠等使用者介面特性）無論是在數量山還是複雜性上都超出了業務程式碼。許多這類程式碼是通用的，這意味著在建立的每個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進行開發，行為甚至提供了更好的設計體驗——可以根本不用編寫任何標記。

 

相關推薦

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

　　樣式提供了重用一組屬性設定的實用方法。它們為幫助構建一致的、組織良好的介面邁出了重要的第一步——但是它們也是有許多限制。 　　問題是在典型的應用程式中，屬性設定僅是使用者介面基礎結構的一小部分。甚至最基本的程式通常也需要大量的使用者介面程式碼，這些程式碼與應用程式的功能無關。在許多

【WPF學習】第三十一章 WPF命令模型

　　WPF命令模型由許多可變的部分組成。總之，它們都具有如下4個重要元素： 　　命令：命令表示應用程式任務，並且跟蹤任務是否能夠被執行。然而，命令實際上不包含執行應用程式任務的程式碼。 　　命令繫結：每個命令繫結針對使用者介面的具體區域，將命令連線到相關的應用程式邏輯。這種分解的設計是非常重要的，因為單個命

【WPF學習】第三十二章 執行命令

　　前面章節已經對命令進行了深入分析，分析了基類和介面以及WPF提供的命令庫。但尚未例舉任何使用這些命令的例子。 　　如前所述，RoutedUICommand類沒有任何硬編碼的功能，而是隻表達命令，為觸發命令，需要有命令源（也可使用程式碼）。為響應命令，需要有命令繫結，命令繫結將執行轉發給普遍的事件處理程式。

【WPF學習】第三十四章 資源基礎

　　WPF允許在程式碼中以及在標記中的各個位置定義資源（和特定的控制元件、視窗一起定義，或在整個應用程式中定義）。 　　資源具有許多重要的優點，如下所述： 　　高效。可以通過資源定義物件，並在標記中的多個地方使用。這會精簡程式碼，使其更加高效。 　　可維護性。可通過資源使用低階的格式化細節（如字號），並將它

【WPF學習】第三十五章 資源字典

　　如果希望在多個專案之間共享資源，可建立資源字典。資源字典只是XAML文件，除了儲存希望使用的資源外，不做其他任何事情。 一、建立資源字典 　　下面是一個資源字典示例，它包含一個資源： <ResourceDictionary xmlns="http://schemas.microsoft.com/w

【WPF學習】第三十六章 樣式基礎

　　前面三章介紹了WPF資源系統，使用資源可在一個地方定義物件而在整個標記中重用他們。儘管可使用資源儲存各種物件，但使用資源最常見的原因之一是通過他們的儲存樣式。 　　樣式是可應用於元素的屬性值集合。WPF樣式系統與HTML標記中的層疊樣式表（Cascading Style Sheet,CSS)標準擔當類似的

【WPF學習】第三十九章 理解形狀

　　在WPF使用者介面中，繪製2D圖形內容的最簡單方法是使用形狀（shape）——專門用於表示簡單的直線、橢圓、矩形以及多變形的一些類。從技術角度看，形狀就是所謂的繪圖圖元(primitive)。可組合這些基本元素來建立更復雜的圖形。 　　關於WPF中形狀的重要細節是，它們都繼承自Fr

【WPF學習】第五十八章 理解邏輯樹和視覺化樹

　　在前面章節中，花費大量時間分析了視窗的內容模型——換句話說，研究瞭如何在其他元素中巢狀元素，進而構建完整的視窗。 　　例如，考慮下圖中顯示的一個非常簡單的視窗，該視窗包含兩個按鈕。為建立該按鈕，在視窗中嵌套了一個StackPanel控制元件。在StackPanel控制元件中，放置了

【WPF學習】第三十章 元素繫結——繫結到非元素物件

　　前面章節一直都在討論如何新增連結兩個各元素的繫結。但在資料驅動的應用程式中，更常見的情況是建立從不可見物件中提取資料的繫結表示式。唯一的要求是希望顯示的資訊必須儲存在公有屬性中。WPF資料繫結資料結構不能獲取私有資訊或公有欄位。 　　當繫結到非元素物件時，需要放棄Binding.ElementName屬性

【WPF學習】第四十一章 變換

　　通過使用變換(transform)，許多繪圖任務將更趨簡單；變換是通過不加通告地切換形狀或元素使用的座標系統來改變形狀或元素繪製方式的物件。在WPF中，變換由繼承自System.Windows.Media.Transform抽象類的類表示。下表列出了這些類。 表 變換類  　　從技術角度看，所

【WPF學習】第四十四章 圖畫

　　通過上一章的學習，Geometry抽象類表示形狀或路徑。Drawing抽象類扮演了互補的角色，它表示2D圖畫(Drawing)——換句話說，它包含了顯示向量影象或點陣圖需要的所有資訊。 　　儘管有幾類畫圖類，但只有GeometryDrawing類能使用已經學習過的幾何圖形。它增加了

【WPF學習】第四十五章 視覺化物件

　　前面幾章介紹了處理適量適中的圖形內容的最佳方法。通過使用幾何圖形、圖畫和路徑，可以降低2D圖形的開銷。即使正在使用複雜的具有分層效果的組合形狀和漸變畫刷，這種方法也仍然能夠正常得很好。 　　然而，這樣設計不適合需要渲染大量圖形元素的繪圖密集型應用程式。例如繪圖程式、演示粒子碰撞的物理模型程式或橫向卷軸形式

【WPF學習】第四十六章 效果

　　WPF提供了可應用於任何元素的視覺化效果。效果的目標是提供一種簡單的宣告式方法，從而改進文字、影象、按鈕以及其他控制元件的外觀。不是編寫自己的繪圖程式碼，而是使用某個繼承自Effect的類(位於System.Windows.Media.Effects名稱空間中)以立即獲得諸如模糊、輝光以及陰影等效果。 　

【WPF學習】第四十七章 WriteableBitmap類

　　WPF允許使用Image元素顯示點陣圖。然而，按這種方法顯示圖片的方法完全是單向的。應用程式使用現成的點陣圖，讀取問題，並在視窗中顯示點陣圖。就其本身而言，Image元素沒有提供建立和編輯點陣圖資訊的方法。 　　這正是WriteableBitmap類的用武之地。該類繼承自BitmapSource，Bitm

【WPF學習】第四十九章 基本動畫

　　在前一章已經學習過WPF動畫的第一條規則——每個動畫依賴於一個依賴項屬性。然而，還有另一個限制。為了實現屬性的動態化(換句話說，使用基於時間的方式改變屬性的值)，需要有支援相應資料型別的動畫類。例如，Button.Width屬性使用雙精度資料型別。為實現屬性的動態化，需要使用Dou

【WPF學習】第五十一章 動畫緩動

　　線性動畫的一個缺點是，它通常讓人覺得很機械且不能夠自然。相比而言，高階的使用者介面具有模擬真實世界系統的動畫效果。例如，可能使用具有觸覺的下壓按鈕，當單擊時按鈕快速彈回，但是當沒有進行操作時它們會慢慢地停下來，建立真正移動的錯覺。或者，可能使用類似Windows作業系統的最大化和最小化效果，當視窗解決最終

【WPF學習】第五十四章 關鍵幀動畫

　　到目前為止，看到的所有動畫都使用線性插值從起點到終點。但如果需要建立具有多個分段的動畫和不規則移動的動畫。例如，可能希望建立一個動畫，快速地將一個元素滑入到檢視中，然後慢慢地將它移到正確位置。可通過建立兩個連續的動畫，並使用BeginTime屬性在第一個動畫之後開始第二個動畫來實現這種效果。然而，還有更簡

【WPF學習】第五十六章 基於幀的動畫

　　除基於屬性的動畫系統外，WPF提供了一種建立基於幀的動畫的方法，這種方法只使用程式碼。需要做的全部工作是響應靜態的CompositionTarge.Rendering事件，觸發該事件是為了給每幀獲取內容。這是一種非常低階的方法，除非使用標準的基於屬性的動畫模型不能滿足需要(例如，構建簡單的側邊滾動遊戲、建

【WPF學習】第五十九章 理解控制元件模板

　　最近工作比較忙，未能及時更新內容，敬請了解！！！ 　　對於視覺化樹的分析引出了幾個有趣問題。例如，控制元件如何從邏輯樹表示擴張成視覺化樹表示？ 　　每個控制元件都有一個內建的方法，用於確定如何渲染控制元件（作為一組更基礎的元素）。該方法稱為控制元件模板(control template),是用XAML標記

【WPF學習】第六十一章 組織模板資源

　　為表達全國各族人民對抗擊新冠肺炎疫情鬥爭犧牲烈士和逝世同胞的深切哀悼，國務院今天釋出公告，決定2020年4月4日舉行全國性哀悼活動。 　　當使用控制元件模板時，需要決定如何更廣泛地共享模板，以及是否希望自動地或明確地位用模板。 　　第一個問題是關於希望在何處使用模板的問題。例如，是將它們限制在特定視窗中嗎