原文 WPF Multi-Touch 开发:高级触屏操作(Manipulation)

上一篇中我们对基础触控操作有了初步了解,本篇将继续介绍触碰控制的高级操作(Manipulation),在高级操作中包含了一些特殊的触屏手势:平移、缩放、旋转,当然在WPF 中无需自行开发这些手势,只需将UI 控件的IsManipulationEnabled 属性激活,并通过以下四种事件完成各种触屏手势操作:ManipulationStarting、ManipulationStarted、ManipulationDelta、ManipulationInertiaStarting、ManipulationCompleted,下图为各事件之间的工作顺序及关系。

创建项目

新建项目在XAML 程序中写入下面代码,为<Canvas>设置ManipulationStarting、ManipulationDelta、ManipulationCompleted 事件,并在其中添加三张图片,将Image 的IsManipulationEnabled 属性均为"True",同时所有的Image 都添加了<MatrixTransform>对象,用于组合平移、缩放、旋转操作。

<Window x:Class="WpfManipulation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="600">
<Grid>
<Canvas x:Name="touchPad" Background="Gray"
ManipulationStarting="image_ManipulationStarting"
ManipulationDelta="image_ManipulationDelta"
ManipulationCompleted="image_ManipulationCompleted">
<Image Canvas.Top="52" Canvas.Left="34" Width="200"
IsManipulationEnabled="True" Source="Images/P1.jpg">
<Image.RenderTransform>
<MatrixTransform></MatrixTransform>
</Image.RenderTransform>
</Image>
<Image Canvas.Top="75" Canvas.Left="339" Width="200"
IsManipulationEnabled="True" Source="Images/P2.jpg">
<Image.RenderTransform>
<MatrixTransform></MatrixTransform>
</Image.RenderTransform>
</Image>
<Image Canvas.Top="243" Canvas.Left="168" Width="200"
IsManipulationEnabled="True" Source="Images/P3.jpg">
<Image.RenderTransform>
<MatrixTransform></MatrixTransform>
</Image.RenderTransform>
</Image>
</Canvas>
</Grid>
</Window>

当触碰到Image 图片时,image_ManipulationStarting 事件将会自动触发,首先需要定义ManipulationContainer(即为touchPad<Canvas>),该容器的主要用于定义参考坐标,图片的任何操作均以参考坐标为准。ManipulationModes 设置可以限制哪些手势操作是程序允许的,如果没有特殊情况可设置为"All"。

private void image_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
{
e.ManipulationContainer = touchPad;
e.Mode = ManipulationModes.All;
}

ManipulationDelta 事件会在手势操作开始时触发,并且该手势需持续进行不得间断。通过FrameworkElement 获得接受操作的图片控件,将图片透明度降低到0.5,创建Matrix 用于控制图片MatrixTransform,利用Point 获得图片中心坐标点,通过ScaleAt、RotateAt、Translate 执行缩放、旋转、平移操作。

private void image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
FrameworkElement element = (FrameworkElement)e.Source;
element.Opacity = 0.5; Matrix matrix = ((MatrixTransform)element.RenderTransform).Matrix; var deltaManipulation = e.DeltaManipulation; Point center = new Point(element.ActualWidth / 2, element.ActualHeight / 2);
center = matrix.Transform(center); matrix.ScaleAt(deltaManipulation.Scale.X, deltaManipulation.Scale.Y, center.X, center.Y); matrix.RotateAt(e.DeltaManipulation.Rotation, center.X, center.Y); matrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y); ((MatrixTransform)element.RenderTransform).Matrix = matrix;
}

最后,当手指离开触摸屏即操作结束,image_ManipulationCompleted 事件触发,将图片透明度重新调整为1。

private void image_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
FrameworkElement element = (FrameworkElement)e.Source;
element.Opacity = 1;
}

程序演示

相关文章

1. WPF Multi-Touch 开发:Windows 7 安装多点触屏模拟器 
2. WPF Multi-Touch 开发:基础触屏操作(Raw Touch)

源码下载

WpfManipulation.zip

作者:李敬然(Gnie)
出处:{GnieTech} (http://www.cnblogs.com/gnielee/)
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。

WPF Multi-Touch 开发:高级触屏操作(Manipulation)的更多相关文章

  1. WPF Multi-Touch 开发:基础触屏操作(Raw Touch)

    原文 WPF Multi-Touch 开发:基础触屏操作(Raw Touch) 多点触控(Multi-Touch)就是通过与触屏设备的接触达到人与应用程序交互的操作过程.例如,生活中经常使用的触屏手机 ...

  2. JS的Touch事件们,触屏时的js事件

    丫的,终于找到了JS在平板电脑上的事件!!!   iphone.ipod Touch.ipad触屏时的js事件   1.Touch事件简介   pc上的web页面鼠标会产生onmousedown.on ...

  3. iphone、ipod Touch、ipad触屏时的js事件

    1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 ipho ...

  4. html5 touch事件实现触屏页面上下滑动(二)

    五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

  5. unity3d触屏操作对象运动

    using UnityEngine; using System.Collections; public class robot : MonoBehaviour { private GameObject ...

  6. 使用C#开发Metro 风格应用的路线图 -- 触屏操作

    原文 http://www.cnblogs.com/icuit/archive/2012/05/01/2478312.html win8支持多点触摸技术,而我们在屏幕上所做的各种操作,也最终转换为输入 ...

  7. Appium常用操作之「微信滑屏、触屏操作」

    坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 目录 一.滑屏操作 1.访问之后,马上就滑屏可以吗? 2.连续实现 2 次滑屏 3.代码 二.模拟触屏 ...

  8. 基于appium的模拟单点或多点触屏操作

    一.单点触控 TouchAction类:将一系列的动作放在一个链条中,然后将该链条传递给服务器,服务器接受该链条后,解析各个动作,逐个执行,TouchAction类提供了以下几种方法: 短按:pres ...

  9. window7 触屏操作相关

    一.体系概述 1.Windows Touch Input 和 Gestures消息 Windows Touch消息特性 通过在执行期间的监听和解释来使能.下面的示例展示了Windows7 上消息是怎么 ...

随机推荐

  1. C-C Radar Installation 解题报告

    C-C    Radar Installation   解题报告 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=86640#pr ...

  2. BZOJ 1718: [Usaco2006 Jan] Redundant Paths 分离的路径( tarjan )

    tarjan求边双连通分量, 然后就是一棵树了, 可以各种乱搞... ----------------------------------------------------------------- ...

  3. JBPM6工作台使用Mysql数据库

    前面已经安装好jbpm了.现在进行数据库的替换.很简单: 1,修改 build.properties 原: # default is H2 H2.version=1.3.168 db.name=h2 ...

  4. javascript 学习随笔7

    <head> <title>标题页-学无忧(www.xue51.com)</title> <script language="JavaScript& ...

  5. 5.对象创建型模式-原型PROTOTYPE

    原型:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 原型实现:1.用于创建对象的具体类必须实现clone()操作,用于对象克隆自己以生成新的对象.下面通过原型来实现一个抽象工厂Ma ...

  6. 在verilog中关于inout口的设计方法

    在学习IIC的时候我们知道这么设计inout inout   scl : reg    scl_reg ,  scl_en ; scl  = scl_en ?   scl_reg : 1'dz ; 当 ...

  7. IT第八天 - 类的应用、debug、项目开发模式优化

    IT第八天 上午 类的应用 1.对象在实例化时是非常耗费系统资源的,因此要尽量减少new字段的使用 2.类的初始值是null,在使用未实例化的类时,很容易导致报错:NullExceptionPoint ...

  8. Js基础操作

    var a="zhangsan"; document.write(a+":I love JavaScrip"); a="lisi"; doc ...

  9. Servlet中通过过滤器实现统一的手动编码(解决中文乱码)

    1.web.xml片段: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi= ...

  10. VIM: 解决vi/vim中粘贴时行首出现很多缩进和空格的问题

    解决vi/vim中粘贴时行首出现很多缩进和空格的问题 http://www.jbxue.com/LINUXjishu/12232.html 由于在secureCRT中会将原来的文本原封不动的按照字符串 ...