WPF - Multi Touch

Windows 7 e le sue versioni successive hanno la capacità di ricevere input da più dispositivi sensibili al tocco. Le applicazioni WPF possono anche gestire l'input tocco come altro input, ad esempio il mouse o la tastiera, generando eventi quando si verifica un tocco.

WPF espone due tipi di eventi quando si verifica un tocco: touch events e manipulation events. Gli eventi touch forniscono dati grezzi su ogni dito su un touchscreen e sul suo movimento. Gli eventi di manipolazione interpretano l'input come determinate azioni. Entrambi i tipi di eventi vengono discussi in questa sezione.

I seguenti componenti sono necessari per sviluppare un'applicazione in grado di rispondere al tocco.

• Microsoft Visual Studio 2010 o versioni successive.
• Windows 7 o versione successiva.
• Un dispositivo, come un touchscreen, che supporta Windows Touch.

I seguenti termini sono comunemente usati quando si discute dell'input tattile:

• Touch- Tipo di input dell'utente che può essere riconosciuto in Windows 7 o versioni successive. L'input tattile viene avviato da uno schermo sensibile al tocco.

• Multi Touch- Tipo di ingresso che avviene da più punti contemporaneamente. In WPF, quando si parla di tocco, di solito significa multi-touch.

• Manipulation- Si verifica quando il tocco viene dedotto come azione fisica applicata a un oggetto. In WPF, gli eventi di manipolazione interpretano l'input come una manipolazione di traslazione, espansione o rotazione.

• Touch Device - Rappresenta un dispositivo che produce input tattile, come un singolo dito su un touchscreen.

Esempio

Per comprendere tutti questi concetti, creiamo un nuovo progetto WPF con il nome WPFTouchInput.

• Trascina un rettangolo da una casella degli strumenti alla finestra di progettazione e riempi il rettangolo con un'immagine o qualsiasi colore. Se vuoi usare un'immagine, non dimenticare di includere l'immagine nella tua soluzione, altrimenti il ​​programma non verrà eseguito.

• Il codice XAML seguente inizializza un rettangolo con proprietà ed eventi diversi.

<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>

Ecco l'implementazione per diversi eventi di manipolazione:

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; 
      } 
		
   } 
}

Quando compili ed esegui il codice precedente, verrà prodotto il seguente widnow.

Ora puoi ruotare, ingrandire, rimpicciolire questa immagine con il dito sul touch screen.