日期:2010-01-29  浏览次数:20373 次

就在过去几年,多点触控还只是科幻电影中表现未来主义的一种重要手法,现在俨然已经成为主流的用户界面技术。 多点触控显示屏现在成了新型智能手机和 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 中的操作事件

事件 是否受 Windows Phone 7 支持?
ManipulationStarting 不能
ManipulationStarted
ManipulationDelta
ManipulationInertiaStarted 不能
ManipulationBoundaryFeedback
ManipulationCompleted

  基于 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 文件

<Window x:Class="SimpleManipulationDemo.MainWindow" 
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
 Title="Simple Manipulation Demo"> 
 
 <Window.Resources> 
  <Style TargetType="Image"> 
   <Setter Property="Stretch" Value="None" /> 
   <Setter Property="HorizontalAlignment" Value="Left" /> 
   <Setter Property="VerticalAlignment" Value="Top" /> 
  </Style> 
 </Window.Resources> 
 
 <Grid> 
  <Image Source="Images/112-1283_IMG.JPG"  
   IsManipulationEnabled="True" 
   RenderTransform="0.5 0 0 0.5 100 100" /> 
 
  <Image Source="Images/139-3926_IMG.JPG" 
   IsManipulationEnabled="True" 
   RenderTransform="0.5 0 0 0.5 200 200" /> 
     
  <Image Source="Images/IMG_0972.JPG" 
   IsManipulationEnabled="True" 
   RenderTransform="0.5 0 0 0.5 300 300" /> 
     
  <Image Source="Images/IMG_4675.JPG" 
   IsManipulationEnabled="True" 
   RenderTransform="0.5 0 0 0.5 400 400" /> 
 </Grid> 
 </Window>

  首先,请注意所有三个 Image 元素上的设置:

IsManipulationEnabled="True"

  默认情况下,此属性为 false。 对于您希望在其上获得多点触控输入并生成操作事件的任何元素,您必须将其设置为 true。

  操作事件是 WPF 路由事件,这意味着这些事件会使可视化树浮现出来。 在此程序中,Grid 和 MainWindow 的 IsManipulationEnabled 属性均未设置为 true,但您仍可将操作事件的处理程序附加至 Grid 和 MainWindow 元素,或者在 MainWindow 类中覆盖 OnManipulation 方法。

  另请注意,每个 Image 元素将其 Render­Transform 设置为一个六位数的字符串: