与众不同 windows phone (25) - Input（输入）之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触控

作者：webabcd

介绍
与众不同 windows phone 7.5 (sdk 7.1) 之输入

捕获 UIElement 之外的触控操作
Silverlight 方式捕获手势操作
XNA 方式捕获手势操作
多点触控

示例
1、演示如何捕获 UIElement 之外的触控操作
OutsideCapture.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Input.Touch.OutsideCapture"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        
        <Rectangle Name="rect" Width="100" Height="100" Fill="Red" 
                   MouseLeftButtonDown="rect_MouseLeftButtonDown" 
                   MouseLeftButtonUp="rect_MouseLeftButtonUp"
                   MouseMove="rect_MouseMove" />

        <TextBlock Name="lblMsg" VerticalAlignment="Top" TextWrapping="Wrap" Text="用手指触摸红色方块，然后将手指移除红色方块区域" />
        
    </Grid>
    
</phone:PhoneApplicationPage>

OutsideCapture.xaml.cs

/*
 * 演示如何在 UIElement 外响应 UIElement 上的触控事件
 * 
 * UIElement - UI 元素
 *     CaptureMouse() - 捕获外部触摸事件，这样即使触摸事件在 UIElement 之外也可以响应
 *     ReleaseMouseCapture() - 取消外部触摸事件的捕获
 *     
 * 注：
 * 调用 UIElement 的 CaptureMouse() 方法需要满足以下条件
 * 1、当前没有任何 UIElement 正在捕获中
 * 2、必须在 UIElement 的 MouseLeftButtonDown 事件中调用 CaptureMouse() 方法
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Demo.Input.Touch
{
    public partial class OutsideCapture : PhoneApplicationPage
    {
        public OutsideCapture()
        {
            InitializeComponent();
        }

        private void rect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            rect.CaptureMouse();

            lblMsg.Text = "触摸点坐标为：" + e.GetPosition(LayoutRoot).ToString();
        }

        private void rect_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            rect.ReleaseMouseCapture();
        }

        private void rect_MouseMove(object sender, MouseEventArgs e)
        {
            // 调用了 rect.CaptureMouse() 之后，即使触控移出 rect 也可以响应触控事件
            lblMsg.Text = "触摸点坐标为：" + e.GetPosition(LayoutRoot).ToString();
        }
    }
}

2、演示如何通过 Silverlight 捕获手势操作
ManipulationDemo.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Input.Touch.ManipulationDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Orientation="Vertical">
            
            <TextBlock Text="请随便做一些手势操作，以查看演示效果" />
            
            <TextBlock Name="lblMsg" />
            
        </StackPanel>
    </Grid>

</phone:PhoneApplicationPage>

ManipulationDemo.xaml.cs

/*
 * 演示如何在 Silverlight 下捕获手势操作
 * 
 * UIElement - UI 元素
 *     ManipulationStarted - 手势操作开始时触发的事件，即触摸屏幕时触发的事件（事件参数：ManipulationStartedEventArgs）
 *     ManipulationDelta - 手势操作过程中触发的事件（事件参数：ManipulationDeltaEventArgs）
 *     ManipulationCompleted - 手持操作完成时触发的事件（事件参数：ManipulationCompletedEventArgs）
 *     
 * 
 * ManipulationStartedEventArgs
 *     ManipulationContainer - 手势操作的容器，即坐标的参照物
 *     ManipulationOrigin - 手势起始点坐标
 *     Complete() - 停止捕获手势操作，即不会再触发 ManipulationDelta 事件
 * 
 * ManipulationDeltaEventArgs
 *     ManipulationContainer - 手势操作的容器，即坐标的参照物
 *     ManipulationOrigin - 当前手势的中心点坐标
 *     Complete() - 停止捕获手势操作，即不会再触发 ManipulationDelta 事件
 *     DeltaManipulation.Scale - 最近一次缩放比的变化
 *     DeltaManipulation.Translation - 最近一次位移的变化
 *     CumulativeManipulation.Scale - 缩放比的累计的变化
 *     CumulativeManipulation.Translation - 位移的累计的变化
 * 
 * ManipulationCompletedEventArgs
 *     ManipulationContainer - 手势操作的容器，即坐标的参照物
 *     ManipulationOrigin - 当前手势的中心点坐标
 *     TotalManipulation.Scale - 缩放比的总计变化
 *     TotalManipulation.Translation - 位移的总计变化
 *     IsInertial - 手势操作收尾时是否有惯性
 *     FinalVelocities.LinearVelocity - 如果手势操作收尾时有惯性，则此属性会返回其线性速度
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace Demo.Input.Touch
{
    public partial class ManipulationDemo : PhoneApplicationPage
    {
        public ManipulationDemo()
        {
            InitializeComponent();
            
            // 注册相关手势事件
            LayoutRoot.ManipulationStarted += new EventHandler<ManipulationStartedEventArgs>(LayoutRoot_ManipulationStarted);
            LayoutRoot.ManipulationDelta += new EventHandler<ManipulationDeltaEventArgs>(LayoutRoot_ManipulationDelta);
            LayoutRoot.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(LayoutRoot_ManipulationCompleted);
        }

        void LayoutRoot_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
        {
            lblMsg.Text = string.Format("手势起始点坐标 - x: {0}，y: {1}", e.ManipulationOrigin.X, e.ManipulationOrigin.Y);
        }

        void LayoutRoot_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            lblMsg.Text = string.Format("当前手势的中心点坐标 - x: {0}，y: {1}", e.ManipulationOrigin.X, e.ManipulationOrigin.Y);
            lblMsg.Text += Environment.NewLine;

            lblMsg.Text += "缩放比最近的变化：" + e.DeltaManipulation.Scale.ToString();
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "位移最近的变化" + e.DeltaManipulation.Translation.ToString();
            lblMsg.Text += Environment.NewLine;

            lblMsg.Text += "缩放比总共的变化：" + e.CumulativeManipulation.Scale.ToString();
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "位移总共的变化：" + e.CumulativeManipulation.Translation.ToString();
            lblMsg.Text += Environment.NewLine;
        }

        void LayoutRoot_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
        {
            lblMsg.Text = string.Format("当前手势的中心点坐标 - x: {0}，y: {1}", e.ManipulationOrigin.X, e.ManipulationOrigin.Y);
            lblMsg.Text += Environment.NewLine;

            lblMsg.Text += "缩放比总共的变化：" + e.TotalManipulation.Scale.ToString();
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "位移总共的变化：" + e.TotalManipulation.Translation.ToString();
            lblMsg.Text += Environment.NewLine;

            lblMsg.Text += "手势操作收尾时是否有惯性：" + e.IsInertial.ToString();
            lblMsg.Text += Environment.NewLine;

            lblMsg.Text += "如果手势操作收尾时有惯性，其速度为：" + e.FinalVelocities.LinearVelocity.ToString();
        }
    }
}

3、演示如何通过 XNA 捕获手势操作
XNAGesture.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Input.Touch.XNAGesture"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Orientation="Vertical">

            <TextBlock Text="请随便做一些手势操作，以查看演示效果" />

            <TextBlock Name="lblMsg" TextWrapping="Wrap" />

        </StackPanel>
    </Grid>

</phone:PhoneApplicationPage>

XNAGesture.xaml.cs

/*
 * 演示如何在 XNA 下捕获手势操作
 * 
 * TouchPanel - 触摸面板
 *     DisplayOrientation - 显示方向（Microsoft.Xna.Framework.DisplayOrientation 枚举）
 *         Default, LandscapeLeft, LandscapeRight, Portrait
 *     DisplayWidth - 宽
 *     DisplayHeight - 高
 *     IsGestureAvailable - 当前是否存在有效的手势操作
 *     EnabledGestures - 指定需要捕获的手势操作类型（Microsoft.Xna.Framework.Input.Touch.GestureType 枚举）
 *         None, Tap, DoubleTap, Hold, HorizontalDrag, VerticalDrag, FreeDrag, Pinch, Flick, DragComplete, PinchComplete
 *     GetCapabilities() - 返回 TouchPanelCapabilities 类型对象
 *     ReadGesture() - 返回 GestureSample 类型对象
 *     
 * 
 * TouchPanelCapabilities - 触摸板的能力
 *     IsConnected - 触摸板是否有效
 *     MaximumTouchCount - 触摸板可以同时捕获的最大点数，即最大支持几点触摸
 *     
 * GestureSample - 手势信息
 *     GestureType - 手势操作类型
 *     Position - 两点手势操作时，第一点的位置
 *     Position2 - 两点手势操作时，第二点的位置
 *     Delta - 两点手势操作时，第一点的位移的最近变化值
 *     Delta2  - 两点手势操作时，第二点的位移的最近变化值
 *     Timestamp - 此手势开始的时间戳（此值为系统自上次启动以来到此手势开始时所经过的时间）
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

using Microsoft.Xna.Framework.Input.Touch;

namespace Demo.Input.Touch
{
    public partial class XNAGesture : PhoneApplicationPage
    {
        public XNAGesture()
        {
            InitializeComponent();

            // 在手势操作完成后获取相关的手势信息
            LayoutRoot.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(LayoutRoot_ManipulationCompleted);

            TouchPanelCapabilities tpc = TouchPanel.GetCapabilities();
            lblMsg.Text = "触摸板是否有效：" + tpc.IsConnected;
            lblMsg.Text += Environment.NewLine;
            lblMsg.Text += "触摸板最大支持 " + tpc.MaximumTouchCount + " 点触摸";
            lblMsg.Text += Environment.NewLine;

            // 指定需要捕获的手势类型（只有指定的类型才能捕获到）
            TouchPanel.EnabledGestures = GestureType.Tap | GestureType.DoubleTap | GestureType.Hold | GestureType.HorizontalDrag | GestureType.VerticalDrag | GestureType.FreeDrag | GestureType.Pinch | GestureType.Flick | GestureType.DragComplete | GestureType.PinchComplete;
        }

        // 当一次手势操作完成后，获取此次手势操作包含的全部手势信息
        void LayoutRoot_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
        {
            /*
             * 由于一次手势操作可能会有多个手势信息，所以这里要一直输出手势信息直至没有有效的手势为止
             * 这里的一次手势操作指的是手指按下到抬起后，这期间可能会有多个手势信息（比如一次手势操作可能会由多个水平移动、多个垂直移动等组成）
             * 可以在每一帧当 TouchPanel.IsGestureAvailable 有效时都获取一下 TouchPanel.ReadGesture()，这样就可以即时获取到当前手势信息
             */
            while (TouchPanel.IsGestureAvailable)
            {
                GestureSample gs = TouchPanel.ReadGesture();

                lblMsg.Text += gs.GestureType.ToString() + ",";
            }
        }
    }
}

4、演示如何响应多点触控
MutiTouch.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Input.Touch.MutiTouch"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel Orientation="Vertical">
            
            <TextBlock Text="请多点触摸此屏幕，以查看演示效果" />
            
            <TextBlock Name="lblMsg" />

        </StackPanel>
    </Grid>

</phone:PhoneApplicationPage>

MutiTouch.xaml.cs

/*
 * 演示系统对多点触摸的支持
 * 
 * 
 * TouchPanel - 触摸面板
 *     GetState() - 返回触摸面板上，被触摸的所有点的状态（TouchCollection 类型）
 * 
 * TouchCollection - 触摸点的集合（TouchLocation 的集合）
 * 
 * TouchLocation - 触摸点
 *     Position - 触摸点的坐标
 *     State - 触摸点的状态（TouchLocationState 类型）
 *     
 * TouchLocationState - 触摸点状态（Microsoft.Xna.Framework.Input.Touch.TouchLocationState 枚举）
 *     Invalid - 无效
 *     Released - 被释放
 *     Pressed - 被触摸，即一个新的触摸点
 *     Moved - 被触摸后移动
 *     
 * 
 * 注：目前只支持 4 点触摸
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

using System.Windows.Navigation;
using Microsoft.Xna.Framework.Input.Touch;

namespace Demo.Input.Touch
{
    public partial class MutiTouch : PhoneApplicationPage
    {
        public MutiTouch()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }

        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            this.Dispatcher.BeginInvoke(delegate
            {
                lblMsg.Text = "";
            });

            // 获取当前触摸点集合
            TouchCollection touchLocations = TouchPanel.GetState();
            for (int i = 0; i < touchLocations.Count; i++)
            {
                TouchLocation touchLocation = touchLocations[i];

                float x = touchLocation.Position.X;
                float y = touchLocation.Position.Y;

                // 显示每个触摸点的坐标及状态
                this.Dispatcher.BeginInvoke(new InvokeUIWidthParameterDelegate(ShowMessage), i, x, y, touchLocation.State);
            }
        }

        void ShowMessage(int i, float x, float y, TouchLocationState state)
        {
            lblMsg.Text += string.Format("触摸点{0}坐标 - X: {1}，Y: {2}，状态: {3}", i, x, y, state.ToString());
            lblMsg.Text += Environment.NewLine;
        }

        private delegate void InvokeUIWidthParameterDelegate(int i, float x, float y, TouchLocationState state);
    }
}

OK
[源码下载]

posted @ 2012-08-27 09:05 webabcd 阅读(3449) 评论(6) 编辑收藏举报

刷新页面返回顶部

与众不同 windows phone (25) - Input（输入）之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触控

公告