WPF Multi-Touch 开发：基础触屏操作（Raw Touch）

WPF Multi-Touch 开发：基础触屏操作（Raw Touch）2012-06-07 博客园李敬然多点触控（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）;
}