Wpf-UI前沿技术-WPF 中的多点触控操作事件
- 格式：pdf
- 大小：624.45 KB
- 文档页数：8
UI 前沿技前沿技术术
WPF 中的多点触控操作事件 Charles Petzold
下载代码示例
[ http://code.msdn.microsoft.com/mag201008UF.aspx ]
就在过去几年，多点触控还只是科幻电影中表现未来主义的一种重要手法，现在俨然已经成为主
流的用户界面技术。 多点触控显示屏现在成了新型智能手机和
Tablet 计算机的标准显示屏。 此外，它还可能在公
共场所的计算机上普及，例如
Microsoft Surface 率先开发的网亭或桌面计算机。
实际存在的唯一不确定因素是多点触控在常规台式计算机上的普及。 这种普及的最大障碍或许是长时间在垂直屏幕
上移动手指所产生的疲劳（称为“大猩猩手臂”）。 我个人希望多点触控的强大功能将切实推进桌面显示屏的重新
设计。 我们可以设想台式计算机的显示屏可能类似于配置制图桌，并且可能和制图桌一样大。
但那可能发生在遥远的未来。 目前，开发人员需要掌握新的
API。
Windows 7 中的多点触控支持已通过低级别和
高级别的接口渗透并应用到
Microsoft .NET Framework 的各个领域。
了解多了解多点点触控支持控支持
如果您考虑到在显示屏上使用多根手指可能引起表达的复杂性，您或许就会了解为何到现在还没有人确切知道多点
触控的“正确”编程接口。 这需要一定时间。 同时，您具有若干选择。
Windows Presentation Foundation (WPF) 4.0 为在
Windows 7 下运行的程序提供了两个多点触控接口。 为了专
门使用多点触控，程序员希望探索低级别接口，该接口包含由
UIElement 定义的多个路由事件（名为
TouchDown、
TouchMove、
TouchUp、
TouchEnter 和
TouchLeave）以及向下、移动和向上事件的预览版本。 显
然，这些事件是根据鼠标事件建模的，但需要一个整数
ID 属性来跟踪显示屏上的多根手指。
Microsoft Surface 在
WPF 3.5 的基础上构建，不过它支持范围更广的低级别触控接口，可区分触控输入的类型和形状。
本专栏的主题是
WPF 4.0 中的高级别多点触控支持，它包含一个名称以“
Manipulation”一词开头的事件的集合。
这些操作事件执行多个关键的多点触控作业：
将两根手指的交互合并成单个操作
将一根或两根手指的移动解析成转换
在手指离开屏幕时实现延时
Silverlight 4 文档中列出了部分操作事件，但可能会让读者产生一丝迷惑。
Silverlight 本身不支持这些事件，但针
对
Windows Phone 7 编写的
Silverlight 应用程序则支持这些事件。 图
1 列出了这些操作事件。
图
1 Windows Presentation Foundation 4.0 中的操作事件
©2010 Microsoft Corporation. All rights reserved.
事件事件
是否受
Windows Phone 7 支持支持？？
ManipulationStarting 不能
ManipulationStarted 能
ManipulationDelta 能
基于
Web 的
Silverlight 4 应用程序将继续使用
Touch.FrameReported 事件，我曾在
2010 年
3 月出版的
MSDN
杂志“手指之舞：探讨
Silverlight 中的多点触控支持”一文中探讨过该事件。
除操作事件本身以外，
WPF 中的
UIElement 类还支持与操作事件对应的可覆盖方法，例如，
On-
ManipulationStarting。 在
Silverlight for Windows Phone 7 中，这些可覆盖方法由
Control 类定义。
多点触控示例控示例
照片查看器可能是多点触控的典型应用，在照片查看器中，您可以在一个平面上移动照片，用两根手指放大或缩小
照片以及旋转照片。 这些操作有时称为平移、缩放和旋转，它们分别对应于平移、缩放和旋转的标准图形转换。
很明显，照片查看程序需要维护照片集合，支持添加新照片和删除照片，并且最好能始终在一个较小的图形帧中显
示多张照片，但我准备忽略所有这些方面，而着重介绍多点触控交互。 有了操作事件，一切都变得非常简单，这让
我感到非常吃惊，我相信你们也会有同感。
本专栏的所有源代码位于一个名为
WpfManipulationSamples 的可下载解决方案中。 第一个项目是
SimpleManipulationDemo，
MainWindow.xaml 文件在图
2 中显示。
图
2 SimpleManipulationDemo 的
XAML 文件
首先，请注意所有三个
Image 元素上的设置： ManipulationInertiaStarted 不能
ManipulationBoundaryFeedback 否
ManipulationCompleted 是
复制代码
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Simple Manipulation Demo">
IsManipulationEnabled="True"
RenderTransform="0.5 0 0 0.5 100 100" />
IsManipulationEnabled="True"
RenderTransform="0.5 0 0 0.5 200 200" />
IsManipulationEnabled="True"
RenderTransform="0.5 0 0 0.5 300 300" />
IsManipulationEnabled="True"
RenderTransform="0.5 0 0 0.5 400 400" />
默认情况下，此属性为
false。 对于您希望在其上获得多点触控输入并生成操作事件的任何元素，您必须将其设置
为
true。
操作事件是
WPF 路由事件，这意味着这些事件会使可视化树浮现出来。 在此程序中，
Grid 和
MainWindow 的
IsManipulationEnabled 属性均未设置为
true，但您仍可将操作事件的处理程序附加至
Grid 和
MainWindow 元
素，或者在
MainWindow 类中覆盖
OnManipulation 方法。
另请注意，每个
Image 元素将其
RenderTransform 设置为一个六位数的字符串：
这是设置已初始化的
MatrixTransform 对象的
RenderTransform 属性的快捷方式。 在此特定示例中，设置为
MatrixTransform 的
Matrix 对象已经过初始化，可执行
0.5 个单位的缩放（使照片缩小至实际大小的一半）和朝
右下方的
100 个单位的平移。 该窗口的代码隐藏文件会访问并修改此
MatrixTransform。
图
3 显示了完整的
MainWindow.xaml.cs 文件，该文件仅覆盖两个方法，即
OnManipulationStarting 和
OnManipulationDelta。 这些方法处理由
Image 元素生成的操作。
图
3 SimpleManipulationDemo 的代的代码隐码隐码隐藏文件藏文件 复制代码IsManipulationEnabled="True"
复制代码RenderTransform="0.5 0 0 0.5 100 100"
复制代码
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
namespace SimpleManipulationDemo {
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
}
protected override void OnManipulationStarting(
ManipulationStartingEventArgs args) {
args.ManipulationContainer = this;
// Adjust Z-order
FrameworkElement element =
args.Source as FrameworkElement;
Panel pnl = element.Parent as Panel;
for (int i = 0; i < pnl.Children.Count; i++)
Panel.SetZIndex(pnl.Children[i],
pnl.Children[i] ==
element ? pnl.Children.Count : i);
args.Handled = true;
base.OnManipulationStarting(args);
}
protected override void OnManipulationDelta(
ManipulationDeltaEventArgs args) {
UIElement element = args.Source as UIElement;
MatrixTransform xform =
element.RenderTransform as MatrixTransform;
