詳解Silverlight 3.0 RTW新特性
在Silverlight 3.0 RTW新特性中,展示一個鼠標滾動事件的示例只需要幾行代碼即可,我認為大部分人都可以在幾分鐘內做好,并理解它是如何工作的。因此我決定將這個事件和Expression Blend中引入的新行為一起合并成一個例子進行介紹。
行為是什么?
你可能曾經在ASP.NET Ajax框架中使用過行為,說得簡單點這里的行為就是ASP.NET Ajax語法的Silverlight實現,允許創建可復用的和可連接到HTML控件的行為。(Silverlight 3.0 RTW新特性讓操作簡單的和手工具)
從Blend 3 Beta版開始引入行為的概念,可以在設計窗口中拖動內置的行為,增加圖形元素的活力,進入Asset文件夾,在這里可以找到控件、效果、資源和其它東西,現在又多了一個行為卡片。
Expression Blend 3.0 引入了許多行為類型,行為< T>是其中最簡單的了,適用于DependencyObject,行為可以修改控件的外觀,添加元素,修改屬性或處理一個或多個事件。MouseDragElementBehavior就是一個活生生的例子,它連接鼠標事件,讓元素可以在頁面中拖動。
編寫一個行為
編寫一個行為是一件很簡單的事情,行為是行為< T>的類擴展,因此首先要做的是引用C:\Program Files\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\Silverlight目錄下的Microsoft.Expression.Interactions.dll和System.Windows.Interactivity.dll。如果你從Blend 3.0添加一個現有的行為,那這些動態庫會自動引用到項目中。
引用添加好后,就可以創建類了:
- public class MouseWheelScrollBehavior : Behavior< Control>
- {
- // 在這里添加實現代碼
- }
由于我們是要擴展Silverlight中可滾動的組件,我們需要創建一個可以連接到Control類的類型,在Silverlight中沒有通用的用于可滾動組件(如ScrollViewer、DataGrid和DataGrid)的類,這就需要自己想辦法處理才行,我們將在后面進行介紹,目前先分析一下如何創建一個行為。(微軟Silverlight中加入Smooth Streaming)
接下來要做的是在目標對象上連接MouseWheel事件,當我們完成行為類的擴展后,我們有兩個辦法來處理連接和釋放目標上的行為:將行為連接到對象上時調用OnAttached,釋放對象上的行為時使用OnDetaching。OnAttached和OnDetaching是連接和釋放公共事件的理想選擇,目標對象是通過行為< T>在AssociatedObject屬性上暴露的,下面是我的代碼示例:
- /// < summary>
- /// Called after the behavior is attached to an AssociatedObject.
- /// < /summary>
- /// < remarks>Override this to hook up functionality to the AssociatedObject.< /remarks>
- protected override void OnAttached()
- {
- this.AssociatedObject.MouseWheel += new MouseWheelEventHandler(AssociatedObject_MouseWheel);
- base.OnAttached();
- }
- /// < summary>
- /// Called when the behavior is being detached from its AssociatedObject, but before it has actually occurred.
- /// < /summary>
- /// < remarks>Override this to unhook functionality from the AssociatedObject.< /remarks>
- protected override void OnDetaching()
- {
- this.AssociatedObject.MouseWheel -= new MouseWheelEventHandler(AssociatedObject_MouseWheel);
- base.OnDetaching();
- }
現在行為已經準備好連接到對象,但它沒有做任何事情,我們需要為可滾動組件實現滾動。
滾動可滾動的組件 -- 并非如此簡單
由于沒有通用的滾動接口,即使為ScrollViewer創建一個行為比較簡單,但為DataGrid或ListBox創建滾動行為卻并不簡單。
我在http://blog.thekieners.com/2009/04/06/how-to-enable-mouse-wheel-scrolling-in-silverlight-without-extending-controls/發現有人曾經寫過一篇文章介紹如何使用Automation API而不擴展控件實現鼠標滾動。大家可以去了解一下。這里我們需要知道的是Automation API提供了一個IScrollProvider接口,因此我們需要修改OnAttached方法,為連接對象創建Automation Peer。
- /// < summary>
- /// Gets or sets the peer.
- /// < /summary>
- /// < value>The peer.< /value>
- private AutomationPeer Peer { get; set; }
- /// < summary>
- /// Called after the behavior is attached to an AssociatedObject.
- /// < /summary>
- /// < remarks>Override this to hook up functionality to the AssociatedObject.< /remarks>
- protected override void OnAttached()
- {
- this.Peer = FrameworkElementAutomationPeer.FromElement(this.AssociatedObject);
- if (this.Peer == null)
- this.Peer = FrameworkElementAutomationPeer.CreatePeerForElement(this.AssociatedObject);
- this.AssociatedObject.MouseWheel += new MouseWheelEventHandler(AssociatedObject_MouseWheel);
- base.OnAttached();
- }
如果控件已經創建了自動化接口,我們首先來研究一下它,如果接口不存在,我們需要先創建,AutomationPeer作為一個成員屬性保存,使用MouseWheel事件時會使用到它,下面是滾動目標對象的示例代碼:
- /// < summary>
- /// Handles the MouseWheel event of the AssociatedObject control.
- /// < /summary>
- /// < param name="sender">The source of the event.< /param>
- /// < param name="e">The < see cref="System.Windows.Input.MouseWheelEventArgs"/> instance containing the event data.< /param>
- void AssociatedObject_MouseWheel(object sender, MouseWheelEventArgs e)
- {
- this.AssociatedObject.Focus();
- int direction = Math.Sign(e.Delta);
- ScrollAmount scrollAmount =
- (direction < 0) ? ScrollAmount.SmallIncrement : ScrollAmount.SmallDecrement;
- if (this.Peer != null)
- {
- IScrollProvider scrollProvider =
- this.Peer.GetPattern(PatternInterface.Scroll) as IScrollProvider;
- bool shiftKey = (Keyboard.Modifiers & ModifierKeys.Shift) == ModifierKeys.Shift;
- if (scrollProvider != null && scrollProvider.VerticallyScrollable && !shiftKey)
- scrollProvider.Scroll(ScrollAmount.NoAmount, scrollAmount);
- else if (scrollProvider != null && scrollProvider.VerticallyScrollable && shiftKey)
- scrollProvider.Scroll(scrollAmount, ScrollAmount.NoAmount);
- }
- }
我們獲取了Delta后需要提取出滾動的方向,否則我們就不能指定目標滾動的像素數量,但ScrollAmount可能是SmallIncrement或SmallDecrement(或LargeIncrement,LargeDecrement),因此使用方向我們可以確定是遞增還是遞減。
由于控件既可以橫向滾動也可以縱向滾動,我決定檢查換檔鍵是否被按下,如果按下就實現橫向滾動,***在IScrollProvider中使用Scroll方法,不需要檢查邊界。
使用行為
使用Blend應用行為的操作非常簡單,Blend資產庫會掃描項目中所有的類,并顯示出來,因此只需要拖動行為到滾動組件上就可以應用行為了,我們需要學習的是通過編碼應用行為,下面是一個例子:
- < UserControl
- 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:local="clr-namespace:Elite.Silverlight3.MouseWheelSample.Silverlight.Classes"
- xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
- x:Class="Elite.Silverlight3.MouseWheelSample.Silverlight.MainPage"
- Width="Auto" Height="Auto">
- ... omissis ...
- < data:DataGrid Grid.Column="" Grid.Row="0" ItemsSource="{Binding DataItems}" Margin="20">
- < i:Interaction.Behaviors>
- < local:MouseWheelScrollBehavior />
- < /i:Interaction.Behaviors>
- < /data:DataGrid>
在UserControl中,我們聲明了要使用的命名空間,在這個例子中,"i"代表交互,"local"指的是融入了新行為的本地類,在第二部分中我們將行為連接到DataGrid了,將行為連接到ScrollViewer或ListBox的代碼非常類似,運行這個項目,我們在DataGrid上就可以使用鼠標滾輪了。
Silverlight 3.0 RTW新特性小結
本文介紹的Silverlight 3.0 RTW新特性非常有實用價值,幾乎適用于所有的可滾動控件,但ComboBox是個例外,因為它沒有直接實現IScrollProvider接口,缺點是只能工作在Windows上,這是一個較大的問題,但目前并沒有解決辦法,因為它是目前通過編程實現滾動的唯一方法,此外我還注意到MouseWheel事件只能在Windows下IE和Firefox (非Windows模式)中工作,這是由Safari和Firefox 的架構決定的,唯一變通的方法是使用DOM事件。
【編輯推薦】