Windows 8 Store Apps學習(50) 輸入: 邊緣手勢, 手勢操作, 手勢識別

介紹

重新想象 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

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar