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

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

     我們可以在當(dāng)前的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 認(rèn)為是一個容器能夠包含其他控件，并且這些控件均可以實現(xiàn)Manipulating 效果。例如，我們在ScatterView 中加入Rectangle、Label、SurfaceTextBox 三個控件。有些朋友可能會問Rectangle 為什么要放在ScatterViewItem 里？其實，所有在ScatterView 里的控件默認(rèn)都會自動加入到ScatterViewItem，所以如果不需要特別設(shè)置可以將ScatterViewItem 控件省略。本例中我為了調(diào)整Rectangle 的減速數(shù)值就需要手動寫出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 再運行一次。感覺如何？Manipulating 效果是不是變得很簡單了... ...

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

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)參考