重新想象 Windows 8 Store Apps (50) - 输入: 边缘手势, 手势操作, 手势识别
作者：webabcd
介绍
重新想象 Windows 8 Store Apps 之 手势
- 监测边缘手势
- 手势操作 - Manipulate 的应用（位移手势，缩放手势，旋转手势）
- 手势识别 - GestureRecognizer 的应用
示例
1、演示如何监测边缘手势
Input/Touch/EdgeGestureDemo.xaml
<Page x:Class="XamlDemo.Input.Touch.EdgeGestureDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Input.Touch" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <TextBlock Name="lblMsg" FontSize="14.667" /> </StackPanel> </Grid> </Page>
Input/Touch/EdgeGestureDemo.xaml.cs
/* * 演示如何监测边缘手势 * * EdgeGesture - 边缘手势的帮助类 * GetForCurrentView() - 获取当前的 EdgeGesture 对象 * Starting - 边缘手势开始时触发的事件 * Completed - 边缘手势完成后触发的事件 * Canceled - 边缘手势取消后触发的事件 * * EdgeGestureEventArgs - 触发边缘手势事件后的事件参数 * EdgeGestureKind - 边缘手势的输入类型（Touch, Keyboard, Mouse） */ using System; using Windows.UI.Input; using Windows.UI.Xaml.Controls; namespace XamlDemo.Input.Touch { public sealed partial class EdgeGestureDemo : Page { public EdgeGestureDemo() { this.InitializeComponent(); EdgeGesture edgeGesture = EdgeGesture.GetForCurrentView(); edgeGesture.Canceled += edgeGesture_Canceled; edgeGesture.Completed += edgeGesture_Completed; edgeGesture.Starting += edgeGesture_Starting; } void edgeGesture_Starting(EdgeGesture sender, EdgeGestureEventArgs args) { lblMsg.Text += "EdgeGesture Starting"; lblMsg.Text += Environment.NewLine; } void edgeGesture_Completed(EdgeGesture sender, EdgeGestureEventArgs args) { lblMsg.Text += "EdgeGesture Completed"; lblMsg.Text += Environment.NewLine; } void edgeGesture_Canceled(EdgeGesture sender, EdgeGestureEventArgs args) { lblMsg.Text += "EdgeGesture Canceled"; lblMsg.Text += Environment.NewLine; } } }
2、演示 Manipulate 的应用（位移手势，缩放手势，旋转手势）
Input/Touch/Manipulate.xaml
<Page x:Class="XamlDemo.Input.Touch.Manipulate" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Input.Touch" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <Grid Margin="120 0 0 0"> <TextBlock Name="lblMsg" FontSize="14.667" /> <Rectangle Name="rectangle" Height="200" Width="200" Fill="Orange" /> </Grid> </Grid> </Page>
Input/Touch/Manipulate.xaml.cs
/* * 演示 Manipulate 的应用（位移手势，缩放手势，旋转手势） * * * 注：Manipulate 一般用于手势操作，GestureRecognizer 一般用于手势识别 * * * UIElement - UI 元素 * ManipulationModes - 需要监测的手势（Windows.UI.Xaml.Input.ManipulationModes 枚举） * 包括：位移手势以及是否带有位移惯性以及是否带有位移轨道，缩放手势以及是否带有缩放惯性，旋转手势以及是否带有旋转惯性 * ManipulationStarting - 触控操作开始时触发的事件 * ManipulationStarted - 触控操作开始后触发的事件 * ManipulationInertiaStarting - 触控操作的惯性开始时触发的事件 * ManipulationCompleted - 触控操作结束后触发的事件 * ManipulationDelta - 触控值发生变化时触发的事件 * * * ManipulationStartingRoutedEventArgs * Container - 此 Manipulation 的容器 * Mode - 获取或设置 ManipulationModes * Pivot - 获取或设置轴对象，ManipulationPivot 类型的数据 * Center - 旋转中心点 * Radius - 有效的旋转半径 * * ManipulationStartedRoutedEventArgs * Container - 此 Manipulation 的容器 * Cumulative - 自操作开始后的累计变化量，返回 ManipulationDelta 类型的对象 * Position - 触摸点相对于 UIElement 的位置 * Complete() - 马上完成 Manipulation 而不发生惯性 * * ManipulationDeltaRoutedEventArgs * Container - 此 Manipulation 的容器 * Cumulative - 自操作开始后的累计变化量，返回 ManipulationDelta 类型的对象 * Delta - 当前变化量，返回 ManipulationDelta 类型的对象 * Velocities - 当前变化的速率，返回 ManipulationVelocities 类型的对象 * IsInertial - 是否在惯性运动之中 * Position - 触摸点相对于 UIElement 的位置 * Complete() - 马上完成 Manipulation 而不发生惯性 * * ManipulationInertiaStartingRoutedEventArgs * Container - 此 Manipulation 的容器 * Cumulative - 自操作开始后的累计变化量，返回 ManipulationDelta 类型的对象 * Delta - 当前变化量，返回 ManipulationDelta 类型的对象 * Velocities - 当前变化的速率，返回 ManipulationVelocities 类型的对象 * ExpansionBehavior - 惯性的缩放行为，获取或设置 InertiaExpansionBehavior 类型的对象 * DesiredDeceleration - 惯性运动时，缩放的减慢速率 * DesiredExpansion - 惯性结束后，缩放的值 * RotationBehavior - 惯性的旋转行为，获取或设置 InertiaRotationBehavior 类型的对象 * DesiredDeceleration - 惯性运动时，旋转的减慢速率 * DesiredRotation - 惯性结束后，旋转的度数 * TranslationBehavior - 惯性的位移行为，获取或设置 InertiaTranslationBehavior 类型的对象 * DesiredDeceleration - 惯性运动时，直线位移的减慢速率 * DesiredDisplacement - 惯性结束后，直线位移的的值 * * ManipulationCompletedRoutedEventArgs * Container - 此 Manipulation 的容器 * Cumulative - 自操作开始后的累计变化量，返回 ManipulationDelta 类型的对象 * Velocities - 当前变化的速率，返回 ManipulationVelocities 类型的对象 * IsInertial - 结束前是否发生了惯性运动 * Position - 触摸点相对于 UIElement 的位置 * * * ManipulationDelta - 变化量 * Expansion - 触摸点间距离的变化，单位 dip * Scale - 触摸点间距离的变化，以一个百分比表示 * Rotation - 旋转角度的变化，以角度为单位 * Translation - 位移的变化，Point 类型的对象 * * ManipulationVelocities - 变化速率 * Angular - 旋转速度，单位：度/毫秒 * Expansion - 缩放速度，单位：dip/毫秒 * Linear - 直线位移速度，单位：Point/毫秒 * * * 什么是 dip: device independent pixels（设备独立像素），不管屏大小和分辨率，把屏幕分成 480 * 320 个点，其中每一点代表 1 dip */ using System; using Windows.Foundation; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; namespace XamlDemo.Input.Touch { public sealed partial class Manipulate : Page { private TransformGroup _transformGroup; private CompositeTransform _compositeTransform; private MatrixTransform _previousTransform; public Manipulate() { this.InitializeComponent(); // 监测全部手势 rectangle.ManipulationMode = ManipulationModes.All; _transformGroup = new TransformGroup(); _compositeTransform = new CompositeTransform(); _previousTransform = new MatrixTransform() { Matrix = Matrix.Identity }; _transformGroup.Children.Add(_previousTransform); _transformGroup.Children.Add(_compositeTransform); rectangle.RenderTransform = _transformGroup; rectangle.ManipulationStarting += rectangle_ManipulationStarting; rectangle.ManipulationStarted += rectangle_ManipulationStarted; rectangle.ManipulationInertiaStarting += rectangle_ManipulationInertiaStarting; rectangle.ManipulationCompleted += rectangle_ManipulationCompleted; rectangle.ManipulationDelta += rectangle_ManipulationDelta; } // 将触控操作的结果显示出来 void rectangle_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e) { _previousTransform.Matrix = _transformGroup.Value; // 获取操作点相对于此 GeneralTransform 的位置 Point center = _previousTransform.TransformPoint(new Point(e.Position.X, e.Position.Y)); _compositeTransform.CenterX = center.X; _compositeTransform.CenterY = center.Y; _compositeTransform.Rotation = e.Delta.Rotation; _compositeTransform.ScaleX = e.Delta.Scale; _compositeTransform.ScaleY = e.Delta.Scale; _compositeTransform.TranslateX = e.Delta.Translation.X; _compositeTransform.TranslateY = e.Delta.Translation.Y; } void rectangle_ManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e) { lblMsg.Text += "ManipulationStarting"; lblMsg.Text += Environment.NewLine; } void rectangle_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e) { lblMsg.Text += "ManipulationStarted"; lblMsg.Text += Environment.NewLine; } void rectangle_ManipulationInertiaStarting(object sender, ManipulationInertiaStartingRoutedEventArgs e) { lblMsg.Text += "ManipulationInertiaStarting"; lblMsg.Text += Environment.NewLine; } void rectangle_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e) { lblMsg.Text += "ManipulationCompleted"; lblMsg.Text += Environment.NewLine; } } }
3、演示 GestureRecognizer 的应用
Input/Touch/GestureRecognizerDemo.xaml
<Page x:Class="XamlDemo.Input.Touch.GestureRecognizerDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Input.Touch" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="Transparent"> <StackPanel Margin="120 0 0 0"> <StackPanel Orientation="Horizontal"> <RadioButton Name="radVertical" GroupName="group" Content="垂直 Cross Slide" Click="radVertical_Click_1" IsChecked="True" /> <RadioButton Name="radHorizontal" GroupName="group" Content="水平 Cross Slide" Click="radHorizontal_Click_1" Margin="10 0 0 0" /> </StackPanel> <TextBlock Name="lblMsg" FontSize="14.667" Margin="0 10 0 0"> <Run>通过 GestureRecognizer 监测手势（本例以 Cross Slide 手势为例）</Run> </TextBlock> </StackPanel> </Grid> </Page>
Input/Touch/GestureRecognizerDemo.xaml.cs
/* * 演示 GestureRecognizer 的应用 * * 本例以监测 Cross Slide 手势为例，其它类似 * * 注：Manipulate 一般用于手势操作，GestureRecognizer 一般用于手势识别 */ using System; using Windows.UI.Input; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; namespace XamlDemo.Input.Touch { public sealed partial class GestureRecognizerDemo : Page { private GestureRecognizer _gestureRecognizer; public GestureRecognizerDemo() { this.InitializeComponent(); _gestureRecognizer = new GestureRecognizer(); /* * Windows.UI.Input.GestureSettings 是一个 flag 枚举，其值包括： * None, Tap, DoubleTap, Hold, HoldWithMouse, RightTap, Drag, CrossSlide, ManipulationTranslateX, ManipulationTranslateY, ManipulationTranslateRailsX, ManipulationTranslateRailsY, ManipulationRotate, ManipulationScale, ManipulationTranslateInertia, ManipulationRotateInertia, ManipulationScaleInertia */ // 监测 CrossSlide 手势 _gestureRecognizer.GestureSettings = GestureSettings.CrossSlide; _gestureRecognizer.CrossSliding += _gestureRecognizer_CrossSliding; this.PointerMoved += GestureRecognizerDemo_PointerMoved; this.PointerPressed += GestureRecognizerDemo_PointerPressed; this.PointerReleased += GestureRecognizerDemo_PointerReleased; } void GestureRecognizerDemo_PointerPressed(object sender, PointerRoutedEventArgs e) { // 告诉 GestureRecognizer 指针按下了，以便 GestureRecognizer 做手势监测 _gestureRecognizer.ProcessDownEvent(e.GetCurrentPoint(null)); } void GestureRecognizerDemo_PointerMoved(object sender, PointerRoutedEventArgs e) { // 告诉 GestureRecognizer 指针移动中，以便 GestureRecognizer 做手势监测 _gestureRecognizer.ProcessMoveEvents(e.GetIntermediatePoints(null)); } void GestureRecognizerDemo_PointerReleased(object sender, PointerRoutedEventArgs e) { // 告诉 GestureRecognizer 指针释放了，以便 GestureRecognizer 做手势监测 _gestureRecognizer.ProcessUpEvent(e.GetCurrentPoint(null)); } void _gestureRecognizer_CrossSliding(GestureRecognizer sender, CrossSlidingEventArgs args) { lblMsg.Text += Environment.NewLine; lblMsg.Text += " CrossSliding: " + args.CrossSlidingState + "; " + args.Position.ToString(); } private void radVertical_Click_1(object sender, Windows.UI.Xaml.RoutedEventArgs e) { // 监测垂直 Cross Slide 手势 _gestureRecognizer.CrossSlideHorizontally = false; } private void radHorizontal_Click_1(object sender, Windows.UI.Xaml.RoutedEventArgs e) { // 监测水平 Cross Slide 手势 _gestureRecognizer.CrossSlideHorizontally = true; } } }
OK
[源码下载]