locked
FAQ: 如何在 WPF 4 中使用触控和操作? RRS feed

  • 问题

  • 为了帮助大家更好地学习 WPF 技术,微软论坛技术支持团队编辑了一些列的 "WPF 常见问题及解答" 精华帖。

    本帖的主题是:如何在 WPF 4 中使用触控和操作?

    如果您觉得这个帖子对您的学习、工作有所帮助,请再把这个帖子分享给你的同学、同事和朋友。

    如果您想阅读更多的 "WPF 常见问题及解答",请打开索引页面:

    如果您对我们的论坛在线支持服务有任何的意见或建议,请通过邮件告诉我们。
    2011年1月26日 13:58

答案

  • WPF 4, 我们有基本的触摸事件供我们使用: TouchDownEvent, TouchEnterEvent, TouchLeaveEvent, TouchMoveEvent, TouchUpEvent. 并且这些触摸事件支持 UIElement, UIElement3D ContentElement. 因此我们可以处理这些事件去描绘形状和元素,或者在代码中使用特殊的操作实现多点触摸.

    一个简单的示例:

    XAML:

    <Canvas x:Name="canvas"

        TouchDown="canvas_TouchDown"

        TouchMove="canvas_TouchMove"

        TouchUp="canvas_TouchUp"/>

    Code:

    public MainWindow()

    {

      InitializeComponent();

      shapes = new Dictionary();

    }

     

    private void canvas_TouchDown(object sender, TouchEventArgs e)

    {

      var shape = CreateShape();

      var origin = e.GetTouchPoint(canvas);

      shape.RenderTransform = new TranslateTransform(origin.Position.X - shape.RenderSize.Width / 2,

      origin.Position.Y - shape.RenderSize.Height / 2);

      shapes.Add(e.TouchDevice, shape);

      // Add the shape to the canvas

      canvas.Children.Add(shape);

      canvas.InvalidateVisual();

      canvas.CaptureTouch(e.TouchDevice);

    }

     

    private void _canvas_TouchMove(object sender, TouchEventArgs e)

    {

      if (e.TouchDevice.Captured == canvas)

      {

        var shape = shapes[e.TouchDevice];

        var origin = e.GetTouchPoint(canvas);

     

        shape.RenderTransform = new TranslateTransform(origin.Position.X - shape.RenderSize.Width / 2,

        origin.Position.Y - shape.RenderSize.Height / 2);

      }

    }

     

    private void canvas_TouchUp(object sender, TouchEventArgs e)

    {

      canvas.ReleaseTouchCapture(e.TouchDevice);

      canvas.Children.Remove(shapes[e.TouchDevice]);

      shapes.Remove(e.TouchDevice);

    }

    对于操作,我们可以对ManipulationStarted, ManipulationDelta, ManipulationStarting, ManipulationCompleted 事件进行处理,然后通过处理ManipulationDelta事件去响应由手指移动所产生的变化。这里有一个来自于Anson Tsao的博客文章的简单样例

    XAML:

    <Canvas x:Name="_canvas"   

        ManipulationStarting="_canvas_ManipulationStarting"   

        ManipulationDelta="_canvas_ManipulationDelta">

      <Rectangle IsManipulationEnabled="True" Fill="Red" Width="100" Height="100"/>

    </Canvas>

    Code:

    private void _canvas_ManipulationStarting(object sender, ManipulationStartingEventArgs e)

    {

      e.ManipulationContainer = _canvas;

      e.Handled = true;

    }

     

    private void _canvas_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)

    {

      var element = e.OriginalSource as UIElement;

      var transformation = element.RenderTransform as MatrixTransform;

      var matrix = transformation == null Matrix.Identity : transformation.Matrix;

     

      matrix.ScaleAt(e.DeltaManipulation.Scale.X,

              e.DeltaManipulation.Scale.Y,

              e.ManipulationOrigin.X,

              e.ManipulationOrigin.Y);

     

      matrix.RotateAt(e.DeltaManipulation.Rotation,

              e.ManipulationOrigin.X,

              e.ManipulationOrigin.Y);

     

      matrix.Translate(e.DeltaManipulation.Translation.X,

               e.DeltaManipulation.Translation.Y);

     

      element.RenderTransform = new MatrixTransform(matrix);

      e.Handled = true;

    }

    大家可以参考如下资源以获取更多信息:

    ·     MDSN 示例 -创建您的第一个触控应用程序http://msdn.microsoft.com/zh-cn/library/ee649090.aspx  

    ·     Jaime Rodriguez's 的博客 介绍WPF4的多点触摸: http://blogs.msdn.com/b/jaimer/archive/2009/11/04/introduction-to-wpf-4-multitouch.aspx

    ·     Anson Tsao's 的博客 介绍WPF 4的多点触摸: http://blogs.msdn.com/b/ansont/archive/tags/multitouch/


    如果您对我们的论坛在线支持服务有任何的意见或建议,请通过邮件告诉我们。
    2011年1月26日 13:59