[WPF] Les nouveautés de WPF 4 béta 1
Avec Visual Studio 2010 vient l’arrivée du Framework 4. Comme de nombreuses technologies, WPF hérite d’évolutions surtout orientées sur le multi-touch et le développement avec Windows 7.
Nous sommes actuellement à la version WPF4 béta 1. Des choses ont été annoncées mais ne sont pas encore disponibles. Dès la Béta 1 nous avons:
- L’ajout du contrôle DataGrid et DatePicker venant du toolkit
- Le easing function pour les animations (comme en Silverlight 3)
- Le support du multitouch
- Le déploiement avec Client Profile
Voici ce qu’il devrait arriver avec la béta 2:
- L’intégration totale avec le développement windows 7
- Le visual state manager
- La possibilité d’avoir des XBAP en Full-Trust
- etc…
Le développement Multi-Touch avec WPF4
Pour cet article, le matériel utilisé est un HP IQ820 Touch Smart permettant le dual touch grâce à des leds infrarouges.
Donc pas de détection de rotation du doigt et limitation à deux contacts en même temps.
A noter que le multi-touch de WPF4 est basé sur les mêmes API que Surface et sont donc compatibles.
Afin de permettre le multi-touch dans WPF4, nous avons:
- De nouveaux événements ont été ajoutés aux UIElements:
- De nouveaux contrôles tel que le ScatterView et la mise à jour pour le support du multi-touch du ScrollViewer
Premier test avec une image:
Après avoir ajouté votre Image dans un canvas, vous remarquerez qu’il existe une nouvelle propriété nommée “ManipulationMode” permettant de définir le type de multitouch que vous souhaitez capturer tels que:
- Translation en X et en Y
- Rotation
- Zoom/Dezoom
- Ou tout simplement toutes les manipulations possibles.
1: <Canvas>
2: <Image Source="Desert.jpg" Width="100" Height="100" ManipulationMode="All" />
3: </Canvas>
Puis il faut appliquer une matrice à notre image. Cette matrice nous permettra par la suite de modifier les coordonnées de l’image lors des manipulations.
1: <Window x:Class="WpfApplicationMultitouch.Window1"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Title="Window1" Height="600" Width="600">
5: <Canvas>
6: <Canvas.Resources>
7: <MatrixTransform x:Key="Matrice">
8: <MatrixTransform.Matrix>
9: <Matrix OffsetX="150" OffsetY="150"/>
10: </MatrixTransform.Matrix>
11: </MatrixTransform>
12: </Canvas.Resources>
13: <Image Source="Desert.jpg" RenderTransform="{StaticResource Matrice}" Width="300" Height="300" ManipulationMode="All" />
14: </Canvas>
15: </Window>
Maintenant direction l’événement “ManipulationDelta” de votre Image. Cet événement est déclenché dès qu’on manipule un UIElement et nous donne le delta des transformations réalisées.
Il faut donc mettre notre matrice à jour suivant les nouvelles coordonnées passées en paramètres de l’événement.
Voici le code, tiré du training kit de VS 2010:
1: private void Image_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)
2: {
3: //On récupère les nouvelles coordonnées par rapport au canvas principal
4: Manipulation m = e.GetDeltaManipulation(cnv);
5:
6: //On récupère l'image manipulée
7: Image monImage = e.OriginalSource as Image;
8:
9: //On en déduit sa matrice, on lui appliquera toutes les transformations
10: var matrix = ((MatrixTransform)monImage.RenderTransform).Matrix;
11:
12: var orgCenter = new Point(monImage.ActualWidth / 2, monImage.ActualHeight / 2);
13:
14: //Translation
15: matrix.Translate(m.Translation.X, m.Translation.Y);
16:
17: var center = matrix.Transform(orgCenter);
18:
19: //Rotation
20: matrix.RotateAt(m.Rotation, center.X, center.Y);
21:
22: center = matrix.Transform(orgCenter);
23:
24: //Zoom/Dezoom
25: matrix.ScaleAt(m.Scale, m.Scale, center.X, center.Y);
26:
27: //Application des modifications
28: monImage.RenderTransform = new MatrixTransform(matrix);
29: e.Handled = true;
30: }
A ce stade, votre image est compatible avec le multi-touch. Voici la vidéo du projet:
Cliquez pour lire la vidéo
Autre exemple avec le ScatterView de WPF, disponible de base dans Microsoft.Windows.Controls.
1: <Window x:Class="WpfApplicationMultitouch.Window2"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:s="clr-namespace:Microsoft.Windows.Controls;assembly=ScatterView"
5: Title="Window2" Height="300" Width="300">
6: <Grid>
7: <s:ScatterView>
8: <Image Source="Koala.jpg"/>
9: <Image Source="Tulips.jpg"/>
10: </s:ScatterView>
11: </Grid>
12: </Window>
Développement Windows 7
Comme je l’ai dit précédemment, WPF 4 va intégrer en natif la possibilité d’interagir avec Windows 7 avec:
- La taskbar
- Le ribbon
- Les dialogues windows 7
- Le File Explorer
- …
Pour le moment, vous êtes obligés d’utiliser le Windows API Code Pack 0.90. A suivre de prêt donc !
