Windows Presentation Foundation avancé – Partie 1 Mitsuru FURUTA – Microsoft France Relations...

Windows Presentation Windows Presentation Foundation avancé – Partie Foundation avancé – Partie 11

Windows Presentation Windows Presentation Foundation avancé – Partie Foundation avancé – Partie 11

Mitsuru FURUTA – Microsoft FranceMitsuru FURUTA – Microsoft FranceRelations techniques développeursRelations techniques développeursmitsufu@microsoft.commitsufu@microsoft.com – – http://blogs.microsoft.fr/mitsufuhttp://blogs.microsoft.fr/mitsufu

Thomas LEBRUNThomas LEBRUNMVS et formateur au laboratoire .NetMVS et formateur au laboratoire .NetLebrun_thomas@hotmail.comLebrun_thomas@hotmail.com – – http://morpheus.developpez.comhttp://morpheus.developpez.com

SommaireSommaire

Les Contrôles WPFLes Contrôles WPFLes RessourcesLes RessourcesLes StylesLes StylesLes TemplatesLes TemplatesLes TriggersLes TriggersLes AnimationsLes AnimationsLes TransformationsLes TransformationsLe TexteLe TexteLe BindingLe BindingLes Applications NavigateursLes Applications NavigateursWPF et la 3DWPF et la 3DInterop WPF/WindowsFormsInterop WPF/WindowsForms

Les contrôles WPFLes contrôles WPF

La plupart des contrôles WindowsForms classiques sont disponibles avec La plupart des contrôles WindowsForms classiques sont disponibles avec WPFWPFIls possèdent plusieurs caractéristiques:Ils possèdent plusieurs caractéristiques:

PropriétésEvènementsMéthodesDataBinding

Grâce à la propriété Grâce à la propriété ContentContent, on peut personnaliser le contenu d’un , on peut personnaliser le contenu d’un contrôlecontrôle

Un contrôle WPF ne contiendra plus seulementque du texte mais pourra également contenir d’autres contrôles

Les contrôles WPF peuvent donc être décomposés soussous forme de graphes d’objets

Possibilité de créer des UserControlPossibilité de créer des UserControl

Les ressourcesLes ressources

La propriété Resources permet de définir les ressources qui seront La propriété Resources permet de définir les ressources qui seront utilisables par votre contrôleutilisables par votre contrôle

Les ressources peuvent être locales (liées à un contrôle précis) ou 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 globales (liées à un contrôle parent et utilisable par tout les contrôles enfants)contrôles enfants)

Par ressource, on entend:Par ressource, on entend:Les StylesLes TemplatesLes AnimationsLes TransformationsLes sources de donnéesEtc…

Les stylesLes styles

Inspiré des styles utilisé dans le développement Web, les Inspiré des styles utilisé dans le développement Web, les CSSCSS

On définit les styles pour un type de contrôle

Les styles vous permettent de définir l’apparence visuelle Les styles vous permettent de définir l’apparence visuelle de vos contrôlesde vos contrôles

Vous définissez vos styles dans les ressources de votre Vous définissez vos styles dans les ressources de votre contrôlecontrô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>

Les templatesLes templates

Les Templates définissent la structure de vos contrôlesLes Templates définissent la structure de vos contrôles

Vous allez donc pouvoir modifier la façon dont un contrôle Vous allez donc pouvoir modifier la façon dont un contrôle affiche son contenuaffiche son contenu

Les DataTemplate sont utilisés pour définir la Les DataTemplate sont utilisés pour définir la représentation visuelle d’un objet de données: un objet de représentation visuelle d’un objet de données: un objet de type Photo pourra être représenté visuellementtype Photo pourra être représenté visuellement

Utilisation des éléments <ControlTemplate> et Utilisation des éléments <ControlTemplate> et <DataTemplate><DataTemplate>

DémoDémo

Les Contrôles, les Styles et les TemplatesLes Contrôles, les Styles et les Templates

Les triggersLes triggers

Les Triggers permettent une meilleure Les Triggers permettent une meilleure interactivité entre votre application et l’utilisateurinteractivité entre votre application et l’utilisateurIls sont déclenchés lorsqu’une condition Ils sont déclenchés lorsqu’une condition spécifique est vraiespécifique est vraieLes EventTrigger seront les plus utilisés: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:Ils sont utilisés avec les Styles et les Templates:

<Style.Triggers><Trigger Property="IsMouseOver" Value="True">

<Setter Property="Button.Background" Value="Red"/></Trigger>

</Style.Triggers>

Les animationsLes animations

StoryBoard: Regroupe des animations qui seront StoryBoard: Regroupe des animations qui seront jouées à la demandejouées à la demande

Les animations sont utilisées dans des Les animations sont utilisées dans des StoryBoards, au moyen des propriétés:StoryBoards, au moyen des propriétés:

TargetName: Indique la cible de votre animationTargetProperty: Indique quelle propriété doit-être animée

Les animations sont utilisées pour animer les Les animations sont utilisées pour animer les propriétés (taille, couleur, etc…) des objetspropriétés (taille, couleur, etc…) des objets

<DoubleAnimation SpeedRatio="5" Storyboard.TargetName="m_BoutonAnime" Storyboard.TargetProperty="Width" From="0" To="200" />

Les transformationsLes transformations

Utilisées pour donner plus de vie à vos applicationsUtilisées pour donner plus de vie à vos applications

Permettent de transformer le rendu graphique d’un Permettent de transformer le rendu graphique d’un contrôlecontrôle

Egalement utilisées dans des StoryBoards grâce aux Egalement utilisées dans des StoryBoards grâce aux propriétés TargetName et TargetPropertypropriétés TargetName et TargetProperty

Plusieurs types sont disponibles:Plusieurs types sont disponibles:TranslateTransform: Effectue une translation d’un contrôleRotateTransform: Exécute la rotation d’un contrôleScaleTransform: Redimensionnement d’un contrôleMatrixTransform: Permet de créer vos propres transformations

Vous pouvez tout à fait animer vos transformations !Vous pouvez tout à fait animer vos transformations !

Le texteLe texte

WPF utilise un affichage vectoriel pour un rendu idéalWPF utilise un affichage vectoriel pour un rendu idéal

Il existe de nombreux contrôles pour afficher du texte:Il existe de nombreux contrôles pour afficher du texte:LabelTextBlockTextBoxEtc..

On peut modifier certaines propriétés pour changer le rendu:On peut modifier certaines propriétés pour changer le rendu:FontFamily: Type de la policeFontSize: Taille de la policeFontStyle: Style de la police (italique, oblique, etc…)

Certaines classes offertes par WPF permettent d’afficher et de formater du Certaines classes offertes par WPF permettent d’afficher et de formater du texte, en utilisant des fonctions avancées telles que la pagination, la texte, en utilisant des fonctions avancées telles que la pagination, la gestion des colonnes, la recherche de texte, etc..:gestion des colonnes, la recherche de texte, etc..:

FlowDocumentFlowDocumentReaderFlowDocumentPageViewerEtc..

DémoDémo

Les Triggers, les animations, les Les Triggers, les animations, les transformations et le textetransformations et le texte

Le bindingLe binding

Avec WPF, la propriété DataSource n’existe plus: elle Avec WPF, la propriété DataSource n’existe plus: elle est remplacée par la propriété DataContextest remplacée par la propriété DataContext

DataContext: Concept qui autorise les éléments DataContext: Concept qui autorise les éléments enfants à hériter de l’information de l’élément parentenfants à hériter de l’information de l’élément parent

Classe Binding:Classe Binding:ElementName: Spécifie quel contrôle sera la source de vos donnéesPath: Indique quelle propriété utiliser pour effectuer le BindingXPath: Indique la requête XPath a effectuer sur la source de données (par exemple si vous utilisez un XmlDataProvider)

Le binding (2)Le binding (2)

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

Convert: Convertit un objet dans un type donnéConvertBack: Conversion dans le sens inverse

DémoDémo

Le BindingLe Binding

DémoDémo

Cas pratique: Et si on mixait un peu tout Cas pratique: Et si on mixait un peu tout ça ça

Les applications navigateurLes applications navigateur

Xaml Browser ApplicationsXaml Browser ApplicationsExécution en ligne uniquement, au travers d’un navigateur Exécution en ligne uniquement, au travers d’un navigateur InternetInternetAucune installation n’est nécessaire:Aucune installation n’est nécessaire:

Déploiement via ClickOnceNe nécessite que le Runtime WinFX

Ces applications s’exécutent dans un Ces applications s’exécutent dans un « SandBox » (bac à sable):« 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

Les applications navigationnellesLes applications navigationnelles

Applications proposant des classes permettant la navigation Applications proposant des classes permettant la navigation au sein de l’application:au sein de l’application:

NavigationWindowPagePageFunction

Elles permettent également de conserver un historique des Elles permettent également de conserver un historique des pages visitées dans l’applicationpages visitées dans l’application

Il existe 2 catégories d’applications de ce type:Il existe 2 catégories d’applications de ce type:Les Xaml Browser Applications (.xbap)Les applications autonomes (WindowsForms)

DémoDémo

Les applications navigateurs et les Les applications navigateurs et les applications navigationnellesapplications navigationnelles

WPF et la 3DWPF et la 3D

Viewport3D: Conteneur 2D pour des Viewport3D: Conteneur 2D pour des graphismes/contrôles 3Dgraphismes/contrôles 3DPour définir ce que l’on va afficher, on utilise un Pour définir ce que l’on va afficher, on utilise un modèle: ModelVisual3Dmodèle: ModelVisual3DOn utilise une caméra pour visualiser le modèle On utilise une caméra pour visualiser le modèle en 3Den 3D

On spécifie sa position, sa direction, son angle de visionOn pourra animer cette caméra pour donner l’impression de bouger autour du modèle

DémoDémo

WPF et la 3DWPF et la 3D

Interop WPF/WindowsFormsInterop WPF/WindowsForms

Nom de code du projet: CrossBowNom de code du projet: CrossBowBut: Utiliser des contrôles WPF dans une application But: Utiliser des contrôles WPF dans une application WindowsForms et inversementWindowsForms et inversement

Utilisation de l’assembly WindowsFormsIntegration.dllContrôles WPF dans une applications WindowsForms:Contrôles WPF dans une applications WindowsForms:

Utilisation d’un contrôle ElementHostContrôles WindowsForms dans une application WPFContrôles WindowsForms dans une application WPF

Utilisation d’un contrôle WindowsFormsHostIl existe cependant des contraintes (telle que l’utilisation de Il existe cependant des contraintes (telle que l’utilisation de la transparence) qu’il faut prendre en comptela transparence) qu’il faut prendre en compte

DémoDémo

Interop WPF/WindowsFormsInterop WPF/WindowsForms