WPF之Manipulation

原文:WPF之Manipulation

需求:现,在窗口下有一个StackPanel控件.

　　1.可以拖动.

　　2.可以展开及收缩(不仅仅可以拖动还可以点击)

　　3.窗口向坐标轴一样分四个象限,在不同的区域停靠在不同的地方(四个角).

第一阶段:

　　我遇到的问题:

　　1.起初完成的时候发现StackPanel拖动的时候一直发疯一样的抖,

　　　解决方法:ManipulationStarting事件中,e.ManipulationContainer = this.myGrid,容器要父控件,我原先写成自己本身了.

　　2.为啥写了之后触控点不动?

　　　解决发发:查看构造函数中myStackPanel.RenderTransform = new MatrixTransform(),但是这样做会给后面留下新的问题,花了我一天时间找出这处.后面详述.

 Xaml's code:

 <Window x:Class="LearnWpf.ManipulationDemo"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="ManipulationDemo" Height="300" Width="300">
     <Grid x:Name="myGrid">
         <StackPanel x:Name="myStackPanel"
                     Background="Red" Height="50" Width="50"
                     ManipulationStarting="StackPanel_ManipulationStarting"
                     ManipulationDelta="StackPanel_ManipulationDelta"
                     ManipulationCompleted="StackPanel_ManipulationCompleted"
                     />
     </Grid>
 </Window>

 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.Shapes;

 namespace LearnWpf
 {
     /// <summary>
     /// ManipulationDemo.xaml 的交互逻辑
     /// </summary>
     public partial class ManipulationDemo : Window
     {
         public ManipulationDemo()
         {
             InitializeComponent();
             myStackPanel.RenderTransform = new MatrixTransform();
             myStackPanel.IsManipulationEnabled = true;
         }

         private void StackPanel_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
         {
             StackPanel element = (StackPanel)e.OriginalSource;
             e.ManipulationContainer = this.myGrid;
             e.Mode = ManipulationModes.All;
         }

         private void StackPanel_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
         {
             FrameworkElement element = (FrameworkElement)e.Source;
             Matrix matrix = ((MatrixTransform)element.RenderTransform).Matrix;
             ManipulationDelta deltaManipulation = e.DeltaManipulation;
             Point center = new Point(element.ActualWidth / , element.ActualHeight / );
             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;
         }

         private void StackPanel_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
         {

         }
     }
 }

第二阶段:

<这里我想把它推上首页了,因为很多地方肯定没有做好,希望各位提提宝贵意见,还有一些问题想请教大家.还有很多地方注释没有完善

,因为我是现写的,请大家多多包容>

　　上一章,我们完成了触控条件下的操作,但是现在有一个问题:鼠标肿么办?

　　解决方案:利用MouseLeftButtonDown,MouseMove,MouseLeftButtonUp写.

　　还有需求中的要点击怎么办?

　　解决方案:这个我是要肿么办呢?决定用Touch事件做了.但是感觉又跟Manipulation重复了.详情请看代码.Touch事件和Manipulation事件重复了,没有注释掉,可以注释掉Manipulation事件,各位亲自理.

　　遇到问题:当鼠标和触摸两个事件一起发生时,会发生一起奇怪的现象,我做了处理,但是不能够解决,各位大大有什么看法?　　

 <Window x:Class="LearnWpf.ManipulationDemo"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Title="ManipulationDemo" WindowState="Maximized" Height="300" Width="300" MouseLeftButtonDown="Window_MouseLeftButtonDown" MouseMove="Window_MouseMove" MouseLeftButtonUp="Window_MouseLeftButtonUp">
     <Grid x:Name="myGrid">
         <StackPanel x:Name="myStackPanel"
                     Background="Red" Height="200" Width="200"
                     ManipulationStarting="StackPanel_ManipulationStarting" ManipulationDelta="StackPanel_ManipulationDelta" ManipulationCompleted="StackPanel_ManipulationCompleted"
                     TouchDown="myStackPanel_TouchDown" TouchMove="myStackPanel_TouchMove" TouchUp="myStackPanel_TouchUp"/>
     </Grid>
 </Window>

 CSharp Code
  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.Shapes;

  namespace LearnWpf
  {
      /// <summary>
      /// ManipulationDemo.xaml 的交互逻辑
      /// </summary>
      public partial class ManipulationDemo : Window
      {
          FrameworkElement frameworkElement; //想要操纵的元素
          bool isFrameworkElementSelect; //想要用鼠标移动的元素是否被选中
          bool isMouse = false; //鼠标操作中
          bool isTouch = false; //触摸操作中
          public ManipulationDemo()
          {
              InitializeComponent();
              frameworkElement = this.myStackPanel;
              myStackPanel.RenderTransform = new MatrixTransform();
              myStackPanel.IsManipulationEnabled = true;
          }

          private void StackPanel_ManipulationStarting(object sender, ManipulationStartingEventArgs e)
          {
              frameworkElement = (FrameworkElement)e.OriginalSource;
              e.ManipulationContainer = this.myGrid;
              e.Mode = ManipulationModes.All;
              frameworkElement.Opacity = 0.5;
          }

          private void StackPanel_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
          {
              FrameworkElement element = (FrameworkElement)e.Source;
              Matrix matrix = ((MatrixTransform)element.RenderTransform).Matrix;
              ManipulationDelta deltaManipulation = e.DeltaManipulation;
              Point center = new Point(element.ActualWidth / , element.ActualHeight / );
              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;
          }

          private void StackPanel_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
          {
              frameworkElement.Opacity = ;
          }

          #region 坐标的相关变量定义
          double dx; //x轴方向的每次移动的距离
          double dy; //y轴方向每次移动的距离

          double tdx; //x轴方向的每次移动的总距离
          double tdy; //y轴方向的每次移动的总距离

          double opx; //旧的x轴的值
          double opy; //旧的y轴的值

          double npx; //新的x轴的值
          double npy; //新的y轴的值
          #endregion

          #region Touch事件
          private void myStackPanel_TouchDown(object sender, TouchEventArgs e)
          {
              if (isMouse) return;
              isTouch = true;

              tdx = ;
              tdy = ;

              Point p = e.GetTouchPoint(this).Position;
              opx = p.X;
              opy = p.Y;
          }
          private void myStackPanel_TouchMove(object sender, TouchEventArgs e)
          {
              if (isMouse) return;

              Point p = e.GetTouchPoint(this).Position;
              npx = p.X;
              npy = p.Y;
              dx = npx - opx;
              dy = npy - opy;
              opx = npx;
              opy = npy;

              tdx += Math.Abs(dx);
              tdy += Math.Abs(dy);
              Move(dx, dy);
          }
          private void myStackPanel_TouchUp(object sender, TouchEventArgs e)
          {
              if (isMouse) return;

              if (tdx <  || tdy < )
              {
                  Click();
              }

              isTouch = false;
          }
          #endregion

          /// <summary>
          /// 移动frameElement方法
          /// </summary>
          /// <param name="dx"></param>
          /// <param name="dy"></param>
          private void Move(double dx,double dy)
          {
              Matrix matrix = ((MatrixTransform)frameworkElement.RenderTransform).Matrix;
              matrix.Translate(dx, dy);
              this.frameworkElement.RenderTransform = new MatrixTransform(matrix);
          }

          /// <summary>
          /// Click触发的方法
          /// </summary>
          private void Click()
          {
              MessageBox.Show("U hurt me");
          }

          private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
          {
              if (isTouch) return;
              isMouse = true;

              tdx = ;
              tdy = ;

              frameworkElement.Opacity = 0.5;
              frameworkElement = (FrameworkElement)e.OriginalSource;
              isFrameworkElementSelect = true;
              Point p = e.GetPosition(this);
              opx = p.X;
              opy = p.Y;

          }

          private void Window_MouseMove(object sender, MouseEventArgs e)
          {
              if (isTouch) return;

              if (isFrameworkElementSelect)
              {
                  Point p = e.GetPosition(this);
                  npx = p.X;
                  npy = p.Y;
                  dx = npx - opx;
                  dy = npy - opy;
                  opx = npx;
                  opy = npy;

                  tdx += Math.Abs(dx);
                  tdy += Math.Abs(dy);
                  Move(dx, dy);
              }
          }

          private void Window_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
          {
              if (isTouch) return;

              frameworkElement.Opacity = ;
              isFrameworkElementSelect = false;
              if (tdx <  || tdy < )
              {
                  Click();
              }

              isMouse = false;
          }
      }
  }

11/15/2012 初次整理