樣式提供了重用一組屬性設置的實用方法。它們爲幫助構建一致的、組織良好的界面邁出了重要的第一步——可是它們也是有許多限制。canvas
問題是在典型的應用程序中,屬性設置僅是用戶界面基礎結構的一小部分。甚至最基本的程序一般也須要大量的用戶界面代碼,這些代碼與應用程序的功能無關。在許多程序中,用於用戶界面任務的代碼(如驅動動畫、實現平滑效果、維護用戶界面狀態,以及支持諸如拖放、縮放以及停靠等用戶界面特性)不管是在數量山仍是複雜性上都超出了業務代碼。許多這類代碼是通用的,這意味着在建立的每一個WPF對象中須要編寫相同的內容。全部這些工做幾乎都單調乏味的。瀏覽器
爲迴應這一挑戰,Expression Blend創做者開發了稱爲行爲(behavior)的特徵。其思想很簡單:建立封裝了一些通用用戶界面功能的行爲。這一功能能夠是基本功能(如啓動故事板或導航到超連接),也能夠是複雜功能(如處理多點觸摸交互,或構建使用實時物理引擎的碰撞模型)。一旦構建功能,就可將它們添加到任意應用程序的另外一個控件中,具體方法是將該控件連接到適當的行爲並設置行爲的屬性。在Expression Blend中,只經過拖放操做就可使用行爲。ide
1、獲取行爲支持工具
重用用戶界面的代碼通用塊得基礎結構不是WPF的一部分。反而,它被捆綁到Expression Blend。這是由於行爲開始時做爲Expression Blend的設計時特性引入的。但這並不意味着行爲只能用於Expression Blend。只須要付出不多的努就能夠在Visual Studio應用程序中的建立和使用行爲。只須要手動縮寫標記,而不是使用工具箱。測試
爲了得到支持行爲的程序集,有兩種選擇:動畫
不管是使用Expression Blend的哪一個版本,均可以在文件夾中看到所需的兩個相同的重要程序集:this
2、理解行爲模型spa
行爲特性具備兩個版本:一個版本是旨在Silverlight添加行爲支持,Silverlight是Microsoft的針對瀏覽器的富客戶端插件;而另外一個版本是針對WPF設計的。儘管這兩個版本提供了相同的特性,但行爲特性和Silverlight領域更吻合,由於它彌補了更大的鴻溝。與WPF不一樣,Silverlight不支持觸發器,因此實現行爲的程序集也實現觸發器更合理。然而,WPF支持觸發器,行爲特性包含本身的觸發器系統,而觸發器系統與WPF模型不匹配,這確實使人感到有些困惑。插件
問題在於具備相似名稱的這兩個特性有部分重合但不徹底相同。在WPF中,觸發器最重要的角色是構建靈活的樣式和控件模板。在觸發器的幫助下,樣式和模板變得更加智能;例如,當一些熟悉發生變化時可應用可視化效果。然而,Expression Blend中的觸發器系統具備不一樣的目的。經過使用可視化設計工具,容許爲應用程序添加簡單功能。換句話說,WPF觸發器支持更增強大的樣式和控件模板。而Expression Blend觸發器支持快速的不須要代碼的應用程序設計。設計
那麼,對於使用WPF的廣泛開發人員來講全部這些意味着什麼呢?下面是幾條指導原則:
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; } } } }
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>
但這並不是是所有內容。若是正在使用Expression Blend進行開發,行爲甚至提供了更好的設計體驗——能夠根本不用編寫任何標記。