程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> WPF Multi-Touch 開發:基礎觸屏操作(Raw Touch)

WPF Multi-Touch 開發:基礎觸屏操作(Raw Touch)

編輯:關於.NET

多點觸控(Multi-Touch)就是通過與觸屏設備的接觸達到人與應用程序交互的操作過程。例如,生活中經常使用的觸屏手機、觸屏筆 記本、顯示器以及微軟最新的Surface 產品等這些都屬於觸屏操作設備。本篇將介紹如何開發能夠支持MT 功能的應用程序。

在WPF 4 中已經具備的多點觸控開發技術,當多個手指觸碰到觸屏設備時,WPF 會把每跟手指認為是一個觸控設備,並為其分配唯一的 識別ID,以便跟蹤不同手指的操作手勢。下面將通過實例演示WPF 所支持的低級別觸控操作:觸碰(TouchDown)、分離(TouchUp)、移 動(TouchMove),它們都是一些最基礎的操作模式。

創建項目

新建項目在XAML中寫入如下代碼,<Grid>中只添加了<Canvas> 控件,其中包含TouchDown、TouchUp、TouchMove 三個基 礎觸控事件。當手指觸碰程序時便會在Canvas 中生成彩色圓圈,圓圈的位置隨手指的移動而改變,手指離開觸屏的同時圓圈消失。接下來 將逐一講解每個事件所完成的任務。

<Window x:Class="WpfRawTouch.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     Title="MainWindow" Height="350" Width="525">
   <Grid>
     <Canvas x:Name="touchPad" Background="Gray"
         TouchDown="touchPad_TouchDown" TouchUp="touchPad_TouchUp"
         TouchMove="touchPad_TouchMove">
     </Canvas>
   </Grid>
</Window>

TouchDown 事件主要是完成當觸碰產生時在<Canvas> 控件中生成彩色圓圈的任務(C#代碼如下)。使用Ellipse 創建隨機顏色 的圓圈,通過GetTouchPoint 方法獲取觸碰位置點,並調整圓圈在<Canvas> 中的位置。為了跟蹤手指移動軌跡,需要將觸屏設備ID 及UI 控件存儲在集合movingEllipses 中。

private Dictionary<int, Ellipse> movingEllipses = new Dictionary<int, Ellipse>();
Random rd = new Random();

private void touchPad_TouchDown(object sender, TouchEventArgs e)
{
   Ellipse ellipse = new Ellipse();
   ellipse.Width = 30;
   ellipse.Height = 30;
   ellipse.Stroke = Brushes.White;
   ellipse.Fill = new SolidColorBrush( 
     Color.FromRgb( 
       (byte)rd.Next(0, 255), 
       (byte)rd.Next(0, 255), 
       (byte)rd.Next(0, 255))
       );

   TouchPoint touchPoint = e.GetTouchPoint(touchPad);
   Canvas.SetTop(ellipse, touchPoint.Bounds.Top);
   Canvas.SetLeft(ellipse, touchPoint.Bounds.Left);

   movingEllipses[e.TouchDevice.Id] = ellipse;

   touchPad.Children.Add(ellipse);
}

當手指離開觸屏時TouchUp 事件將被觸發,首先將觸碰設備從movingEllipses 集合中刪除不再跟蹤手指相關操作,並從 <Canvas> 中將彩色圓圈移除。

private void touchPad_TouchUp(object sender, TouchEventArgs e)
{
   movingEllipses.Remove(e.TouchDevice.Id);
   Ellipse ellipse = movingEllipses[e.TouchDevice.Id];
   touchPad.Children.Remove(ellipse);
}

當手指在觸屏上持續移動時TouchMove 事件觸發,它來跟蹤手指移動軌跡,並重新調整圓圈在<Canvas> 中的位置。

private void touchPad_TouchMove(object sender, TouchEventArgs e)
{
   Ellipse ellipse = movingEllipses[e.TouchDevice.Id];
   TouchPoint touchPoint = e.GetTouchPoint(touchPad);
   Canvas.SetTop(ellipse, touchPoint.Bounds.Top);
   Canvas.SetLeft(ellipse, touchPoint.Bounds.Left);
}

程序演示

至此,一個簡單的觸控應用程序就完成了編譯並運行該程序,用手指觸碰屏幕並持續移動看看是否會出現下面視頻中的情況)。

演示地址:http://static.youku.com/v1.0.0122/v/swf/qplayer.swf? VideoIDS=XMTk4MTY0NjI4&embedid=MTI1LjY5LjE0NC4zNgI0OTU0MTE1NwJ3d3cuY25ibG9ncy5jb20CL2duaWVsZWUvYXJjaGl2ZS8yMDEwLzA4Lz E3L211bHRpLXRvdWNoLXJhdy10b3VjaC5odG1s&showAd=0

源碼下載:http://cid-c75f4e27adfe5bbc.office.live.com/self.aspx/GnieTech/WpfRawTouch.zip

出處:http://www.cnblogs.com/gnielee/

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved