【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進行開發,行為甚至提供了更好的設計體驗——可以根本不用編寫任何標記。