[WPF] Un ScatterView multitouch sans WPF 4 et sans écran multitouch : c’est possible
J’ai enfin pris le temps de m’attarder sur le multitouch dans Windows 7 et notamment sur l’exemple fournit par le Training Kit (qui, au passage, est téléchargeable sur cette page), et je n’ai pas été déçu car celui-ci renferme une petite merveille : deux librairies permettant de faire du multitouch en code managé sans passer par du WPF 4 ! (what else ?)
Je me suis donc inspiré de l’exemple fournit avec le Training Kit proposant de visualiser des images en les faisant tourner, en zoomant etc. pour faire un vrai contrôle dérivant de ItemsControl et donc bindable, capable d’afficher tout type de visuel sous la forme d’un ScatterView.
Comment utiliser le contrôle :
<mt:ScatterView x:Name="scatterView" ItemsSource="{Binding Path=Pictures}" />Dans le cas présent, Pictures est une ObservableCollection<Image> chargée par mon ViewModel.
La classe ScatterView dérive donc de ItemsControl. Le type des items conteneurs enfants est ScatterViewItem. C’est lui qui embarque le “ManipulationInertiaProcessor” fournit par la librairie Windows7.Multitouch.dll disponible dans le TrainingKit et qui permet sur la fin d’une manipulation de récupérer :
- Le delta de l’angle de rotation
- Le delta de la modification d’echelle
- Le delta de la translation de l’élement
Le template de base d’un ScatterViewItem est le suivant :
<Style TargetType="{x:Type local:ScatterViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ScatterViewItem}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
RenderTransformOrigin="0.5, 0.5">
<Border.RenderTransform>
<TransformGroup x:Name="transformGroup">
<RotateTransform x:Name="rotateTransform" />
<ScaleTransform x:Name="scaleTransform" />
<TranslateTransform x:Name="translateTransform" />
</TransformGroup>
</Border.RenderTransform>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>Vous aurez compris que pour l’instant une modification du template sans l’ajout des trois transformations RotateTransform, ScaleTransform et TranslateTransform risque de perturber pas mal le fonctionnement du contrôle. Je tâcherai d’améliorer ce point dans une prochaine version.
Le contrôle est utilisable que si vous avez une machine compatible Multitouch, dans le cas contraire, une exception est levée dans le constructeur statique du ScatterView :
if (!Windows7.Multitouch.TouchHandler.DigitizerCapabilities.IsMultiTouchReady)
{
throw new PlatformNotSupportedException("The ScatterView [...] a multitouch screen.");
}Vous n’avez pas d’écran multitouch ? Ca tombe bien, moi non plus ! Cela me permet de vous faire découvrir (si vous ne connaissez pas déjà) un projet CodePlex fort intéressant et pratique nommé MTVista. Derrière ce nom se cache toute une batterie de drivers et services permettant d’émuler du multitouch sous Windows Vista et Windows 7 (donc compatible avec le nouveau message Windows WM_TOUCH !).
Comment ça marche ? Une fois téléchargé, exécutez le script cmd “Install Driver.cmd” situé dans le répertoire Drivers/{votreArchitecture}. N’ayez pas peur pour le warning, bien que le driver ne soit pas signé aucun souci rencontré.
En suite, la tâche est assez simple puisqu’il vous suffit de lancer les uns après les autres les exécutables suivants :
- Multitouch.Service.Console.exe
- Multitouch.Driver.Console.exe
- Multitouch.Configuration.WPF.exe
Ce dernier ouvre une fenêtre permettant de configurer le driver multitouch. Lorsque vous aurez connecté deux souris à votre machine (trackpad + souris usb sur un laptop fonctionnent) cliquez sur “Configure Device” :
Dans la fenêtre qui s’ouvre cochez la case en haut à gauche. Cela vous permettra de passer en mode “MultiTouch” sans écran adéquate :)
Et pour finir, une petite démo en vidéo :
Bon ok, c’est pas les mêmes sensations que du multitouch réel, mais ça permet de tester sans avoir un écran MT à dispo ;)
Concernant le contrôle, il y a des petites choses à améliorer / apporter, notamment l’algo de placement des items à la création qui est pas encore tip/top. Donc si vous avez des remarques, je suis tout ouïe !
A bientôt 
Sources : Beedoo.WPF.Multitouch.Controls.zip (933,91 kb)