多点触控（multi-touch）是通过触摸屏幕与应用程序进行交互的一种方式。多点触控输入和更传统的基于笔（pen-based）的输入的区别是多点触控识别手势(gesture)——用户可移动多根手指以执行常见操作的特殊方式。例如，在触摸屏上放置两根手指并同时移动他们，这通常意味着“放大"，而以一根手指为支点转动另一根手指意味着"旋转"。并且因为用户直接在应用程序窗口中进行这些手势，所以每个手势自然会被连接到某个特定的对象。例如，简单的具有多点触控功能的应用程序，可能会在虚拟桌面上显示多幅图片，并且允许用户拖动、缩放以及旋转每幅图片，进而创建新的排列方式。
在智能手机和平板电脑上，多点触控屏幕几乎无处不在。但在普通计算机上，多点触控屏幕较少见。尽管硬件制造商已经产生了触摸屏笔记本电脑和LCD显示器，但传统的笔记本电脑和显示器仍占据主导地位。
这对于希望实验多点触控应用程序的开发人员是一个挑战。到目前位置，最好的方式是投资购买基本的多点触控笔记本。然而，通过多做一点工作，可使用仿真器模拟多点触控输入。基本做饭是为计算机连接多个鼠标并安装来自Multi-Touch Visita开源项目（对于Windows 7该项目也能工作）的驱动程序。具体安装请自觉网上搜着安装步骤。
一、多点触控的输入层次
正如前两章所了解的，WPF允许使用键盘和鼠标的高层次输入（例如单击和文本改变）和低层次输入（鼠标事件以及按键事件）。这很重要，因为有些应用程序需要加以更精细的控制。多点触控输入同样应用了这种多层次的输入方式，并且对于多点触控支持，WPF提供了三个独立的层次：
- 原始触控(raw touch):这是最低级的支持，可访问用户执行的每个触控。缺点是由您的应用程序负责将单独的触控消息组合到一起，并对他们进行解释。如果不准备识别标准触摸手势，反而希望创建以独特方式响应多点触控输入的应用程序，使用原始触控是合理的。一个例子是绘图程序，例如Windows7画图程序，该程序允许用户同时多根手指在触摸屏上绘图。
- 操作(manipulation):这是一个简便的抽象层，该层将原始的多点触控输入转换成更有意义的手势，与WPF控件将一系列MouseDown和MouseUp事件解释为更高级的MouseDoubleClick事件很相似。WPF支持的通用手势包括移动(pan)、缩放(zoom)、选择(rotate)以及轻按(tap)。
- 内置的元素支持(built-in element support)：有些元素已对多点触控事件提供了内置支持，从而不需要在编写代码。例如，可滚动的控件支持触控移动，如ListBox、ListView、DataGrid、TextBox以及ScrollViewer。
二、原始触控
与基本的鼠标和键盘事件一样，触控事件被内置到低级的UIElement以及ContentElement类。下表列出了所有触控事件。
表 所有元素的原始触控事件
| 名称 | 路由类型 | 说明 |
| PreviewTouchDown | 隧道 | 当用户触摸元素时发生 |
| TouchDown | 冒泡 | 当用户触摸元素时发生 |
| PreviewTouchMove | 隧道 | 当用户移动放到触摸屏上的手指时发生 |
| TouchMove | 冒泡 | 当用户移动放到触摸屏上的手指时发生 |
| PreviewTouchUp | 隧道 | 当用户移开手指，结束触摸时发生 |
| TouchUp | 冒泡 | 当用户移开手指，结束触摸时发生 |
| TouchEnter | 无 | 当出点从元素外进入元素内时发生 |
| TouchLeave | 无 | 当出点离开元素时发生 |
所有这些事件都提供了一个TouchEventArgs对象，该对象提供了两个重要成员。第一个是GetTouchPoint()方法，该方法返回触控事件发生位置的屏幕坐标（还有一些不怎么常用的数据，例如触点的大小）。第二个是TouchDevice属性，该属性返回一个TouchDevice对象。这里的技巧是将每个出点都视为单独设备。因此，如果用户在不同的位置按下两根手指（同时按下或者先按下一根再按下另一根），WPF将它们作为两个触控设备，并为两个触控设备指定唯一的ID。当用户移动这些手指，并且触控事件发生时，代码可以通过ToucheDevice.Id属性区分两个触点。
下面是一个简单的示例：
为了创建这个示例，需要处理TouchDown、TouchMove以及TouchUp事件：
<Window x:Class="Multitouch.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"> <Canvas x:Name="canvas" Background="LightBlue" TouchDown="Canvas_TouchDown" TouchUp="canvas_TouchUp" TouchMove="canvas_TouchMove"> </Canvas> </Window>
为了跟踪所有触点，需要作为窗口成员变量存储一个集合。最简洁的方法是存储UIElement对象的集合(为每个激活的椭圆存储一个UIElement对象)，是哟该触控设备的ID（该ID是整数）编写索引：
private Dictionary<int, UIElement> movingEllipses = new Dictionary<int, UIElement>();
当用户按下一根手指时，代码创建并配置一个新的椭圆元素（该元素看起来像个小圆）。使用触点在恰当的坐标放置椭圆，并将椭圆元素添加到集合中（根据触控设备的ID编写索引），然后再Canvas面板上显示该椭圆元素：
private void Canvas_TouchDown(object sender, TouchEventArgs e) { //Create an ellipse to draw at the new contact point Ellipse ellipse = new Ellipse(); ellipse.Width = 30; ellipse.Height = 30; ellipse.Stroke = Brushes.White; ellipse.Fill = Brushes.Green; //Position the ellipse at the contact point TouchPoint touchPoint = e.GetTouchPoint(canvas); Canvas.SetTop(ellipse, touchPoint.Bounds.Top); Canvas.SetLeft(ellipse, touchPoint.Bounds.Left); //Store the ellipse in the active collection movingEllipses[e.TouchDevice.Id] = ellipse; //Add the ellipse to the Canvas canvas.Children.Add(ellipse); }
当用户移动按下的手指时，将触发TouchMove事件。此时，可使用触控设备的ID确定哪个点正在移动。代码需要做的全部工作就是查找对相应的椭圆并更新其坐标：
private void canvas_TouchMove(object sender, TouchEventArgs e) { //Get the ellipse that corresponds to the current contact point UIElement element = movingEllipses[e.TouchDevice.Id]; //Move it to the new contact point TouchPoint touchPoint = e.GetTouchPoint(canvas); Canvas.SetTop(element, touchPoint.Bounds.Top); Canvas.SetLeft(element, touchPoint.Bounds.Left); }
最后，当用户抬起手指时，从跟踪集合中移除椭圆。作为一种选择，您可能也希望从Canvas面板中移除椭圆：
private void canvas_TouchUp(object sender, TouchEventArgs e) { //Remove the ellipse from the Canvas UIElement element = movingEllipses[e.TouchDevice.Id]; canvas.Children.Remove(element); //Remove the ellipse from the tracking collection movingEllipses.Remove(e.TouchDevice.Id); }
注意：
UIElement还添加了CaptureTouch()和ReleaseTouchCapture()方法，这两个方法与CaptureMouse()和ReleaseMouseCapture()方法类似。当一个元素捕获触控输入后，该元素会接受来自被捕获的触控设备的所有触控事件，即使触控事件是在窗口的其他地方发生的也是如此。但因为可能有多个触控设备，所以多个元素可能同时捕获触控输入，只要每一个捕获来自不同设备的输入即可。
三、操作
对于那些以简明直接的方式使用触控事件的应用程序，例如上面介绍的拖动椭圆示例或画图程序，原始触控是非常好的。但是，如果希望支持标准的触控手势，原始触控不会简化该工作。例如，为了支持旋转，需要探测在同一个元素上的两个触点，跟踪这两个触点的移动情况，并使用一些运算确定一个触点绕另一个触点的转动情况。甚至，伺候还需要添加实际应用相应旋转效果的代码。
幸运的是，WPF未将这些工作完全留给你。WPF为手势提供了更高级别的支持，称为触控操作(manipulation)。通过将元素的IsManipulationEnabled属性设置为True，将元素配置为接受触控操作。然后可响应4个操作时间：ManipulationStaring、ManipulationStared、ManipulationDelta以及ManipulationCompleted。
创建一个实例，该例使用基本的安排在Canvas面板上显示三幅图像。此后用户可使用移动、旋转以及缩放手势来移动、转动、缩小或发达图像。
创建这个示例的第一步是定义Canvas面板并放置三个Image元素。为简化实现，当ManipulationStarting和ManipulationDelta事件从适当的Image元素内部向上冒泡后，在Canvas面板中处理这两个事件：
<Window x:Class="Multitouch.Manipulations" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Manipulations" Height="349" Width="607"> <Grid> <Canvas x:Name="canvas" ManipulationStarting="image_ManipulationStarting" ManipulationDelta="image_ManipulationDelta"> <Image Canvas.Top="10" Canvas.Left="10" Width="200" IsManipulationEnabled="True" Source="koala.jpg"> <Image.RenderTransform> <MatrixTransform></MatrixTransform> </Image.RenderTransform> </Image> <Image Canvas.Top="30" Canvas.Left="350" Width="200" IsManipulationEnabled="True" Source="penguins.jpg"> <Image.RenderTransform> <MatrixTransform></MatrixTransform> </Image.RenderTransform> </Image> <Image Canvas.Top="100" Canvas.Left="200" Width="200" IsManipulationEnabled="True" Source="tulips.jpg"> <Image.RenderTransform> <MatrixTransform></MatrixTransform> </Image.RenderTransform> </Image> </Canvas> </Grid> </Window>
上面的表中有一个新的细节。每个图像包含一个MatrixTransform对象，该对象为代码应用移动、旋转以及缩放操作的组合提供了一种简易方式。当前，MatrixTransform对象未执行任何操作，但当操作事件发生时，将使用代码改变。
当用户触摸一幅图像时，将触发ManipulationStarting事件。这是，需要设置操作容器，它是在后面将获得的所有操作坐标的参考点。在该例中，包含图像的Canvas面板是自然自选。还可根据需要选择允许的操作类型。如果不选择操作类型，WPF将监视它识别的所有手势：移动、缩放以及旋转。
private void image_ManipulationStarting(object sender, ManipulationStartingEventArgs e) { // Set the container (used for coordinates.) e.ManipulationContainer = canvas; // Choose what manipulations to allow. e.Mode = ManipulationModes.All; }
当发生操作是（但操作未必结束），触发ManipulationDelta事件。例如，如果用户开始选择一幅图像，将不断触发ManipulationDelta事件，直到用户选择结束并且用户抬起按下的手指为止。
通过使用ManipulationDelta对象将手势的当前状态记录下来，该对象是通过ManipulationDeltaEventArgs.DeltaManipulation属性提供的。本质上，ManipulationDelta对象记录了应当应用到对象的缩放、旋转以及移动的量，这些信息时通过三个简单的属性提供的：Scale、Rotation以及Translation。使用这一信息的技巧是在用户界面中调整元素。
理论上，可通过改变元素的大小和位置来处理缩放和移动细节。但这仍不能应用旋转（而且代码有些凌乱）。更好的方法是使用变换——通过变换对象可采用数学方法改变任何WPF元素的外观。基本思路是获取由ManipulationDelta对象提供的信息，并使用这些信息配置MatrixTransform。尽管这听起来很复杂，但需要使用的代码在使用该特性的每个应用程序中本质上时相同的。看起来如下所示：
private void image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) { // Get the image that‘s being manipulated. FrameworkElement element = (FrameworkElement)e.Source; // Use the matrix to manipulate the element. Matrix matrix = ((MatrixTransform)element.RenderTransform).Matrix; var deltaManipulation = e.DeltaManipulation; // Find the old center, and apply the old manipulations. Point center = new Point(element.ActualWidth / 2, element.ActualHeight / 2); center = matrix.Transform(center); // Apply zoom manipulations. matrix.ScaleAt(deltaManipulation.Scale.X, deltaManipulation.Scale.Y, center.X, center.Y); // Apply rotation manipulations. matrix.RotateAt(e.DeltaManipulation.Rotation, center.X, center.Y); // Apply panning. matrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y); // Set the final matrix. ((MatrixTransform)element.RenderTransform).Matrix = matrix; }
四、惯性
WPF还有一层构建在基本操作支持之上的特性，称为惯性(intertia)。本质上，通过惯性可以更逼真、更流畅地操作元素。
现在，如果用户用移动手势拖动上例中的一幅图像，当手指从触摸屏上抬起时图像会立即停止移动。但如果启用了惯性特性，那么图像会继续移动非常短的一段时间，正常地减速。该特性为操作提供了势头的效果和感觉。当将元素拖动进他们不能穿过的边界时，惯性还会使元素被弹回，从而使他们的行为像是真实的物理对象。
为给上一个示例添加惯性特性，只需要处理ManipulationInertiaStarting事件。与其他操作事件一样，该事件从一幅图像开始并冒泡至Canvas面板。当用户结束手势并抬起手指释放元素时，触发ManipulationInertiaStarting事件。这是，可使用ManipulationInertiaStartingEventsArgs对象确定当期速度——当操作结束时元素的移动速度——并设置希望的减速度。下面的示例为移动、缩放以及旋转手势添加了惯性：
private void canvas_ManipulationInertiaStarting(object sender, ManipulationInertiaStartingEventArgs e) { //If the object is moving,decrease its speed by //10 inches per second every second //deceleration=10 inches * 96 units per inch /(1000 milliseconds)^2 e.TranslationBehavior = new InertiaTranslationBehavior(); e.TranslationBehavior.InitialVelocity = e.InitialVelocities.LinearVelocity; e.TranslationBehavior.DesiredDeceleration = 10.0 * 96.0 / (1000.0 * 1000.0); //Decrease the speed of zooming by 0.1 inches per second every second. //deceleration=0.1 inches * 96 units per inch/(1000 milliseconds)^2 e.ExpansionBehavior = new InertiaExpansionBehavior(); e.ExpansionBehavior.InitialVelocity = e.InitialVelocities.ExpansionVelocity; e.ExpansionBehavior.DesiredDeceleration = 0.1 * 96 / (1000.0 * 1000.0); //Decrease the rotation rate by 2 rotations per second every second. //deceleration=2*36 degress /(1000 milliseconds)^2 e.RotationBehavior = new InertiaRotationBehavior(); e.RotationBehavior.InitialVelocity = e.InitialVelocities.AngularVelocity; e.RotationBehavior.DesiredDeceleration=720/(1000.0*1000.0) }
为使元素从障碍物自然地被弹回，需要在ManipulationDelta事件中检查是否将元素拖到了错误的位置。如果穿过了一条边界，那么由你负责通过调用ManipulationDeltaEventArgs.ReportBoundaryFeedback()方法进行报告。