WPF 與Surface 2.0 SDK 親密接觸 - ScatterView 篇

     以前的博文我曾向大家介紹過(guò)利用WPF 4 開(kāi)發(fā)具有多點(diǎn)觸屏功能的應(yīng)用程序，可參考《Multi-Touch 開(kāi)發(fā)資源匯總》。在那些文章中無(wú)論是簡(jiǎn)單的拖拽，還是復(fù)雜的旋轉(zhuǎn)、縮放效果（下文簡(jiǎn)稱Manipulating）都需要開(kāi)發(fā)者逐字逐句的編寫(xiě)出來(lái)。Surface 2.0 SDK 的發(fā)布可以使這些工作更加簡(jiǎn)單，我們甚至不需要對(duì)這些效果寫(xiě)任何代碼。

     本篇將為大家介紹如何使用ScatterView 控件實(shí)現(xiàn)上述功能。由于觸屏技術(shù)只在Windows 7 操作系統(tǒng)中支持，所以XP 的用戶必須要升級(jí)到Windows 7 系統(tǒng)。首先，需要在Windows 7 中安裝Surface 2.0 SDK 和Runtime，可到官方頁(yè)面下載安裝程序。安裝完成后打開(kāi)VS2010 新建一個(gè)Surface 2.0 項(xiàng)目。在模板中選擇Surface Appliction(WPF)。

     我們可以在當(dāng)前的XAML 代碼中添加一個(gè)Label 控件。F5 運(yùn)行后Label 控件是無(wú)法進(jìn)行Manipulating 操作的。

<s:SurfaceWindow x:Class="ScatterView.SurfaceWindow1"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:s="http://schemas.microsoft.com/surface/2008"Title="ScatterView"><Grid><Label Content="Surface 2.0" Foreground="Fuchsia" FontWeight="Bold"/></Grid></s:SurfaceWindow>

     接下來(lái)在Grid 中添加一個(gè)ScatterView 控件。我們可以將ScatterView 認(rèn)為是一個(gè)容器能夠包含其他控件，并且這些控件均可以實(shí)現(xiàn)Manipulating 效果。例如，我們?cè)赟catterView 中加入Rectangle、Label、SurfaceTextBox 三個(gè)控件。有些朋友可能會(huì)問(wèn)Rectangle 為什么要放在ScatterViewItem 里？其實(shí)，所有在ScatterView 里的控件默認(rèn)都會(huì)自動(dòng)加入到ScatterViewItem，所以如果不需要特別設(shè)置可以將ScatterViewItem 控件省略。本例中我為了調(diào)整Rectangle 的減速數(shù)值就需要手動(dòng)寫(xiě)出ScatterViewItem 控件，并調(diào)整Deceleration 參數(shù)。

<Grid><s:ScatterView x:Name="mainScatterView"><s:ScatterViewItem Deceleration="50"><Rectangle Fill="Green" Width="200" Height="100"/></s:ScatterViewItem><Label Content="Surface 2.0" Foreground="Fuchsia" FontWeight="Bold"/><s:SurfaceTextBox Width="500" Height="20" FontSize="20"/></s:ScatterView></Grid>

完成上面代碼后，F(xiàn)5 再運(yùn)行一次。感覺(jué)如何？Manipulating 效果是不是變得很簡(jiǎn)單了... ...

如果有需要可以自動(dòng)加載控件到ScatterView，下面代碼將自動(dòng)加入一張本機(jī)圖片到程序中。

private void AddDemoPic(){string targetPic = @"C:\Users\Public\Pictures\Sample Pictures\Koala.jpg";ScatterViewItem item = new ScatterViewItem();mainScatterView.Items.Add(item);MediaElement pic = new MediaElement();item.Content = pic;item.Background = Brushes.Transparent;if (System.IO.File.Exists(targetPic)){pic.Source = new Uri(targetPic);}else{item.Content = "Picture not found";}}

至此，本篇關(guān)于ScatterView 的介紹就到這里，歡迎大家相互交流。

相關(guān)參考

ScatterView Class