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