posts - 615, comments - 10491, trackbacks - 594, articles - 0
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

重新想象 Windows 8 Store Apps (50) - 输入: 边缘手势, 手势操作, 手势识别

Posted on 2013-08-12 08:53 webabcd 阅读(...) 评论(...) 编辑 收藏

[源码下载]


重新想象 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
[源码下载]