Multi-Touch 多点触屏 时，如何滑动图片显示下一张图片

Question

我想在触摸屏上， 实现类似手机上的图片浏览。

使用了，Multi-Touch的 ManipulationStarting、ManipulationDelta、ManipulationInertiaStarting 事件

想要做到，控制缩放比例，最小1，最大2，当缩放到最小1时，滑动图片显示下一张图片。

我使用了这样来控制缩放比例，不知道对不对？

            if ((matrixTmp.M11 < 2) && (matrixTmp.M11 > 1))
            {
                matrix.ScaleAt(deltaManipulation.Scale.X, deltaManipulation.Scale.Y, center.X, center.Y);
            }

滑动图片显示下一张图片，该如何实现？

在滑动时，会多次触发ManipulationDelta事件，在什么时机显示下一张图片呢？？

 

代码

xaml------------------------------------

<Page x:Class="Images.Page2"
      xmlns="“
      xmlns:x=""
      xmlns:mc=""
      xmlns:d=""
      mc:Ignorable="d"
      d:DesignHeight="300" d:DesignWidth="300"  Loaded="Page_Loaded_1"
 Title="Page2">

cs:        -------------------------------------------------------------

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.IO;
using System.Collections;
using System.Windows.Media.Effects;

namespace Images
{
    /// <summary>
    /// Page2.xaml 的交互逻辑
    /// </summary>
    public partial class Page2 : Page
    {

        public int i = 0;
        public string str = "";
        bool state = false;
        public Point currentPosition;
        public int ncanvasImageW = 1000;
        public int nCurrID = 0;

        ArrayList newArrayList = new ArrayList();
        Image canvasImage = new Image();
        string gPath = "D:\\我的图片";

        public Page2()
        {
            InitializeComponent();
        }

        private void Page_Loaded_1(object sender, RoutedEventArgs e)
        {
          
            DirectoryInfo Dir = new DirectoryInfo(gPath);
            foreach (FileInfo file in Dir.GetFiles("*.jpg").OrderBy(f => f.Name))
            {
                str = file.ToString();
                newArrayList.Add(str);
            }
            nCurrID = 0;
            lstSel();
        }

        private void canvas_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {
            FrameworkElement element = (FrameworkElement)e.Source;
            Matrix matrix = ((MatrixTransform)element.RenderTransform).Matrix;

            //临时检测放大比例
            Matrix matrixTmp = ((MatrixTransform)element.RenderTransform).Matrix;

            ManipulationDelta deltaManipulation = e.DeltaManipulation;

            Point center = new Point(element.ActualWidth / 2, element.ActualHeight / 2);
            center = matrix.Transform(center);

            matrixTmp.ScaleAt(deltaManipulation.Scale.X, deltaManipulation.Scale.Y, center.X, center.Y);

            //控制缩放比例在 1~ 2 之间
            Console.WriteLine("matrixTmp.M11  " + matrixTmp.M11);
            if ((matrixTmp.M11 < 2) && (matrixTmp.M11 > 1))
            {
                matrix.ScaleAt(deltaManipulation.Scale.X, deltaManipulation.Scale.Y, center.X, center.Y);
            }

            matrix.Translate(e.DeltaManipulation.Translation.X, e.DeltaManipulation.Translation.Y);

            //matrix.RotateAt(e.DeltaManipulation.Rotation, center.X, center.Y);    不旋转

            ((MatrixTransform)element.RenderTransform).Matrix = matrix;

        }

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

        private void canvas_ManipulationInertiaStarting_1(object sender, ManipulationInertiaStartingEventArgs e)
        {
            e.TranslationBehavior.DesiredDeceleration = 0.0005;
        }

        private void lstSel()
        {
            if (nCurrID >= 0)
            {
                BitmapImage bitmapImage = new BitmapImage();

                bitmapImage.BeginInit();
                bitmapImage.UriSource = new Uri(gPath + "\\" + newArrayList[nCurrID].ToString());
                bitmapImage.EndInit();
                canvasImage.Source = bitmapImage;

                canvasImage.Width = ncanvasImageW;
                canvasImage.Height = ncanvasImageW;

                canvasImage.IsManipulationEnabled = true;
                canvasImage.RenderTransform = new MatrixTransform();

                Canvas.SetTop(canvasImage, (this.ActualHeight - ncanvasImageW) / 2 - 50);
                Canvas.SetLeft(canvasImage, (this.ActualWidth - ncanvasImageW) / 2);

                if (!state)
                {
                    canvas.Children.Add(canvasImage);
                    state = true;

                }

            }

        }

    }
}

Answer 1

你好 xiaom08，

我这边没有任何touch的设备，没有办法帮你解决这个问题， 是在不好意思。

---

Sheldon _Xiao
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

你好

给你个思路是这样的,你定义一个bool类型的变量比如canManipulate默认为true,这个值根据你元素的缩放比例来改变,<=1的时候为true,else 为false,

每次进入 canvas_ManipulationDelt时,先判断元素的缩放率,这样来改变canManipulate,

当canManipulate=false的时候,可以进行缩放和旋转操作,但不能进行移动.

然后再定义一个bool类型的变量比如canTurnImage = false,当canManipulate=false,你需要判断手的移动距离(或者移动距离和速度结合来判断),比如,如果在0.3秒内,移动超过100,那么就满足了更换图片的条件,那么canTurnImage = true.

然后你需要注册一个 ManipulationComplated 在手离开的时候去更换图片,当然你需要满足上面的条件 if(canTurnImage){//这里是更换图片的过程,你可以用动画来作,那么动画是有个过程的,这个过程中,再次满足条件的话,不能再去换图片,要等这张换完了才行,所以,要在这里把canTurnImage设置为false,就不会走进来了.更换图片可以用Effect来作,这样更换的效果会更好}

提供的思路就这么多.下面做个小广告.

我建了QQ群,我本身是做WPF的,公司做WPF效果和展示方面的内容较多.

如果有兴趣的话,可以加QQ群:204882221

---

与我交流:

Answer 3

Hi, 如果我假设你使用最新的.NET Framework和WPF（更低的版本实际上也可以使用，只是我的Project就是最高版本的，懒得修改），我或许有一个正在研究的事情可以帮助你。注意，Windows 8自带这个版本的.NET Framework。

此作品打算录制一个Webcast，由于我还没准备好，所以暂时只能给你看一下效果，如果你用ilspy.exe反编译此文件我也没意见:-)，以下是一个可能的实现，它采取Windows 应用商店应用中的“语义缩放”的概念，并将其移植到WPF上。如果它meets你的需求，则请回复我，以便届时在我打算录制的Webcast可用时通知你。

另外说明一下，没有触控设备仍然可以调试二点触控程序，VS2012附带的Windows 模拟器可以完成模拟二点触控的事情。

此项目的编译过的版本在SkyDrive上，以下是地址：http://sdrv.ms/16MEyAX

Answer 4

你好，你得滑动 反动图片，没必要启动多点触控，用TouchMove，就可以实现。我做过像你说的这种，详细 请联系我哈！