WPF - 多點觸控

Windows 7 及其更高版本能夠接收來自多個觸敏裝置的輸入。WPF 應用程式還可以像處理滑鼠或鍵盤等其他輸入一樣處理觸控輸入，在發生觸控時引發事件。

當發生觸控時，WPF 會公開兩種型別的事件 - **觸控事件** 和 **操作事件**。觸控事件提供有關觸控式螢幕上每個手指及其移動的原始資料。操作事件將輸入解釋為某些操作。本節將討論這兩種型別的事件。

開發能夠響應觸控的應用程式需要以下元件。

• Microsoft Visual Studio 2010 或更高版本。
• Windows 7 或更高版本。
• 支援 Windows Touch 的裝置，例如觸控式螢幕。

在討論觸控輸入時，通常會使用以下術語 -

• **觸控** - 在 Windows 7 或更高版本中可以識別的使用者輸入型別。觸控輸入由觸敏螢幕發起。

• **多點觸控** - 來自多個點同時發生的輸入型別。在 WPF 中，當討論觸控時，通常是指多點觸控。

• **操作** - 當觸控被推斷為應用於物件的物理動作時發生。在 WPF 中，操作事件將輸入解釋為平移、擴充套件或旋轉操作。

• **觸控裝置** - 代表產生觸控輸入的裝置，例如觸控式螢幕上的單個手指。

示例

為了理解所有這些概念，讓我們建立一個名為 WPFTouchInput 的新 WPF 專案。

• 從工具箱中將一個矩形拖到設計視窗，並用影像或任何顏色填充矩形。如果要使用影像，請不要忘記將影像包含在您的解決方案中，否則程式將無法執行。

• 以下 XAML 程式碼使用不同的屬性和事件初始化一個矩形。

<Window x:Class = "WPFMultiTouchInput.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace:WPFMultiTouchInput" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <Window.Resources> 
      <MatrixTransform x:Key = "InitialMatrixTransform"> 
         <MatrixTransform.Matrix> 
            <Matrix OffsetX = "200" OffsetY = "200"/> 
         </MatrixTransform.Matrix> 
      </MatrixTransform> 
   </Window.Resources> 
	
   <Canvas> 
      <Rectangle Name = "manRect" Width = "321" Height = "241"  
         RenderTransform = "{StaticResource InitialMatrixTransform}" 
         IsManipulationEnabled = "true" Canvas.Left = "-70" Canvas.Top = "-170">
         <Rectangle.Fill> 
            <ImageBrush ImageSource = "Images/DSC_0076.JPG"/> 
         </Rectangle.Fill> 
      </Rectangle> 
   </Canvas>
	
</Window> 

以下是不同操作事件的實現 -

using System.Windows; 
using System.Windows.Input; 
using System.Windows.Media; 
using System.Windows.Shapes; 
 
namespace WPFMultiTouchInput { 

   public partial class MainWindow : Window {
	
      public MainWindow() { 
         InitializeComponent(); 
      } 
		
      void Window_ManipulationStarting(object sender, ManipulationStartingEventArgs e) { 
         e.ManipulationContainer = this; 
         e.Handled = true; 
      } 
		
      void Window_ManipulationDelta(object sender, ManipulationDeltaEventArgs e) { 
         Rectangle rectToMove = e.OriginalSource as Rectangle; 
         Matrix rectsMatrix = ((MatrixTransform)rectToMove.RenderTransform).Matrix;
			
         rectsMatrix.RotateAt(e.DeltaManipulation.Rotation, e.ManipulationOrigin.X, e.ManipulationOrigin.Y); 
			
         rectsMatrix.ScaleAt(e.DeltaManipulation.Scale.X, e.DeltaManipulation.Scale.X, 
            e.ManipulationOrigin.X, e.ManipulationOrigin.Y); 
				
         rectsMatrix.Translate(e.DeltaManipulation.Translation.X,
            e.DeltaManipulation.Translation.Y);
				
         rectToMove.RenderTransform = new MatrixTransform(rectsMatrix);  
         Rect containingRect = new Rect(((FrameworkElement)e.ManipulationContainer).RenderSize); 
			
         Rect shapeBounds = rectToMove.RenderTransform.TransformBounds(new Rect(rectToMove.RenderSize));  
			
         if (e.IsInertial && !containingRect.Contains(shapeBounds)) { 
            e.Complete(); 
         } 
			
         e.Handled = true; 
      } 
		
      void Window_InertiaStarting(object sender, ManipulationInertiaStartingEventArgs e) { 
         e.TranslationBehavior.DesiredDeceleration = 10.0 * 96.0 / (1000.0 * 1000.0); 
         e.ExpansionBehavior.DesiredDeceleration = 0.1 * 96 / (1000.0 * 1000.0); 
         e.RotationBehavior.DesiredDeceleration = 720 / (1000.0 * 1000.0); 
         e.Handled = true; 
      } 
		
   } 
} 

編譯並執行上述程式碼後，將生成以下視窗。

現在，您可以在觸控式螢幕上用手指旋轉、放大和縮小此影像。