Généralités

Windows Presentation
Foundation
 Généralités
• Présentation
 Nouveau système d’affichage graphique de Microsoft Windows
• Repose sur 4 grands axes

 Approche unifiée de l’interface utilisateur, des documents et
des animations
 Framework de présentation unifiée, intégrant et gérant tous les parties
d’une interface utilisateur (animations, images, contrôles, etc.)
 Moteur de composition basé sur des vecteurs intégrés
 Utilisation efficiente de la carte graphique (Directe 3D) pour fournir un
affichage vectoriel. Une partie du traitement est confiée au GPU
(processeur graphique) au lieu du CPU
ASSALE Adjé Louis WPF 1
Foundation
 Généralités
 Modèle de programmation déclarative
 Réduction d’écart entre développement Web et développement
d’applications Windows par la puissance de développement déclarative
(XAML) au développement d’interfaces graphiques Windows
 Séparation distincte entre le rôle de designer et celui du développeur

Foundation
 Généralités
 Facilité de déploiement
 Permet aux administrateurs de déployer et gérer les applications de
manières sécurisées
• Windows Presentation Foundation permet de développer
des applications intuitives au design innovant

Foundation
 Outils pour développer applications WPF
• Le XAML (eXtensible Application Markup Language) :
 Est un modèle de programmation déclarative .NET
 Langage basé sur le XML (eXtensible Markup Language)
 Qui fonctionne sur le principe de la sérialisation de graphe
d’objets
 N.B.: c’est un langage de description qui n’est pas dédié à WPF
 Exemple de code XAML:

Foundation
 Exemple de code XAML:
 Déclaration d’espace de noms
 Déclaration de la classe
 Les propriétés correspondent aux attributs des éléments du code XAML

 l’attribut Title de l’élément Window correspond simplement à la
propriété Title de la classe Window

Foundation
 Tout code développé en XAML peut être redéveloppé en C#,
VB.NET ou autre

Foundation
• Le designer d’interface graphique
 Permet d’utiliser le glisser/déposer (Drag&Drop) pour placer
les composants (boutons, labels, listbox, etc, …)
 Quelques écrans sous Visual Studio 2017
 Fenêtre principale boite à outils
Fenêtre des propriétés

Foundation
• Expression Blend
 Outil permettant de créer des graphiques vectoriels
 Étendu à WPF pour gérer nativement XAML
 Permet de travailler sur solution Visual Studio sans toucher une
seule ligne de code
 Gère la création d’animation totalement en XAML
 Permet de réaliser des logiciels et applications Web
 Écrit entièrement en Windows Presentation Foundation

Foundation
 Développement d’applications WPF
• Les contrôles WPF
 Utilisés pour visualiser données et permettre à l’utilisateur
d’interagir avec l’application
 Possèdent des propriétés, des événements et des méthodes
 On retrouve beaucoup de contrôles standards :
 Boutons, Labels, Textbox, etc…
 Peuvent contenir n’importe quoi
 Possibilité de personnaliser complètement le rendu d’un contrôle WPF
 Éléments fonctionnels auxquels on applique un style et possibilité de
combiner avec d’autres grâce au système de template
 Propriété Content remplace propriété Text des contrôles « classiques »
et permet de faire plus de choses
Foundation
• Les ressources
 Chaque composant WPF possède une propriété Resources :
 Permet de définir les ressources qui lui sont associées
 Les styles (définissent l’apparence d’un contrôle)
 Les templates (définissent comment afficher les données affectées
à un contrôle)
 Les animations
 Les transformations (rotation, etc,…)
 Permettent d’avoir accès et donc de réutiliser les objets définis

pour l’ensemble de l’application

Foundation
• Les ressources
 Exemple

Foundation
• Les ressources
 Exemple
 dans ressources d’une Grid, définit style à appliquer aux types Button
 Les ressources sont assimilables aux fichiers CSS des applications Web
• Les styles
 Permettent de définir l’apparence des contrôles
 L’élément Style est utilisé pour définir un style
 L’attribut TargetType indique le type de contrôle valable
 L’attribut Key donne un nom au style
 Ensuite, on utilise des Setter

 Pour définir propriété à modifier (grâce à propriété Property)
 et la valeur à attribuer (propriété Value)

12
Foundation
• Les styles
 On applique un style à un contrôle
 En liant la propriété Style du contrôle au style créé – le nom du style
suit StaticResource ou DynamicResource selon type de ressource
 Création de style basé sur un autre

 On utilise l’attribut BasedOn pour indiquer le style sur lequel on se
base

Foundation
• Les templates
 Utilisés pour décrire la structure visuelle d’un contrôle
 Création d’un template s’effectue comme pour un style
 On utilise un élément ControlTemplate
 Attribut TargetType pour indiquer le type d’élément applicable
 Attribut Key pour associer un nom au template
 Les éléments de présentation visuelle à attribuer au contrôle

Foundation
• Les templates
 Élément DataTemplate
 Définir représentation visuelle d’un objet de données c-à-d
 Afficher à l’écran des objets non-visuels (objets de données)
 Soit la classe MyPhoto ne comportant aucun élément visuel
Utilisation d’un DataTemplate pour définir l’affichage
d’éléments de type MyPhoto
Mais mappage au préalable du type MyPhoto au XAML à

l’aide de l’attribut xmlns

Foundation
• Les triggers
 Utilisés conjointement avec les styles et templates pour réaliser
des applications à interactions riches et dynamiques
 Activés lorsqu’une condition spécifique devient vraie. On a 3
cas de condition :
 Une « Property Dependency »(utilisation de Trigger) – déclenché
quand propriété spécifiée est modifiée
 Une propriété .NET (utilisation d’un DataTrigger) – déclenché quand
propriété spécifiée est modifiée
 Un événement (utilisation d’EventTrigger) – déclenché quand
l’événement indiqué survient (par exemple, le clic sur un bouton)

Foundation
• Les triggers
 Déclaration de Trigger de style pour 1 « property Dependency »
 On utilise l’élément Trigger dans la propriété Triggers de Style
 On spécifie avec le Setter la propriété à modifier et la valeur
 Dans l’exemple, on a ajouté un Trigger qui sera déclenché quand la

propiété IsMouseOver passera à vrai, et change la propriété Background
du bouton à rouge
Foundation
• Les triggers
 On peut utiliser plusieurs Triggers dans un style
 Permet modification de multiples propriétés lors de changement des
valeurs de différentes propriétés

Foundation
• Les triggers
 Triggers qui s’exécutent sous certaines conditions (+sieurs)
 On utilise un élément MultiTrigger, on spécifie les conditions à remplir
dans sa propriété Conditions
 Dans l’exemple, les propriétés IsMouseOver et IsFocused doivent être à

vrai pour que la propriété Foreground du bouton change

Foundation
• Les triggers
 DataTriggers ou triggers de données
 Effectuent des vérifications sur n’importe quelle propriété d’1
objet .Net contrairement aux triggers de propriétés qui n’effectuent que
sur les « property Dependencies »
 Comme DataTemplate, ils sont utilisés avec les objets non-visuels
 Reprise classe MyPhoto - vérification sur la propriété IdPhoto
 Ici, on teste si l’identifiant d’une photo est égale à une valeur

donnée, 1 dans notre cas, puis on change la couleur du texte du
bouton
Foundation
• Les triggers
 EventTriggers ou triggers déclenchés suite à un événement
 On définit dans l’objet en question à travers sa propriétés Triggers,
 un élément EventTrigger où on précise via l’attribut RoutedEvent
l’événement en question ici Button.Click (clic sur le bouton)
 on définit les actions de l’EventTrigger via sa propriétés Actions

Foundation
• Mise en œuvre sous Visual Studio
 Lancer Visual Studio et choisir un projet WPF
4 types de projet WPF
-Application WPF
-Application de navigateur
WPF (s’exécutant dans
navigateur)
-Bibliothèque de contrôles
personnalisés WPF (étendre
les fonctionnalités d’un
contrôle)
-Bibliothèque de contrôles
utilisateurs WPF (créer un
contrôle)

Foundation
 Une application WPF se présente comme suit

Foundation
 Une application WPF se présente comme suit
 Une fenêtre par défaut
 En dessous le code XAML de la fenêtre
 Une balise <Window> avec des déclarations d’espaces de noms
 Une balise <Grid> vide à l’intérieure de la balise <Window>
 N.B.: le code XAML respecte la casse
 À droite Explorateur de solutions qui contient le projet

 La fenêtre de Propriétés en dessous de l’Explorateur de solutions

Foundation
 Déposons par glisser/déposer un TextBlock et un Button à
partir de la Boite à outils
Les 2 éléments <TextBlock> et

<Button> sont insérés
automatiquement dans
l’élément <Grid> dans le code
XAML

Foundation
 Modifions à partir du code XAML les propriétés Text du
<TextBlock> et Content du <Button>
On pourrait changer
la couleur du texte
via la propriété
Foreground

Foundation
 L’exécution donne ceci

Foundation
 Création d’une ressource
 Créons une ressource dans l’élément <Window> pour définir une
couleur sur la propriété Background, on utilisera l’élément
SolidColorBrush pour la ressource et BackgroundBrush nom de la
ressource

Foundation
 Appliquons la ressource à l’élément <Button> via sa propriété
Background
N.B. : Le
changement s’opère
déjà en mode conception

Foundation
 Travaux Pratiques N1

Foundation
• Les StoryBoards
 Permettent de définir des actions ou animations/transformations
 S’utilisent souvent avec les EventTriggers
 Utilisent certaines propriétés dans sa mise en œuvre :
 TargetName : pour spécifier la cible, l’objet à manipuler (élément,
rotation, …)
 TargetProperty : propriété de la cible à manipuler (angle, taille, …)
 AutoReverse : à la fin de l’animation retourne à la position initiale
 BeginTime : à quel moment le storyboard doit démarrer
 Duration : combien de temps l’animation doit durer
 Et l’élément BeginStoryboard pour démarrer le storyboard
Foundation
• Les StoryBoards
 Exemple

Foundation
• Les animations
 Animer les contrôles
 Par exemple augmenter la taille d’un bouton pendant 10 secondes
 Animation simple
 On utilise les propriétés TargetName et TargetProperty et autres
 dans un élément défini par le type d’animation (xxxAnimation) où xxx
spécifie le type :
 ByteAnimation : animer la valeur d’une propriété de type Byte
 DoubleAnimation : animer valeur de propriété de type Double
 ColorAnimation : animer valeur de propriété de type Color
 Etc.
 le tout dans un trigger de type EventTrigger

Foundation
• Les animations
 Animation simple
 Exemple :
 Ici, on modifie la propriété Width d’un contrôle nommé

MonBouton, l’animation s’exécute à la vitesse de la valeur de la
propriété SpeedRatio (5). La taille passe de 0 à 451
Foundation
• Les animations
 Animation utilisant les KeyFrames
 Servent à définir des étapes dans l’animation. Par exemple élaborer une
animation qui dure 10s et spécifier qu’une démarre à 2s et une autre à
6s
 Sont en quelque sorte des points d’arrêt des animations
 Par exemple :
 Ici, o a 2 étapes : une atteinte en 2s et l’autre au bout de 6s

 On utilise propriétés KeyTime et value d’1 objet yyyxxxKeyframe
dans une animation de type

ASSALE Adjé Louis WPF xxxAnimationUsingKeyFrames 35
Foundation
• Les animations
 Animations en parallèle
 En général, une suite d’animations exécute une animation après l’autre.
Par exemple
 Pour exécuter les animations en parallèle, on les met dans un objet

ParallelTimeLine

Foundation
• Les transformations
 Il y a plusieurs types de transformation :
 les TranslateTransform
 les RotateTransform
 les ScaleTransform
 les MatrixTransform
 les SkewTransform
 les TransformGroup

Foundation
 les TranslateTransform, permettent de translater un objet :
 On spécifie position x et y que l’objet doit avoir par rapport au point de
départ. Par exemple :
Le bouton sera déplacé vers
une position de 50 en x et
100 en y

Foundation
 les RotateTransform, pour faire la rotation d’un objet :
 On spécifie les coordonnées x et y du centre de rotation et l’angle de
rotation. Par exemple :
Rotation d’un angle de 35 dans le

sens des aiguilles d’une montre au
point de coordonnées x=5 et y=10

Foundation
 les ScaleTransform, redimensionnent un objet :
 On spécifie le facteur de redimensionnement avec ScaleX et ScaleY.
Par exemple :
Ici le ScaleY négatif permet de

faire une sorte de bouton inversé

Foundation
 les MatrixTransform, créent des transformations personnalisées
 Utilise une matrix 3x3 pour les transformations dans un plan à 2
dimensions. Dans une transformation on positionne dans l’ordre les
valeurs M11 M12 M21 M22 OffsetX OffsetY. Il existe des outils tels
que Sparkle qui aident à créer des MatrixTransform.
 Par exemple :

Foundation
 les MatrixTransform
 Par exemple :

Foundation
 les SkewTransform, pivotent l’objet suivant l’un ou les deux
axes X et Y.
 L’attribut AngleX fournit le degré d’inclinaison selon l’axe Y et
l’attribut AngleY selon l’axe X
 Par exemple :

Foundation
 les TransformGroup, permettent d’utiliser plusieurs
transformations simultanées sur un objet
 Par exemple :

Foundation

Foundation
• Le binding
 Définition et utilisation
 Crée une liaison entre 2 éléments
 Lie une interface graphique aux objets qu’elle doit représenter
 Le DataContext
 Concept autorisant éléments enfants à hériter de l’information de leur
élément parent
Tout élément inséré dans la grille (contrôle
Grid) aura pour source de données l’objet
indiqué dans l’attribut DataContext

Foundation
• Le binding
 Il existe ≠ types de sources de données : XmlDataProvider
 Source de données au format XML
 Exemple de définition d’une source de données
 Utilisation en définissant attribut Source (où se trouve la source) et

Xpath (requête à effectuer sur la source)

Foundation
• Le binding
 On lie les propriétés de nos objets qui nous intéresse par Binding

Foundation
• Le binding
 Il existe ≠ types de sources de données : ObjectDataProvider
 Présente plus de fonctionnalités que l’ObjectDataSource du
framework
 Définir un objet comme la source de vos données
 Passer des paramètres au constructeur de l’objet utilisé comme
source de données
 Lier à une méthode
 Remplacer l’objet qui sert de source de données
 Créer l’objet servant de source de données de façon asynchrone
 Déclaration d’un ObjectDataProvider

Foundation
• Le binding
 Passage de paramètres au constructeur d’un ObjectDataProvider via
l’attribut ConstructorParameters
On spécifie l’ensemble des
paramètres à passer au
constructeur, en indiquant
leur type (Int32, Float, String,
etc…)
 Utilisation d’un ObjectDataProvider via un DataTemplate
 Ici on crée un DataTemplate qui indique que les éléments de type

MyPhoto seront affichés dans un contrôle de type Image
Foundation
• Le binding
 Liaison à une méthode, on utilise les attributs : MethodName –
ObjectInstance – MethodParameters
 Ajouter une méthode à la classe MyPhoto
 Liaison à une méthode nécessite création d’un autre

ObjectDataProvider

Foundation
• Le binding
 L’attribut ObjectInstance spécifie l’objet source
 L’attribut MethodName spécifie le nom de la méthode à appeler
 L’attribut MethodParameters spécifie les paramètres à passer
 Utilisation de l’objet nouvellement créé
 Pour remplacer l’objet qui sert de source de données est de modifier

dynamiquement la propriété ObjectType de l’ObjectDataProvider
 Un ObjectDataProvider est par défaut synchrone et un
XmlDataProvider est par défaut asynchrone
 Propriété indique que le
chargement s’effectue dans
ASSALE Adjé Louis WPF
un thread ≠ ce celui de l’application
52
Foundation

Foundation
• Le binding
• Textes et Documents
• La 3D

Généralités

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Généralités

Transféré par

Droits d'auteur :

Formats disponibles

Windows Presentation

• Repose sur 4 grands axes

ASSALE Adjé Louis WPF 2

ASSALE Adjé Louis WPF 3

ASSALE Adjé Louis WPF 4

 Les propriétés correspondent aux attributs des éléments du code XAML

propriété Title de la classe Window

ASSALE Adjé Louis WPF 5

ASSALE Adjé Louis WPF 6

Fenêtre des propriétés

ASSALE Adjé Louis WPF 7

ASSALE Adjé Louis WPF 8

 Les templates (définissent comment afficher les données affectées

 Les transformations (rotation, etc,…)

 Permettent d’avoir accès et donc de réutiliser les objets définis

ASSALE Adjé Louis WPF 10

ASSALE Adjé Louis WPF 11

 L’attribut Key donne un nom au style

 Ensuite, on utilise des Setter

 et la valeur à attribuer (propriété Value)

 Création de style basé sur un autre

ASSALE Adjé Louis WPF 13

 Attribut Key pour associer un nom au template

 Les éléments de présentation visuelle à attribuer au contrôle

ASSALE Adjé Louis WPF 14

Mais mappage au préalable du type MyPhoto au XAML à

ASSALE Adjé Louis WPF 15

ASSALE Adjé Louis WPF 16

 Dans l’exemple, on a ajouté un Trigger qui sera déclenché quand la

ASSALE Adjé Louis WPF 18

 Dans l’exemple, les propriétés IsMouseOver et IsFocused doivent être à

ASSALE Adjé Louis WPF 19

 Ici, on teste si l’identifiant d’une photo est égale à une valeur

ASSALE Adjé Louis WPF 21

ASSALE Adjé Louis WPF 22

ASSALE Adjé Louis WPF 23

 Une balise <Grid> vide à l’intérieure de la balise <Window>

 N.B.: le code XAML respecte la casse

 À droite Explorateur de solutions qui contient le projet

ASSALE Adjé Louis WPF 24

Les 2 éléments <TextBlock> et

ASSALE Adjé Louis WPF 25

ASSALE Adjé Louis WPF 26

ASSALE Adjé Louis WPF 27

ASSALE Adjé Louis WPF 28

ASSALE Adjé Louis WPF 29

ASSALE Adjé Louis WPF 30

ASSALE Adjé Louis WPF 32

 DoubleAnimation : animer valeur de propriété de type Double

 ColorAnimation : animer valeur de propriété de type Color

 le tout dans un trigger de type EventTrigger

 Ici, on modifie la propriété Width d’un contrôle nommé

 Ici, o a 2 étapes : une atteinte en 2s et l’autre au bout de 6s

dans une animation de type

 Pour exécuter les animations en parallèle, on les met dans un objet

ASSALE Adjé Louis WPF 36

ASSALE Adjé Louis WPF 37

ASSALE Adjé Louis WPF 38

Rotation d’un angle de 35 dans le

ASSALE Adjé Louis WPF 39

Ici le ScaleY négatif permet de

ASSALE Adjé Louis WPF 40

ASSALE Adjé Louis WPF 41