|
樣式提供了重用一組屬性設置的實用方法。它們?yōu)閹椭鷺嫿ㄒ恢碌?、組織良好的界面邁出了重要的第一步——但是它們也是有許多限制。 問題是在典型的應用程序中，屬性設置僅是用戶界面基礎結構的一小部分。甚至最基本的程序通常也需要大量的用戶界面代碼，這些代碼與應用程序的功能無關。在許多程序中，用于用戶界面任務的代碼（如驅動動畫、實現(xiàn)平滑效果、維護用戶界面狀態(tài)，以及支持諸如拖放、縮放以及停靠等用戶界面特性）無論是在數(shù)量山還是復雜性上都超出了業(yè)務代碼。許多這類代碼是通用的，這意味著在創(chuàng)建的每個WPF對象中需要編寫相同的內容。所有這些工作幾乎都單調乏味的。 為回應這一挑戰(zhàn)，Expression Blend創(chuàng)作者開發(fā)了稱為行為(behavior)的特征。其思想很簡單：創(chuàng)建封裝了一些通用用戶界面功能的行為。這一功能可以是基本功能（如啟動故事板或導航到超鏈接），也可以是復雜功能（如處理多點觸摸交互，或構建使用實時物理引擎的碰撞模型）。一旦構建功能，就可將它們添加到任意應用程序的另一個控件中，具體方法是將該控件鏈接到適當?shù)男袨椴⒃O置行為的屬性。在Expression Blend中，只通過拖放操作就可以使用行為。 一、獲取行為支持 重用用戶界面的代碼通用塊得基礎結構不是WPF的一部分。反而，它被捆綁到Expression Blend。這是因為行為開始時作為Expression Blend的設計時特性引入的。但這并不意味著行為只能用于Expression Blend。只需要付出很少的努就可以在Visual Studio應用程序中的創(chuàng)建和使用行為。只需要手動縮寫標記，而不是使用工具箱。 為了獲得支持行為的程序集，有兩種選擇：
無論是使用Expression Blend的哪個版本，都可以在文件夾中看到所需的兩個相同的重要程序集：
二、理解行為模型 行為特性具有兩個版本：一個版本是旨在Silverlight添加行為支持，Silverlight是Microsoft的針對瀏覽器的富客戶端插件；而另一個版本是針對WPF設計的。盡管這兩個版本提供了相同的特性，但行為特性和Silverlight領域更吻合，因為它彌補了更大的鴻溝。與WPF不同，Silverlight不支持觸發(fā)器，所以實現(xiàn)行為的程序集也實現(xiàn)觸發(fā)器更合理。然而，WPF支持觸發(fā)器，行為特性包含自己的觸發(fā)器系統(tǒng)，而觸發(fā)器系統(tǒng)與WPF模型不匹配，這確實令人感到有些困惑。 問題在于具有類似名稱的這兩個特性有部分重合但不完全相同。在WPF中，觸發(fā)器最重要的角色是構建靈活的樣式和控件模板。在觸發(fā)器的幫助下，樣式和模板變得更加智能；例如，當一些熟悉發(fā)生變化時可應用可視化效果。然而，Expression Blend中的觸發(fā)器系統(tǒng)具有不同的目的。通過使用可視化設計工具，允許為應用程序添加簡單功能。換句話說，WPF觸發(fā)器支持更加強大的樣式和控件模板。而Expression Blend觸發(fā)器支持快速的不需要代碼的應用程序設計。 那么，對于使用WPF的普遍開發(fā)人員來說所有這些意味著什么呢？下面是幾條指導原則：
三、創(chuàng)建行為 行為旨在封裝一些UI功能，從而可以不比編寫代碼就能夠將其應用到元素上。從另一個角度看，每個行為都為元素提供了一個服務。該服務通常涉及監(jiān)聽幾個不同的事件并執(zhí)行幾個相關的操作。 為更好地理解行為，最好自己創(chuàng)建一個行為。設想希望為任意元素提供使用鼠標在Canvas面板上拖動元素的功能。對于單個元素實現(xiàn)該功能的基本步驟是非常簡單的——代碼監(jiān)聽鼠標事件并修改設置相應Canvas坐標的附加屬性。但通過付出更多一點的努力，可將該代碼轉換為可重用的行為，該行為可為Canvas面板上的所有元素提供拖動支持。 在繼續(xù)之前，創(chuàng)建一個WPF類庫程序集。在該程序集中，添加System.Windows.Interactivity.dll程序集的引用。然后，創(chuàng)建一個繼承自Behavior基類的類。Behavior是通用類，該類使用一個類型參數(shù)?？墒褂迷擃愋蛥?shù)將行為限制到特定的元素，或使用UIElement或FrameworkElement將它們都包含進來。如下所示： public class DragInCanvasBehavior : Behavior<UIElement> { } 在任何行為中，第一步要覆蓋OnAttached()和OnDetaching()方法。當調用OnAttached()方法時，可通過AssociatedObject屬性訪問放置行為的元素，并可關聯(lián)事件處理程序。當調用OnDetaching()方法時，移除事件處理程序。 下面是DragInCanvasBehavior類用于監(jiān)視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; } 最后一步是在事件處理程序中運行適當?shù)拇a。例如，當用戶單擊鼠標左鍵時，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; } } } } 四、使用行為 為測試行為，創(chuàng)建一個新的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面板中添加任意元素。下面的標記創(chuàng)建一個具有三個圖形的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進行開發(fā)，行為甚至提供了更好的設計體驗——可以根本不用編寫任何標記。
|
|
|
