原文:重新想象 Windows 8 Store Apps (50) - 输入: 边缘手势, 手势操作, 手势识别
[源码下载]
重新想象 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
[源码下载]
时间： 2024-09-25 10:52:40