Embed Size (px)
Citation preview
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é[email protected]@microsoft.com – – http://blogs.microsoft.fr/mitsufuhttp://blogs.microsoft.fr/mitsufu
Thomas LEBRUNThomas LEBRUNMVS et formateur au laboratoire .NetMVS et formateur au laboratoire [email protected][email protected] – – 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
