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 ManipulationInertiaStarting ManipulationDeltaManipulationCompleted

当多点操作时，一般先触发 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，有助于缓解开发困境

更多关于手势与指针处理资料可参考：

1，现代化 Windows 8 中的输入 ；

2，快速入门：指针（使用 C#/VB/C++ 和 XAML 的 Windows 应用商店应用） (Windows);

3，快速入门：触摸输入（使用 C#/VB/C++ 和 XAML 的 Windows 应用商店应用） (Windows)；

4，Input: XAML user input events sample；