一起谈.NET技术,WPF Multi-Touch 开发:基础触屏操作(Raw Touch)

简介:   多点触控(Multi-Touch)就是通过与触屏设备的接触达到人与应用程序交互的操作过程。例如,生活中经常使用的触屏手机、触屏笔记本、显示器以及微软最新的Surface 产品等这些都属于触屏操作设备。

  多点触控(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);
}

  程序演示

  至此,一个简单的触控应用程序就完成了编译并运行该程序,用手指触碰屏幕并持续移动看看是否会出现下面视频中的情况(如果没有多点触屏设备请参考这里解决)。

  源码下载:WpfRawTouch.zip

目录
相关文章
|
1月前
|
SQL 开发框架 数据可视化
企业应用开发中.NET EF常用哪种模式?
企业应用开发中.NET EF常用哪种模式?
|
2月前
|
开发框架 JavaScript 前端开发
5个.NET开源且强大的快速开发框架(帮助你提高生产效率)
5个.NET开源且强大的快速开发框架(帮助你提高生产效率)
|
3月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
|
2天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
28天前
|
数据安全/隐私保护 Windows
.net三层架构开发步骤
.net三层架构开发步骤
9 0
|
28天前
深入.net平台的分层开发
深入.net平台的分层开发
45 0
|
2月前
|
开发框架 前端开发 .NET
福利来袭,.NET Core开发5大案例,30w字PDF文档大放送!!!
为了便于大家查找,特将之前开发的.Net Core相关的五大案例整理成文,共计440页,32w字,免费提供给大家,文章底部有PDF下载链接。
32 1
福利来袭,.NET Core开发5大案例,30w字PDF文档大放送!!!
|
3月前
|
C#
.NET开发中合理使用对象映射库,简化和提高工作效率
.NET开发中合理使用对象映射库,简化和提高工作效率
|
3月前
|
开发框架 前端开发 JavaScript
一款基于.NET Core的快速开发框架、支持多种前端UI、内置代码生成器
一款基于.NET Core的快速开发框架、支持多种前端UI、内置代码生成器
|
4月前
|
JavaScript C#
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
39 0