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

原文:

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

作者：

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

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

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

phone:PhoneApplicationPage
x:
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:Design d:Design
shell:SystemTray.IsVisible="True"
Grid x:Name="LayoutRoot" Background="Transparent"
Rectangle Name="rect" 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:
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:Design d:Design
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:
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:Design d:Design
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:
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:Design d:Design
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 = ; 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