Windows Presentation Foundation avancé – Partie 1 Mitsuru FURUTA – Microsoft France Relations techniques développeurs mitsufu@microsoft.com – http://blogs.microsoft.fr/mitsufu Thomas LEBRUN MVS et formateur au laboratoire .Net Lebrun_thomas@hotmail.com – http://morpheus.developpez.com

Sommaire Les Contrôles WPF Les Ressources Les Styles Les Templates Les Triggers Les Animations Les Transformations Le Texte Le Binding Les Applications Navigateurs WPF et la 3D Interop WPF/WindowsForms 2

Les contrôles WPF La plupart des contrôles WindowsForms classiques sont disponibles avec WPF Ils possèdent plusieurs caractéristiques: Propriétés Evènements Méthodes DataBinding Grâce à la propriété Content, on peut personnaliser le contenu d’un contrôle Un contrôle WPF ne contiendra plus seulement que du texte mais pourra également contenir d’autres contrôles Les contrôles WPF peuvent donc être décomposés sous sous forme de graphes d’objets Possibilité de créer des UserControl 3

Les ressources La propriété Resources permet de définir les ressources qui seront utilisables par votre contrôle Les ressources peuvent être locales (liées à un contrôle précis) ou globales (liées à un contrôle parent et utilisable par tout les contrôles enfants) Par ressource, on entend: Les Styles Les Templates Les Animations Les Transformations Les sources de données Etc… 4

Les styles Inspiré des styles utilisé dans le développement Web, les CSS On définit les styles pour un type de contrôle Les styles vous permettent de définir l’apparence visuelle de vos contrôles Vous définissez vos styles dans les ressources de votre contrôle <Style TargetType="{x:Type Button}" x:Key="MonStyleDePolice"> <Setter Property="Button.FontStyle" Value="Italic" /> <Setter Property="Button.FontWeight" Value="Bold" /> <Setter Property="Button.Foreground" Value="Red" /> </Style> 5

Les templates Les Templates définissent la structure de vos contrôles Vous allez donc pouvoir modifier la façon dont un contrôle affiche son contenu Les DataTemplate sont utilisés pour définir la représentation visuelle d’un objet de données: un objet de type Photo pourra être représenté visuellement Utilisation des éléments <ControlTemplate> et <DataTemplate> 6

Démo Les Contrôles, les Styles et les Templates 7

Les triggers Les Triggers permettent une meilleure interactivité entre votre application et l’utilisateur Ils sont déclenchés lorsqu’une condition spécifique est vraie Les EventTrigger seront les plus utilisés: Le Trigger se déclenche lorsque l’évènement indiqué survient Ils sont utilisés avec les Styles et les Templates: Trigger = Déclencheur <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Button.Background" Value="Red"/> </Trigger> </Style.Triggers> 8

Les animations StoryBoard: Regroupe des animations qui seront jouées à la demande Les animations sont utilisées dans des StoryBoards, au moyen des propriétés: TargetName: Indique la cible de votre animation TargetProperty: Indique quelle propriété doit-être animée Les animations sont utilisées pour animer les propriétés (taille, couleur, etc…) des objets StoryBoard = Regroupement d’animations qui seront jouées à la demande. <DoubleAnimation SpeedRatio="5" Storyboard.TargetName="m_BoutonAnime" Storyboard.TargetProperty="Width" From="0" To="200" /> 9

Les transformations Utilisées pour donner plus de vie à vos applications Permettent de transformer le rendu graphique d’un contrôle Egalement utilisées dans des StoryBoards grâce aux propriétés TargetName et TargetProperty Plusieurs types sont disponibles: TranslateTransform: Effectue une translation d’un contrôle RotateTransform: Exécute la rotation d’un contrôle ScaleTransform: Redimensionnement d’un contrôle MatrixTransform: Permet de créer vos propres transformations Vous pouvez tout à fait animer vos transformations ! 10

Le texte WPF utilise un affichage vectoriel pour un rendu idéal Il existe de nombreux contrôles pour afficher du texte: Label TextBlock TextBox Etc.. On peut modifier certaines propriétés pour changer le rendu: FontFamily: Type de la police FontSize: Taille de la police FontStyle: Style de la police (italique, oblique, etc…) Certaines classes offertes par WPF permettent d’afficher et de formater du texte, en utilisant des fonctions avancées telles que la pagination, la gestion des colonnes, la recherche de texte, etc..: FlowDocument FlowDocumentReader FlowDocumentPageViewer 11

Démo Les Triggers, les animations, les transformations et le texte 12

Le binding Avec WPF, la propriété DataSource n’existe plus: elle est remplacée par la propriété DataContext DataContext: Concept qui autorise les éléments enfants à hériter de l’information de l’élément parent Classe Binding: ElementName: Spécifie quel contrôle sera la source de vos données Path: Indique quelle propriété utiliser pour effectuer le Binding XPath: Indique la requête XPath a effectuer sur la source de données (par exemple si vous utilisez un XmlDataProvider) 13

Le binding (2) Si le Binding relie deux propriétés du même type, il n’y a aucun problèmes. Cependant, si les types sont différents (vous souhaitez par exemple lier une image à l’item sélectionné dans une ListBox), vous devez utiliser un Converter On doit alors implémenter l’interface IValueConverter qui propose les méthodes: Convert: Convertit un objet dans un type donné ConvertBack: Conversion dans le sens inverse 14

Démo Le Binding 15

Démo Cas pratique: Et si on mixait un peu tout ça 

Les applications navigateur Xaml Browser Applications Exécution en ligne uniquement, au travers d’un navigateur Internet Aucune installation n’est nécessaire: Déploiement via ClickOnce Ne nécessite que le Runtime WinFX Ces applications s’exécutent dans un « SandBox » (bac à sable): Il s’agit d’un contexte sécurisé Permet de n’avoir aucun prompt/avertissement de sécurité au niveau du déploiement/de l’exécution 17

Les applications navigationnelles Applications proposant des classes permettant la navigation au sein de l’application: NavigationWindow Page PageFunction Elles permettent également de conserver un historique des pages visitées dans l’application Il existe 2 catégories d’applications de ce type: Les Xaml Browser Applications (.xbap) Les applications autonomes (WindowsForms)

Démo Les applications navigateurs et les applications navigationnelles 19

WPF et la 3D Viewport3D: Conteneur 2D pour des graphismes/contrôles 3D Pour définir ce que l’on va afficher, on utilise un modèle: ModelVisual3D On utilise une caméra pour visualiser le modèle en 3D On spécifie sa position, sa direction, son angle de vision On pourra animer cette caméra pour donner l’impression de bouger autour du modèle 20

Démo WPF et la 3D 21

Interop WPF/WindowsForms Nom de code du projet: CrossBow But: Utiliser des contrôles WPF dans une application WindowsForms et inversement Utilisation de l’assembly WindowsFormsIntegration.dll Contrôles WPF dans une applications WindowsForms: Utilisation d’un contrôle ElementHost Contrôles WindowsForms dans une application WPF Utilisation d’un contrôle WindowsFormsHost Il existe cependant des contraintes (telle que l’utilisation de la transparence) qu’il faut prendre en compte 22

Démo Interop WPF/WindowsForms 23