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
 Windows Presentation
Foundation
 Généralités
• Repose sur 4 grands axes
 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

ASSALE Adjé Louis WPF 2

 Windows Presentation
Foundation
 Généralités
• Repose sur 4 grands axes
 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

ASSALE Adjé Louis WPF 3

 Windows Presentation
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:

ASSALE Adjé Louis WPF 4

 Windows Presentation
Foundation
 Outils pour développer applications WPF
• Le XAML (eXtensible Application Markup Language) :
 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

ASSALE Adjé Louis WPF 5

 Windows Presentation
Foundation
 Outils pour développer applications WPF
• Le XAML (eXtensible Application Markup Language) :
 Tout code développé en XAML peut être redéveloppé en C#,
[Link] ou autre

ASSALE Adjé Louis WPF 6

 Windows Presentation
Foundation
 Outils pour développer applications WPF
• 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

ASSALE Adjé Louis WPF 7

 Windows Presentation
Foundation
 Outils pour développer applications WPF
• 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

ASSALE Adjé Louis WPF 8

 Windows Presentation
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
ASSALE Adjé Louis WPF 9
 Windows Presentation
Foundation
 Développement d’applications WPF
• 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

ASSALE Adjé Louis WPF 10

 Windows Presentation
Foundation
 Développement d’applications WPF
• Les ressources
 Exemple

ASSALE Adjé Louis WPF 11

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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
 Windows Presentation
Foundation
 Développement d’applications WPF
• 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

ASSALE Adjé Louis WPF 13

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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

ASSALE Adjé Louis WPF 14

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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

ASSALE Adjé Louis WPF 15

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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)

ASSALE Adjé Louis WPF 16

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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
ASSALE Adjé Louis WPF 17
 Windows Presentation
Foundation
 Développement d’applications WPF
• 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

ASSALE Adjé Louis WPF 18

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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

ASSALE Adjé Louis WPF 19

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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
ASSALE Adjé Louis WPF 20
 Windows Presentation
Foundation
 Développement d’applications WPF
• 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 [Link] (clic sur le bouton)
 on définit les actions de l’EventTrigger via sa propriétés Actions

ASSALE Adjé Louis WPF 21

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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)

ASSALE Adjé Louis WPF 22

 Windows Presentation
Foundation
 Développement d’applications WPF
• Mise en œuvre sous Visual Studio
 Une application WPF se présente comme suit

ASSALE Adjé Louis WPF 23

 Windows Presentation
Foundation
 Développement d’applications WPF
• Mise en œuvre sous Visual Studio
 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

ASSALE Adjé Louis WPF 24

 Windows Presentation
Foundation
 Développement d’applications WPF
• Mise en œuvre sous Visual Studio
 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

ASSALE Adjé Louis WPF 25

 Windows Presentation
Foundation
 Développement d’applications WPF
• Mise en œuvre sous Visual Studio
 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

ASSALE Adjé Louis WPF 26

 Windows Presentation
Foundation
 Développement d’applications WPF
• Mise en œuvre sous Visual Studio
 L’exécution donne ceci

ASSALE Adjé Louis WPF 27

 Windows Presentation
Foundation
 Développement d’applications WPF
• Mise en œuvre sous Visual Studio
 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

ASSALE Adjé Louis WPF 28

 Windows Presentation
Foundation
 Développement d’applications WPF
• Mise en œuvre sous Visual Studio
 Appliquons la ressource à l’élément <Button> via sa propriété
Background

N.B. : Le
changement s’opère
déjà en mode conception

ASSALE Adjé Louis WPF 29

 Windows Presentation
Foundation
 Travaux Pratiques N1

ASSALE Adjé Louis WPF 30

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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
ASSALE Adjé Louis WPF 31
 Windows Presentation
Foundation
 Développement d’applications WPF
• Les StoryBoards
 Exemple

ASSALE Adjé Louis WPF 32

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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

ASSALE Adjé Louis WPF 33
 Windows Presentation
Foundation
 Développement d’applications WPF
• 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
ASSALE Adjé Louis WPF 34
 Windows Presentation
Foundation
 Développement d’applications WPF
• 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
 Windows Presentation
Foundation
 Développement d’applications WPF
• 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

ASSALE Adjé Louis WPF 36

 Windows Presentation
Foundation
 Développement d’applications WPF
• Les transformations
 Il y a plusieurs types de transformation :
 les TranslateTransform
 les RotateTransform
 les ScaleTransform
 les MatrixTransform
 les SkewTransform
 les TransformGroup

ASSALE Adjé Louis WPF 37

 Windows Presentation
Foundation
 Développement d’applications WPF
• Les transformations
 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

ASSALE Adjé Louis WPF 38

 Windows Presentation
Foundation
 Développement d’applications WPF
• Les transformations
 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

ASSALE Adjé Louis WPF 39

 Windows Presentation
Foundation
 Développement d’applications WPF
• Les transformations
 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é

ASSALE Adjé Louis WPF 40

 Windows Presentation
Foundation
 Développement d’applications WPF
• Les transformations
 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 :

ASSALE Adjé Louis WPF 41

 Windows Presentation
Foundation
 Développement d’applications WPF
• Les transformations
 les MatrixTransform
 Par exemple :

ASSALE Adjé Louis WPF 42

 Windows Presentation
Foundation
 Développement d’applications WPF
• Les transformations
 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 :

ASSALE Adjé Louis WPF 43

 Windows Presentation
Foundation
 Développement d’applications WPF
• Les transformations
 les TransformGroup, permettent d’utiliser plusieurs
transformations simultanées sur un objet
 Par exemple :

ASSALE Adjé Louis WPF 44

 Windows Presentation
Foundation
 Travaux Pratiques N2

ASSALE Adjé Louis WPF 45

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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

ASSALE Adjé Louis WPF 46

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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)

ASSALE Adjé Louis WPF 47

 Windows Presentation
Foundation
 Développement d’applications WPF
• Le binding
 On lie les propriétés de nos objets qui nous intéresse par Binding

ASSALE Adjé Louis WPF 48

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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

ASSALE Adjé Louis WPF 49

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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
ASSALE Adjé Louis WPF 50
 Windows Presentation
Foundation
 Développement d’applications WPF
• 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

ASSALE Adjé Louis WPF 51

 Windows Presentation
Foundation
 Développement d’applications WPF
• 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
 Windows Presentation
Foundation
 Travaux Pratiques N3

ASSALE Adjé Louis WPF 53

 Windows Presentation
Foundation
 Développement d’applications WPF
• Le binding
• Textes et Documents
• La 3D

ASSALE Adjé Louis WPF 54