Windows Surface for 多點觸摸 簡介

最近研究了一下Windows  Surface ， 很 cool 很炫 ，我想這是微軟對抗蘋果的好東西，這個東西是一個傳統型程式，使用Windows7 作業系統就可以（我才知道Win7 系統本身是支援多點觸摸操作~~~汗）

Surface 是基於WPF 技術來進行給使用者展現的，可以想想我們以後的茶機，電視牆，洗臉鏡，防盜門上都會是這些可以觸碰操作的螢幕，那會是多麼嚮往的生活。接下來我們看看幾個Surface 的一些視頻

http://www.tudou.com/programs/view/09jtf6d0kUs/

更多視頻大家可以去搜尋一下

其實更多的技術介紹我這裡就不囉嗦了，網上會有很多，我喜歡用ScatterView 這個控制項。可以隨意拖動，放大，旋轉 案頭照片，視頻，以及文檔內容。官方的Surface 2.0 SDK裡面有Code Simple ，會介紹各種控制項以及使用情境。

想嘗試的朋友們，你們只要機器是Win7的 ，有VS2010 那麼剩下的就是下載一個Surface SDK，Surface Runtime 就可以

-------------------以下內容是轉載部落格園中 Gnie
的內容，更多介紹大家可以去看看他的部落格，不過目前學習資料太少，建議大家最好是瞭解，如果要做項目千萬謹慎考慮-----------------

以前的博文我曾向大家介紹過利用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 效果是不是變得很簡單了... ...

如果有需要可以自動載入控制項到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";    }}

至此，本篇關於ScatterView 的介紹就到這裡，歡迎大家相互交流。