WPF - Multi Touch

Windows 7 et ses versions supérieures ont la capacité de recevoir des entrées de plusieurs appareils tactiles. Les applications WPF peuvent également gérer l'entrée tactile comme une autre entrée, telle que la souris ou le clavier, en déclenchant des événements lorsqu'un contact se produit.

WPF expose deux types d'événements lorsqu'un contact se produit - touch events et manipulation events. Les événements tactiles fournissent des données brutes sur chaque doigt sur un écran tactile et son mouvement. Les événements de manipulation interprètent l'entrée comme certaines actions. Les deux types d'événements sont traités dans cette section.

Les composants suivants sont nécessaires pour développer une application capable de répondre au toucher.

  • Microsoft Visual Studio 2010 ou versions ultérieures.
  • Windows 7 ou version supérieure.
  • Un appareil, tel qu'un écran tactile, qui prend en charge Windows Touch.

Les termes suivants sont couramment utilisés lorsque la saisie tactile est abordée -

  • Touch- Type d'entrée utilisateur qui peut être reconnu dans Windows 7 ou version ultérieure. La saisie tactile est initiée à partir d'un écran tactile.

  • Multi Touch- Type d'entrée qui se produit à partir de plusieurs points simultanément. Dans WPF, lorsque le toucher est discuté, cela signifie généralement multi-touch.

  • Manipulation- Se produit lorsque le toucher est déduit comme une action physique appliquée à un objet. Dans WPF, les événements de manipulation interprètent l'entrée comme une manipulation de translation, d'expansion ou de rotation.

  • Touch Device - Représente un appareil qui produit une saisie tactile, comme un seul doigt sur un écran tactile.

Exemple

Pour comprendre tous ces concepts, créons un nouveau projet WPF avec le nom WPFTouchInput.

  • Faites glisser un rectangle d'une boîte à outils vers la fenêtre de conception et remplissez le rectangle avec une image ou une couleur. Si vous souhaitez utiliser une image, n'oubliez pas d'inclure l'image dans votre solution, sinon le programme ne s'exécutera pas.

  • Le code XAML suivant initialise un rectangle avec différentes propriétés et événements.

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

Voici l'implémentation pour différents événements de manipulation -

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

Lorsque vous compilez et exécutez le code ci-dessus, il produira la fenêtre suivante.

Vous pouvez maintenant faire pivoter, zoomer, effectuer un zoom arrière sur cette image avec votre doigt sur l'écran tactile.