Windows 8风格应用-触控输入
参考:演练:创建您的第一个触控应用程序 http://msdn.microsoft.com/zh-cn/library/ee649090(v=vs.110).aspx
win8支持多点触摸技术,而我们在屏幕上所做的各种操作,也最终转换为输入
http://code.msdn.microsoft.com/windowsapps/Input-3dff271b
http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/hh465387#using_manipulation_events
在window runtime上响应触屏事件的方法分为两类:单点和多点。下面分别介绍:
鼠标操作事件:
PointerWheelChanged :鼠标滚轮转动时发生
PointerPressed :鼠标点击下去的时候即触发事件。 PointerReleased :鼠标点击下去的时候释放鼠标时触发事件。 PointerMoved :鼠标在有效范围之内移动之时触发事件。 PointerEntered :鼠标进入有效范围之时触发一次。 PointerExited :鼠标退出有效范围之时触发事件。
这些事件的参数都是 PointerRoutedEventArgs
多点事件包括:
ManipulationStarting ManipulationStarted ManipulationInertiaStartingManipulationDeltaManipulationCompleted
当多点操作时,一般先触发 ManipulationStarted 事件,然后是一连串的ManipulationDelta事件触发,最后是ManipulationCompleted事件.
注意实现多点操作的时候要设置多点操作对象的 ManipulationMode 属性
http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/hh465387#using_manipulation_events
下面看一个示例:
按 Ctrl+C 复制代码
<Page x:Class="PhotoDemo.MainPage" IsTabStop="false" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:PhotoDemo" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid x:Name="LayoutRoot" Background="White"> <TextBlock x:Name="OpeningMessage" Text="Tap here to open a photo" Foreground="#FF4080E0" FontSize="48" HorizontalAlignment="Center" VerticalAlignment="Center"/> <Grid RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> <CompositeTransform x:Name="PhotoTransform" /> </Grid.RenderTransform> <Image x:Name="Photo" Margin="20" Width="600"/> </Grid> </Grid> </Page>
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码
/// <summary> /// An empty page that can be used on its own or navigated to within a Frame. /// </summary> public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); this.LayoutRoot.DoubleTapped += LayoutRoot_DoubleTapped; this.OpeningMessage.Tapped += OpeningMessage_Tapped; this.Photo.Tapped+=Photo_Tapped; this.Photo.ManipulationMode=ManipulationModes.All; this.Photo.ManipulationDelta+=Photo_ManipulationDelta; } /// <summary> /// Invoked when this page is about to be displayed in a Frame. /// </summary> /// <param name="e">Event data that describes how this page was reached. The Parameter /// property is typically used to configure the page.</param> protected override void OnNavigatedTo(NavigationEventArgs e) { } async private void OpeningMessage_Tapped(object sender, TappedRoutedEventArgs e) { // Display a FileOpenPicker and allow the user to select a photo var picker = new FileOpenPicker(); picker.FileTypeFilter.Add(".jpg"); picker.FileTypeFilter.Add(".png"); picker.FileTypeFilter.Add(".bmp"); picker.FileTypeFilter.Add(".gif"); picker.ViewMode = PickerViewMode.Thumbnail; picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary; var file = await picker.PickSingleFileAsync(); if (file != null) { var stream = await file.OpenAsync(FileAccessMode.Read); // Wrap a WriteableBitmap around the selected photo and display it WriteableBitmap bitmap = new WriteableBitmap(1, 1); bitmap.SetSource(stream); Photo.Source = bitmap; // Reset the CompositeTransform PhotoTransform.TranslateX = PhotoTransform.TranslateY = 0.0; PhotoTransform.ScaleX = PhotoTransform.ScaleY = 1.0; // Hide the "Tap here" message in case it hasn't been removed already OpeningMessage.Visibility = Visibility.Collapsed; } } private void Photo_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e) { // Translate the photo PhotoTransform.TranslateX += e.Delta.Translation.X; PhotoTransform.TranslateY += e.Delta.Translation.Y; // Scale the photo PhotoTransform.ScaleX *= e.Delta.Scale; PhotoTransform.ScaleY *= e.Delta.Scale; // Constrain scale factor PhotoTransform.ScaleX = Math.Min(PhotoTransform.ScaleX, 4.0); PhotoTransform.ScaleY = Math.Min(PhotoTransform.ScaleY, 4.0); PhotoTransform.ScaleX = Math.Max(PhotoTransform.ScaleX, 1.0); PhotoTransform.ScaleY = Math.Max(PhotoTransform.ScaleY, 1.0); } private void LayoutRoot_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e) { // Reset the CompositeTransform PhotoTransform.TranslateX = PhotoTransform.TranslateY = 0.0; PhotoTransform.ScaleX = PhotoTransform.ScaleY = 1.0; } private void Photo_Tapped(object sender, TappedRoutedEventArgs e) { } }
按 Ctrl+C 复制代码
引用
Windows 8设备通常具有多点触摸屏,用户可以同时使用多个手指来进行不同的输入交互,如点击、拖动或收缩等手势操作。另外Windows 8中将触摸、鼠标和笔/触笔交互是作为指针输入进行接收、处理和管理。
一、手势处理
首先我们来汇总一下Windows 8中常用的手势都有哪些。
1,点击:用一个手指触摸屏幕,然后抬起手指。
2,长按:用一个手指触摸屏幕并保持不动。
3,滑动:用一个或多个手指触摸屏幕并向着同一方向移动。
4,轻扫:用一个或多个手指触摸屏幕并向着同一方向移动较短距离。
5,收缩:用两个或多个手指触摸屏幕,然后将手指并拢在一起或分开。
6,旋转:用两个或多个手指触摸屏幕并沿着顺时针或逆时针的弧线移动。
7,拉伸:用两个或多个手指触摸屏幕,然后将手指分开。
我们如何处理Windows 8中手势呢?
先来看一下Windows 8手势API:
这些手势都是以Manipulation API为基础进行处理的,其中Hold和Tap手势是基于Manipulation进行了封装,那么其他手势都是使用Manipulation API进行处理的。
以下是在Manipulation API几个常用事件:
- ManipulationStarting:在首次创建操作处理器时触发。
- ManipulationStarted:当输入设备对 UIElement 对象开始操作时触发。
- ManipulationDelta:当输入设备在操作期间更改位置时触发。
- ManipulationCompleted:对于 UIElement 对象的操作和延时完毕时触发。
- ManipulationInertiaStarting:当输入设备在操作期间与 UIElement 对象失去联系且延时开始时触发。
点击手势(双击、单击、右击):
这里以单击为例(双击、右击处理方式雷同):
通常我们可以实现通过点击事件可以处理跳转某一页面等操作,并且在“OpeningMessage_Tapped”中处理代码业务逻辑。
按下并保持手势:
通常我们可以按下应用中某一项并保持,浏览关于该项的更多信息,类似于WindowsPhone中长按某一条短信,可以选择复制,转发,删除等操作。
滑行拖动手势:
通常我们可以通过滑行拖动手势进行拖动图片,由于未提供滑行拖动手势操作的API,只能通过处理ManipulationDelta事件进行实现效果。
缩放手势:
我们可以通过该手势进行缩放图片,由于未提供缩放手势操作的API,只能通过处理ManipulationDelta事件进行实现效果。
旋转手势:
我们可以通过旋转手势进行旋转图片,其实逻辑比较简单,只需要处理当前图片角度+(图片角度*180/PI值),然后重新赋值就行了。
二、指针处理
以前应用中处理对鼠标,触控和手写笔的响应,需要多个不同的事件处理程序,很容易造成代码质量低劣,易于产生复制粘贴错误。微软通过分析不同设备和形式之间的一些共同点,最后将指针输入的方法整合到一个一致的API中。使用指针事件为鼠标,触控和手写笔创造了一致,简单的体验。
以下是指针事件处理常用的事件:
(以在图片上进行画图为例)
1,PointerPressed:手指,鼠标或手写笔点击屏幕时发生。
当指针按下时候记录收集当前指针。
2,PointerMoved:手指,鼠标或手写笔在屏幕上拖动时发生。
可以通过触发PointerMoved事件,将前一个点击位置和当前点击位置绘制成一条线。
3,PointerReleased:手指,鼠标或手写笔抬起时发生。
可以通过触发PointerReleased事件,将点击位置从集合中移除。
4,PointerExited:手指,鼠标或手写笔离开时发生。
可以通过触发PointerExited事件,将点击位置从集合中移除。
三、指针与手势系统的交互优势
1,有助于对应用性能提升
2,简化对大量输入发送自动触及的处理
3,减少编写的代码量
4,有助于缓解开发困境
更多关于手势与指针处理资料可参考:
2,快速入门:指针(使用 C#/VB/C++ 和 XAML 的 Windows 应用商店应用) (Windows);
3,快速入门:触摸输入(使用 C#/VB/C++ 和 XAML 的 Windows 应用商店应用) (Windows);
4,Input: XAML user input events sample;
Windows 8风格应用-触控输入的更多相关文章
- 快速构建Windows 8风格应用35-触控输入
原文:快速构建Windows 8风格应用35-触控输入 引用 Windows 8设备通常具有多点触摸屏,用户可以同时使用多个手指来进行不同的输入交互,如点击.拖动或收缩等手势操作.另外Windows ...
- Windows phone 8 学习笔记(1) 触控输入(转)
Windows phone 8 的应用 与一般的Pc应用在输入方式上最大的不同就是:Windows phone 8主要依靠触控操作.因此在输入方式上引入一套全新的触控操作方式,我们需要重新定义相关的事 ...
- Windows phone 8 学习笔记(1) 触控输入
原文:Windows phone 8 学习笔记(1) 触控输入 Windows phone 8 的应用 与一般的Pc应用在输入方式上最大的不同就是:Windows phone 8主要依靠触控操作.因此 ...
- 【WPF学习】第十八章 多点触控输入
多点触控(multi-touch)是通过触摸屏幕与应用程序进行交互的一种方式.多点触控输入和更传统的基于笔(pen-based)的输入的区别是多点触控识别手势(gesture)——用户可移动多根手指以 ...
- MSDN 杂志:UI 前沿技术 - WPF 中的多点触控操作事件
原文 MSDN 杂志:UI 前沿技术 - WPF 中的多点触控操作事件 UI 前沿技术 WPF 中的多点触控操作事件 Charles Petzold 下载代码示例 就在过去几年,多点触控还只是科幻电 ...
- WPF进阶技巧和实战09-事件(2-多点触控)
多点触控输入 多点触控输入和传统的基于比的输入的区别是多点触控识别手势,用户可以移动多根手指以执行常见的操作,放大,旋转,拖动等. 多点触控的输入层次 WPF允许使用键盘和鼠标的高层次输入(例如单击和 ...
- Unity用Input.touches实现手机端多点触控
多点触控的方法,两边的触控互不干扰: 主要采用Input.touches的相关属性进行操作: 而采用IPointerDrag接口会造成两个drag的相互干扰: 代码如下: using System.C ...
- 与众不同 windows phone (25) - Input(输入)之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触控
原文:与众不同 windows phone (25) - Input(输入)之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触 ...
- 快速构建Windows 8风格应用19-基础控件II
原文:快速构建Windows 8风格应用19-基础控件II 本篇博文接着上篇博文<快速构建Windows 8风格应用18-基础控件I>介绍开发Windows 8风格应用中常用控件. Sli ...
随机推荐
- redis主从复制踩到的那些坑
一.报错:* MASTER <-> SLAVE sync started # Error condition on socket for SYNC: No route to host解决: ...
- ucore-lab1-练习4report
练习四:分析bootloader加载ELF格式的OS的过程 1.bootloader如何读取硬盘扇区? (1)在练习3中实现了bootloader让CPU进入保护模式,下一步的工作就是从硬盘上加载并 ...
- ansible1
前期工作: 第一步:下载epel源 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo 第二步: ...
- Django 之多对多关系
1. 多对多关系 作者 <--> 书籍 1. 表结构设计 1. SQL版 -- 创建作者表 create table author( id int primary key auto_inc ...
- LinearLayout 线性布局
android:orientation 设置布局管理器内组件的排列方式,可设置为 horizontal (水平排列).vertical (垂直排列) android:gravity 设置布局管理器内组 ...
- Balanced Numbers (数位DP)
Balanced Numbers https://vjudge.net/contest/287810#problem/K Balanced numbers have been used by math ...
- JS参数转发
在没有装饰器之前不方便. 可以用Reflect.apply. cls = function f() { let obj = {}; obj.show = function(a, b) { consol ...
- am start的总结,-d参数的总结,以及python中传递内容包含中文及特殊字符&的解决方案
一.am start的内容的整理 主要包含以下内容:am start的常规操作及参数的含义,-d 参数的含义,以及如何在APK中设置参数获取 使用命令如下:adb shell am start -n ...
- HDU 2680 Choose the best route(SPFA)
Problem DescriptionOne day , Kiki wants to visit one of her friends. As she is liable to carsickness ...
- java实现rabbitMQ延时队列详解以及spring-rabbit整合教程
在实际的业务中我们会遇见生产者产生的消息,不立即消费,而是延时一段时间在消费.RabbitMQ本身没有直接支持延迟队列功能,但是我们可以根据其特性Per-Queue Message TTL和 Dead ...