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

     以前的博文我曾向大家介紹過利用WPF 4 開發具有多點觸屏功能的應用程式，可參考《Multi-Touch 開發資源彙總》。在那些文章中無論是簡單的拖拽，還是複雜的旋轉、縮放效果（下文簡稱Manipulating）都需要開發者逐字逐句的編寫出來。Surface 2.0 SDK 的釋出可以使這些工作更加簡單，我們甚至不需要對這些效果寫任何代碼。

     本篇将為大家介紹如何使用ScatterView 控件實作上述功能。由于觸屏技術隻在Windows 7 作業系統中支援，是以XP 的使用者必須要更新到Windows 7 系統。首先，需要在Windows 7 中安裝Surface 2.0 SDK 和Runtime，可到官方頁面下載下傳安裝程式。安裝完成後打開VS2010 建立一個Surface 2.0 項目。在模闆中選擇Surface Appliction(WPF)。

     我們可以在目前的XAML 代碼中添加一個Label 控件。F5 運作後Label 控件是無法進行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>        

     接下來在Grid 中添加一個ScatterView 控件。我們可以将ScatterView 認為是一個容器能夠包含其他控件，并且這些控件均可以實作Manipulating 效果。例如，我們在ScatterView 中加入Rectangle、Label、SurfaceTextBox 三個控件。有些朋友可能會問Rectangle 為什麼要放在ScatterViewItem 裡？其實，所有在ScatterView 裡的控件預設都會自動加入到ScatterViewItem，是以如果不需要特别設定可以将ScatterViewItem 控件省略。本例中我為了調整Rectangle 的減速數值就需要手動寫出ScatterViewItem 控件，并調整Deceleration 參數。

<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>        

完成上面代碼後，F5 再運作一次。感覺如何？Manipulating 效果是不是變得很簡單了... ...

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";      }  }      

相關參考 ScatterView Class