多点触控(Multi-Touch)就是通过与触屏设备的接触达到人与应用程序交互的操作过程。例如,生活中经常使用的触屏手机、触屏笔记本、显示器以及微软最新的Surface 产品等这些都属于触屏操作设备。本篇将介绍如何开发能够支持MT 功能的应用程序。
在WPF 4 中已经具备的多点触控开发技术,当多个手指触碰到触屏设备时,WPF 会把每跟手指认为是一个触控设备,并为其分配唯一的识别ID,以便跟踪不同手指的操作手势。下面将通过实例演示WPF 所支持的低级别触控操作:触碰(TouchDown)、分离(TouchUp)、移动(TouchMove),它们都是一些最基础的操作模式。
创建项目
新建项目在XAML中写入如下代码,
<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 事件主要是完成当触碰产生时在
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 集合中删除不再跟踪手指相关操作,并从
private void touchPad_TouchUp(object sender, TouchEventArgs e) { movingEllipses.Remove(e.TouchDevice.Id); Ellipse ellipse = movingEllipses[e.TouchDevice.Id]; touchPad.Children.Remove(ellipse); }
当手指在触屏上持续移动时TouchMove 事件触发,它来跟踪手指移动轨迹,并重新调整圆圈在
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); }
程序演示
至此,一个简单的触控应用程序就完成了编译并运行该程序,用手指触碰屏幕并持续移动看看是否会出现下面视频中的情况(如果没有多点触屏设备请参考这里解决)。
源码下载
WpfRawTouch.zip