SlideShare une entreprise Scribd logo
Cours WPF avancé
Labo développement Microsoft Supinfo
Sommaire
1. Binding et introduction au datacontext
a. Binding d’une propriété
b. Notification de changement
c. Binding sur des listes
d. Binding d’élément WPF
2. Options avancées
a. Static Ressource
b. Converter
c. Selector
d. Validator
e. RelativeSource
Windows Présentation Fondation alias WPF
Le wpf c’est un moyen moderne fourni par le Framework .NET a
partir de la version 3.0 de faire des applications fenêtre (client
lourd) pour Windows .
1. Binding et introduction au datacontext
Première partie!
1. Binding et introduction au datacontext
1. Binding et introduction au datacontext
Dans cette première partie nous allons parcourir le domaine de la
liaison dynamique de données en WPF et la notion de datacontext a
travers des exemples concrets.
1. a. Binding d’une propriété
• Propriété de n’importe quel type.
• Xaml on bind sur les propriétés des controles.
Syntaxe:
Xaml:
Text="{Binding Path=stringToBind}"
Coté code:
public string stringToBind { get; set; }
1. a. Binding d’une propriété
Le mode …
Permet de définir le sens ou les sens du Binding
Syntaxe:
Xaml:
Text="{Binding Path=stringToBind,Mode=TwoWay}"
Coté code:
public string stringToBind { get; set; }
1. a. Binding d’une propriété
Le mode …
Mode: Sens:
TwoWay Agit dans les deux sens si la propriété bindé
va être modifiée, elle le sera dans la fenêtre
et vis versa.
OneWay Seulement de la propriété vers la fenêtre.
OneTime Pareil que OneWay mais pas de mise a jour,
garde la première valeur.
OneWayToSource Seulement de la fenêtre vers la propriété
1. a. Binding d’une propriété
Rapidement a propos du datacontext
C’est une notion compliquée, c’est un objet auquel on va
binder les éléments. Nous allons, pour le début, le mettre dans
l’objet de la fenêtre. On le retrouvera dans peu de temps
1. a. Binding d’une propriété
Démo rapide!
1. b. Notification de changement
Pourquoi cela ne fonctionne pas ?
Lorsque l’on fait de l’informatique la solution ne se trouve pas aussi
facilement que l’on pourrait le penser , il faut savoir qu’il faut
notifier lorsque nos données, nos variables changent.
1. b. Notification de changement
Comment faire cela?
En implémentant l’interface INotifyPropertyChanged et ajouter
un évènement à chaque changements. Petite démonstration pour
vous montrer un exemple concret et ce sera toujours de cette
manière qu’il faudra le faire.
1. c. Binding sur des listes
Comment ça fonctionne?
C’est également une propriété alors cela fonctionne de la même
manière que précédemment. On utilise souvent les listes dans les
contrôles listbox ou listView.
Démonstration
1. c. Binding sur des listes
Pourquoi ça ne fonctionne toujours pas?
Même raison que tout a l’heure pas de notifications,
heureusement le Framework pense a nous il existe des listes un peu
spéciales: les ObservableCollection qui notifient la fenêtre.
Démonstration
1. c. Binding sur des listes
Et pour les listes d’objets (type référence)?
Il existe pleins de solutions qui nous amène a faire un certain
nombre de choses intéressantes
1. c. Binding sur des listes
Que faire? Comment?
Le DisplayMemberPath Affiche la propriété choisi de l’objet
Le dataTemplate On créer un template d’affichage en Xaml(on
va voir ca en détails au prochain slide)
1. c. Binding sur des listes
Le data template… syntaxe(on expose les nœuds):
<ListBox Name="ListBox2" ItemsSource="{Binding}" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal« >
<TextBlock Text="{Binding Nom}" Margin="3"/>
<TextBox Text="{Binding Prenom}" Margin="3"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
1. c. Binding sur des listes
Le datatemplate à pour datacontext le type d’objet de la liste par
exemple si itemsource est une liste de Personne le datacontext sera
l’objet Personne.
Le dataTemplate peut être enregistré dans une ressource ( expliqué
un peu plus loin)
Démonstration
1. d. Binding d’élément WPF
On peut binder directement sur un autre contrôle WPF grâce a
elementname (une propriété du Binding) qui permet d’avoir
l’élément en source.
Syntaxe :{Binding ElementName=ListBox3,Path=SelectedItem}
 Démonstration
1. FIN
Avez-vous des
questions sur cette
partie?
1. Exercice
Tout d’abord nous créons une nouvelle fenêtre wpf. Du coté code
une classe student avec nom, prénom, Idbooster, Campus et promo.
Ensuite vous en faite une listbox qui affiche nom et prénom. Quand
nous sélectionnons un étudiant nous voulons afficher les détails et
pouvoir les modifier.
Si vous avez le temps , vous pouvez faire un bouton ajouter et
supprimer.(L’étudiant ajouté devra être sélectionné d’office).
2. Options avancées
Deuxieme partie.
2. Option Avancé
Dans cette partie nous allons voir comment manipuler les
staticRessource (ajouter des namespace a votre xaml et les key),
puis comment écrire du code orienté wpf avec les converter
, validator , selector et autre Transformers.
Nous verrons également la notion de RelativeSource.
2. a. staticRessource
Je vous avais dit tout a l’heure que nous pouvions mettre un data
template en ressource et c’est donc maintenant que nous allons le
mettre en œuvre.
Nous pouvons placer nos ressources n’importe où dans le xaml mais
il est souvent placé dans la balise Window car il est accessible
partout
<Window.Resources>
vos ressources
</Window.Resources>
2. a. staticRessource
Si nous voulons ajouter une ressource externe nous ajoutons déjà un
namespace à la fenêtre :
Il suffit d’ajouter une ligne dans la balise Window
xmlns:votreNom="clr-namespace:VotreNameSpace«
Pour maintenant ajouter au ressource
<Window.Resources>
<votreNom:votreClasses x:Key=« maKey"/>
</Window.Resources>
<Grid>
<ListBox ItemsSource="{Binding
Source={StaticResource maKey},Path=maListe}"/>
2. a. staticRessource
Je vous parlais du data template auparavant et ici nous n’avons pas
besoin de namespace, nous l’écrivons en dure.
<Window.Resources>
<DataTemplate x:Key="DataTemplateVoiture">
<StackPanel Background="{Binding Couleur}">
<TextBlock Text="{Binding Marque}"/>
<TextBlock Text="{Binding Model }»/>
<TextBlock Text="{Binding NbPorte}"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
2. a. staticRessource
Nous pouvons mettre beaucoup de choses dans le bloc ressource par
exemple les styles, les animations, les converter ( que l‘on verra
juste après)etc…
Démonstration
2. b. Converter
Comme le nom l’indique, il va nous servir à convertir des données.
C’est-à-dire qu’il va nous convertir du coté vu et non pas coté code
même si c’est une classe qui implémente l’interface
IValueConverter qui comprend deux méthodes convert et
convertback, en général on implémente uniquement convert.
Donc la donnée binder est par exemple un booléen sauf qu’elle est
binder sur visbility qui prend en paramètre visible et collapse. On va
donc utiliser le converter pour transformer bool to visibility.
Démonstration
2. c. Selector
Le dataTemplateSelector permet de sélectionner un template en
fonction des données d’entrée. Elle marche un peu comme le
convertor à quelque détails près. D’abord pour la classe nous
implémentons l’objet DataTemplateSelector et on override la
méthode SelectTemplate. Ensuite nous créons minimum deux
propriétés de type DataTemplate dans lesquels nous allons stocker
nos templates.
Le paramètre item vous donnera l’item courent.
Démonstration
2. c. Selector
Il existe un autre moyen pour faire cela lorsque nous avons des
types différents : au lieux d’utiliser les Key pour le dataTemplate on
peux utiliser le Type.
Démonstration
2. d. Validator
Ici nous allons voir un certain nombre de choses…
Tout d’abord, le controlTemplate, c’est un peu comme un
dataTemplate sauf que cela s’applique à un contrôle par exemple
un textblock. Il ne faut pas oublier d’ajouter ce template à la
propriété Validation.ErrorTemplate.
Donc comme toujours il y a une classe à implémenter cette fois
c’est ValidationRule et on surcharge la méthode validate.
2. e. RelativeSource
En WPF on peut accéder aux contrôles mère/fille sans leur donner
de nom et le récupérer avec elementName pour le Binding. De plus
le WPF nous génère des contrôles non affichés dans le xaml mais
que nous voulons tout de même récupérer.
Et pour faire cela nous utilisons les sources relatives.
2. e. RelativeSource
Syntaxe du Binding:
{Binding RelativeSource={
RelativeSource Mode=FindAncestor,
AncestorType={x:Type Border},
AncestorLevel=3
},Path=BorderBrush}
2. TP
Tout d’abord, vous pouvez garder votre application précédente et
nous allons l’améliorer. Nous allons ajouter une string photo avec le
chemin d’une image dans notre classe student qu’il faudra afficher
dans la liste et le détail(vous aurez besoin d’un converter).
On ajoute ensuite un booléen pour le sexe et en fonction de cela je
voudrais une bordure rose pour les filles et bleu pour les garçons ou
une propriété mac ou pc (essayer d’utiliser un template selector
même si il est pas trop approprier).
2. TP
Je désirerais aussi une validation des noms et prénoms (pour nom et
prénom uniquement des lettres, pas de caractère spéciaux)
Et en bonus ajouter un « parcourir »pour trouver une photo sur
l’ordinateur.
Pour vous aider voici le lien de la solution de présentation.
Lien

Contenu connexe

Tendances

Introduction à Angular JS
Introduction à Angular JSIntroduction à Angular JS
Introduction à Angular JS
Antoine Rey
 
Présentation de JavaServer Faces
Présentation de JavaServer FacesPrésentation de JavaServer Faces
Présentation de JavaServer Faces
JS Bournival
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
ENSET, Université Hassan II Casablanca
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
Ines Ouaz
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJSAbdoulaye Dieng
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
Rossi Oddet
 
Presentation JEE et son écossystéme
Presentation JEE et son écossystémePresentation JEE et son écossystéme
Presentation JEE et son écossystémeAlgeria JUG
 
Workshop spring session 2 - La persistance au sein des applications Java
Workshop spring   session 2 - La persistance au sein des applications JavaWorkshop spring   session 2 - La persistance au sein des applications Java
Workshop spring session 2 - La persistance au sein des applications JavaAntoine Rey
 
Java Server Faces (JSF)
Java Server Faces (JSF)Java Server Faces (JSF)
Java Server Faces (JSF)
Heithem Abbes
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVCNathaniel Richand
 
J2ee
J2eeJ2ee
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 
Maven
MavenMaven
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
eServices-Tp2: bpel
eServices-Tp2: bpeleServices-Tp2: bpel
eServices-Tp2: bpel
Lilia Sfaxi
 
Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
ENSET, Université Hassan II Casablanca
 

Tendances (20)

Introduction à Angular JS
Introduction à Angular JSIntroduction à Angular JS
Introduction à Angular JS
 
Présentation de JavaServer Faces
Présentation de JavaServer FacesPrésentation de JavaServer Faces
Présentation de JavaServer Faces
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 
Tutoriel ajax jquery
Tutoriel ajax jqueryTutoriel ajax jquery
Tutoriel ajax jquery
 
Introduction à AngularJS
Introduction à AngularJSIntroduction à AngularJS
Introduction à AngularJS
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Presentation JEE et son écossystéme
Presentation JEE et son écossystémePresentation JEE et son écossystéme
Presentation JEE et son écossystéme
 
Workshop spring session 2 - La persistance au sein des applications Java
Workshop spring   session 2 - La persistance au sein des applications JavaWorkshop spring   session 2 - La persistance au sein des applications Java
Workshop spring session 2 - La persistance au sein des applications Java
 
Java Server Faces (JSF)
Java Server Faces (JSF)Java Server Faces (JSF)
Java Server Faces (JSF)
 
Presentation Spring, Spring MVC
Presentation Spring, Spring MVCPresentation Spring, Spring MVC
Presentation Spring, Spring MVC
 
J2ee
J2eeJ2ee
J2ee
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Maven
MavenMaven
Maven
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
JSF 2.0
JSF 2.0JSF 2.0
JSF 2.0
 
eServices-Tp2: bpel
eServices-Tp2: bpeleServices-Tp2: bpel
eServices-Tp2: bpel
 
Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
 
Hibernate et jsf
Hibernate et jsfHibernate et jsf
Hibernate et jsf
 

En vedette

MVVM par Karim PIerre Maalej
MVVM par Karim PIerre MaalejMVVM par Karim PIerre Maalej
MVVM par Karim PIerre Maalej
CocoaHeads France
 
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013...
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013...Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013...
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013...
Alphorm
 
Accéder au développement Dot.Net et Asp.Net
Accéder au développement Dot.Net et Asp.NetAccéder au développement Dot.Net et Asp.Net
Accéder au développement Dot.Net et Asp.Net
Frédéric Vandenbriele
 
Alphorm.com - Formation programmer en Visual Basic .NET
Alphorm.com - Formation programmer en Visual Basic .NETAlphorm.com - Formation programmer en Visual Basic .NET
Alphorm.com - Formation programmer en Visual Basic .NET
Alphorm
 
Wygday2010 - silverlight 4 & wpf 4
Wygday2010 -  silverlight 4 & wpf 4Wygday2010 -  silverlight 4 & wpf 4
Wygday2010 - silverlight 4 & wpf 4
Wygwam
 
présentation soutenance PFE.ppt
présentation soutenance PFE.pptprésentation soutenance PFE.ppt
présentation soutenance PFE.pptMohamed Ben Bouzid
 

En vedette (7)

MVVM par Karim PIerre Maalej
MVVM par Karim PIerre MaalejMVVM par Karim PIerre Maalej
MVVM par Karim PIerre Maalej
 
WPF MVVM
WPF MVVMWPF MVVM
WPF MVVM
 
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013...
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013...Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013...
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013...
 
Accéder au développement Dot.Net et Asp.Net
Accéder au développement Dot.Net et Asp.NetAccéder au développement Dot.Net et Asp.Net
Accéder au développement Dot.Net et Asp.Net
 
Alphorm.com - Formation programmer en Visual Basic .NET
Alphorm.com - Formation programmer en Visual Basic .NETAlphorm.com - Formation programmer en Visual Basic .NET
Alphorm.com - Formation programmer en Visual Basic .NET
 
Wygday2010 - silverlight 4 & wpf 4
Wygday2010 -  silverlight 4 & wpf 4Wygday2010 -  silverlight 4 & wpf 4
Wygday2010 - silverlight 4 & wpf 4
 
présentation soutenance PFE.ppt
présentation soutenance PFE.pptprésentation soutenance PFE.ppt
présentation soutenance PFE.ppt
 

Similaire à Cours wpf avancé

Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHP
kemenaran
 
cours dev d'applications web moderne avec ReactJS
cours dev d'applications web moderne avec ReactJScours dev d'applications web moderne avec ReactJS
cours dev d'applications web moderne avec ReactJS
aissamjadli
 
Rapport tp3 j2ee
Rapport tp3 j2eeRapport tp3 j2ee
Rapport tp3 j2ee
Soukaina Boujadi
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
Abdoulaye Dieng
 
Cours java smi 2007 2008
Cours java smi 2007 2008Cours java smi 2007 2008
Cours java smi 2007 2008Khalil Lechheb
 
Cours java smi 2007 2008
Cours java smi 2007 2008Cours java smi 2007 2008
Cours java smi 2007 2008Khalil Lechheb
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
Abdoulaye Dieng
 
Chapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdfChapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdf
BoubakerMedanas
 
Chapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdfChapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdf
BoubakerMedanas
 
Entity_framework_db first
Entity_framework_db firstEntity_framework_db first
Entity_framework_db first
Zineb ELGARRAI
 
Adoef formation-ado-net-entity-framework
Adoef formation-ado-net-entity-frameworkAdoef formation-ado-net-entity-framework
Adoef formation-ado-net-entity-frameworkCERTyou Formation
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
Abdoulaye Dieng
 
Framework Hibernate
Framework HibernateFramework Hibernate
Framework Hibernate
Ines Ouaz
 
M31_Chapitre 4-JavaScript.pdf
M31_Chapitre 4-JavaScript.pdfM31_Chapitre 4-JavaScript.pdf
M31_Chapitre 4-JavaScript.pdf
AbderrahimELMhouti1
 
Formation cakephp
Formation cakephpFormation cakephp
Formation cakephp
Ezzaoufi Amine
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
Thomas Bodin
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
david deraedt
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
david deraedt
 
Android-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursAndroid-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateurs
Lilia Sfaxi
 

Similaire à Cours wpf avancé (20)

Formation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHPFormation PHP avancé - Cake PHP
Formation PHP avancé - Cake PHP
 
cours dev d'applications web moderne avec ReactJS
cours dev d'applications web moderne avec ReactJScours dev d'applications web moderne avec ReactJS
cours dev d'applications web moderne avec ReactJS
 
Springioc
SpringiocSpringioc
Springioc
 
Rapport tp3 j2ee
Rapport tp3 j2eeRapport tp3 j2ee
Rapport tp3 j2ee
 
Introduction à React JS
Introduction à React JSIntroduction à React JS
Introduction à React JS
 
Cours java smi 2007 2008
Cours java smi 2007 2008Cours java smi 2007 2008
Cours java smi 2007 2008
 
Cours java smi 2007 2008
Cours java smi 2007 2008Cours java smi 2007 2008
Cours java smi 2007 2008
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Chapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdfChapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdf
 
Chapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdfChapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdf
 
Entity_framework_db first
Entity_framework_db firstEntity_framework_db first
Entity_framework_db first
 
Adoef formation-ado-net-entity-framework
Adoef formation-ado-net-entity-frameworkAdoef formation-ado-net-entity-framework
Adoef formation-ado-net-entity-framework
 
Introduction à Symfony
Introduction à SymfonyIntroduction à Symfony
Introduction à Symfony
 
Framework Hibernate
Framework HibernateFramework Hibernate
Framework Hibernate
 
M31_Chapitre 4-JavaScript.pdf
M31_Chapitre 4-JavaScript.pdfM31_Chapitre 4-JavaScript.pdf
M31_Chapitre 4-JavaScript.pdf
 
Formation cakephp
Formation cakephpFormation cakephp
Formation cakephp
 
Outils front-end
Outils front-endOutils front-end
Outils front-end
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
 
Android-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursAndroid-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateurs
 

Dernier

Proyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de pazProyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de paz
Morzadec Cécile
 
BATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en FranceBATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en France
Txaruka
 
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
MustaphaZhiri
 
Presentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechniquePresentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechnique
mohammadaminejouini
 
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union
 
Veille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdfVeille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdf
frizzole
 
Margaux Laurens - Neel.pptx
Margaux        Laurens     -     Neel.pptxMargaux        Laurens     -     Neel.pptx
Margaux Laurens - Neel.pptx
Txaruka
 

Dernier (7)

Proyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de pazProyecto Erasmus Jardineros y jardineras de paz
Proyecto Erasmus Jardineros y jardineras de paz
 
BATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en FranceBATIMENT 5.pptx. Fil français tourné en France
BATIMENT 5.pptx. Fil français tourné en France
 
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
Dimensionnement réseau de transmission pour un réseau GSM-R - AIT KADDOUR Ghi...
 
Presentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechniquePresentation powerpoint sur la filiere electrotechnique
Presentation powerpoint sur la filiere electrotechnique
 
Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023Bibliothèque de L'Union - Bilan de l'année 2023
Bibliothèque de L'Union - Bilan de l'année 2023
 
Veille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdfVeille Audocdi 90 - mois de juin 2024.pdf
Veille Audocdi 90 - mois de juin 2024.pdf
 
Margaux Laurens - Neel.pptx
Margaux        Laurens     -     Neel.pptxMargaux        Laurens     -     Neel.pptx
Margaux Laurens - Neel.pptx
 

Cours wpf avancé

  • 1. Cours WPF avancé Labo développement Microsoft Supinfo
  • 2. Sommaire 1. Binding et introduction au datacontext a. Binding d’une propriété b. Notification de changement c. Binding sur des listes d. Binding d’élément WPF 2. Options avancées a. Static Ressource b. Converter c. Selector d. Validator e. RelativeSource
  • 3. Windows Présentation Fondation alias WPF Le wpf c’est un moyen moderne fourni par le Framework .NET a partir de la version 3.0 de faire des applications fenêtre (client lourd) pour Windows .
  • 4. 1. Binding et introduction au datacontext Première partie! 1. Binding et introduction au datacontext
  • 5. 1. Binding et introduction au datacontext Dans cette première partie nous allons parcourir le domaine de la liaison dynamique de données en WPF et la notion de datacontext a travers des exemples concrets.
  • 6. 1. a. Binding d’une propriété • Propriété de n’importe quel type. • Xaml on bind sur les propriétés des controles. Syntaxe: Xaml: Text="{Binding Path=stringToBind}" Coté code: public string stringToBind { get; set; }
  • 7. 1. a. Binding d’une propriété Le mode … Permet de définir le sens ou les sens du Binding Syntaxe: Xaml: Text="{Binding Path=stringToBind,Mode=TwoWay}" Coté code: public string stringToBind { get; set; }
  • 8. 1. a. Binding d’une propriété Le mode … Mode: Sens: TwoWay Agit dans les deux sens si la propriété bindé va être modifiée, elle le sera dans la fenêtre et vis versa. OneWay Seulement de la propriété vers la fenêtre. OneTime Pareil que OneWay mais pas de mise a jour, garde la première valeur. OneWayToSource Seulement de la fenêtre vers la propriété
  • 9. 1. a. Binding d’une propriété Rapidement a propos du datacontext C’est une notion compliquée, c’est un objet auquel on va binder les éléments. Nous allons, pour le début, le mettre dans l’objet de la fenêtre. On le retrouvera dans peu de temps
  • 10. 1. a. Binding d’une propriété Démo rapide!
  • 11. 1. b. Notification de changement Pourquoi cela ne fonctionne pas ? Lorsque l’on fait de l’informatique la solution ne se trouve pas aussi facilement que l’on pourrait le penser , il faut savoir qu’il faut notifier lorsque nos données, nos variables changent.
  • 12. 1. b. Notification de changement Comment faire cela? En implémentant l’interface INotifyPropertyChanged et ajouter un évènement à chaque changements. Petite démonstration pour vous montrer un exemple concret et ce sera toujours de cette manière qu’il faudra le faire.
  • 13. 1. c. Binding sur des listes Comment ça fonctionne? C’est également une propriété alors cela fonctionne de la même manière que précédemment. On utilise souvent les listes dans les contrôles listbox ou listView. Démonstration
  • 14. 1. c. Binding sur des listes Pourquoi ça ne fonctionne toujours pas? Même raison que tout a l’heure pas de notifications, heureusement le Framework pense a nous il existe des listes un peu spéciales: les ObservableCollection qui notifient la fenêtre. Démonstration
  • 15. 1. c. Binding sur des listes Et pour les listes d’objets (type référence)? Il existe pleins de solutions qui nous amène a faire un certain nombre de choses intéressantes
  • 16. 1. c. Binding sur des listes Que faire? Comment? Le DisplayMemberPath Affiche la propriété choisi de l’objet Le dataTemplate On créer un template d’affichage en Xaml(on va voir ca en détails au prochain slide)
  • 17. 1. c. Binding sur des listes Le data template… syntaxe(on expose les nœuds): <ListBox Name="ListBox2" ItemsSource="{Binding}" > <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal« > <TextBlock Text="{Binding Nom}" Margin="3"/> <TextBox Text="{Binding Prenom}" Margin="3"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
  • 18. 1. c. Binding sur des listes Le datatemplate à pour datacontext le type d’objet de la liste par exemple si itemsource est une liste de Personne le datacontext sera l’objet Personne. Le dataTemplate peut être enregistré dans une ressource ( expliqué un peu plus loin) Démonstration
  • 19. 1. d. Binding d’élément WPF On peut binder directement sur un autre contrôle WPF grâce a elementname (une propriété du Binding) qui permet d’avoir l’élément en source. Syntaxe :{Binding ElementName=ListBox3,Path=SelectedItem}  Démonstration
  • 20. 1. FIN Avez-vous des questions sur cette partie?
  • 21. 1. Exercice Tout d’abord nous créons une nouvelle fenêtre wpf. Du coté code une classe student avec nom, prénom, Idbooster, Campus et promo. Ensuite vous en faite une listbox qui affiche nom et prénom. Quand nous sélectionnons un étudiant nous voulons afficher les détails et pouvoir les modifier. Si vous avez le temps , vous pouvez faire un bouton ajouter et supprimer.(L’étudiant ajouté devra être sélectionné d’office).
  • 23. 2. Option Avancé Dans cette partie nous allons voir comment manipuler les staticRessource (ajouter des namespace a votre xaml et les key), puis comment écrire du code orienté wpf avec les converter , validator , selector et autre Transformers. Nous verrons également la notion de RelativeSource.
  • 24. 2. a. staticRessource Je vous avais dit tout a l’heure que nous pouvions mettre un data template en ressource et c’est donc maintenant que nous allons le mettre en œuvre. Nous pouvons placer nos ressources n’importe où dans le xaml mais il est souvent placé dans la balise Window car il est accessible partout <Window.Resources> vos ressources </Window.Resources>
  • 25. 2. a. staticRessource Si nous voulons ajouter une ressource externe nous ajoutons déjà un namespace à la fenêtre : Il suffit d’ajouter une ligne dans la balise Window xmlns:votreNom="clr-namespace:VotreNameSpace« Pour maintenant ajouter au ressource <Window.Resources> <votreNom:votreClasses x:Key=« maKey"/> </Window.Resources> <Grid> <ListBox ItemsSource="{Binding Source={StaticResource maKey},Path=maListe}"/>
  • 26. 2. a. staticRessource Je vous parlais du data template auparavant et ici nous n’avons pas besoin de namespace, nous l’écrivons en dure. <Window.Resources> <DataTemplate x:Key="DataTemplateVoiture"> <StackPanel Background="{Binding Couleur}"> <TextBlock Text="{Binding Marque}"/> <TextBlock Text="{Binding Model }»/> <TextBlock Text="{Binding NbPorte}"/> </StackPanel> </DataTemplate> </Window.Resources>
  • 27. 2. a. staticRessource Nous pouvons mettre beaucoup de choses dans le bloc ressource par exemple les styles, les animations, les converter ( que l‘on verra juste après)etc… Démonstration
  • 28. 2. b. Converter Comme le nom l’indique, il va nous servir à convertir des données. C’est-à-dire qu’il va nous convertir du coté vu et non pas coté code même si c’est une classe qui implémente l’interface IValueConverter qui comprend deux méthodes convert et convertback, en général on implémente uniquement convert. Donc la donnée binder est par exemple un booléen sauf qu’elle est binder sur visbility qui prend en paramètre visible et collapse. On va donc utiliser le converter pour transformer bool to visibility. Démonstration
  • 29. 2. c. Selector Le dataTemplateSelector permet de sélectionner un template en fonction des données d’entrée. Elle marche un peu comme le convertor à quelque détails près. D’abord pour la classe nous implémentons l’objet DataTemplateSelector et on override la méthode SelectTemplate. Ensuite nous créons minimum deux propriétés de type DataTemplate dans lesquels nous allons stocker nos templates. Le paramètre item vous donnera l’item courent. Démonstration
  • 30. 2. c. Selector Il existe un autre moyen pour faire cela lorsque nous avons des types différents : au lieux d’utiliser les Key pour le dataTemplate on peux utiliser le Type. Démonstration
  • 31. 2. d. Validator Ici nous allons voir un certain nombre de choses… Tout d’abord, le controlTemplate, c’est un peu comme un dataTemplate sauf que cela s’applique à un contrôle par exemple un textblock. Il ne faut pas oublier d’ajouter ce template à la propriété Validation.ErrorTemplate. Donc comme toujours il y a une classe à implémenter cette fois c’est ValidationRule et on surcharge la méthode validate.
  • 32. 2. e. RelativeSource En WPF on peut accéder aux contrôles mère/fille sans leur donner de nom et le récupérer avec elementName pour le Binding. De plus le WPF nous génère des contrôles non affichés dans le xaml mais que nous voulons tout de même récupérer. Et pour faire cela nous utilisons les sources relatives.
  • 33. 2. e. RelativeSource Syntaxe du Binding: {Binding RelativeSource={ RelativeSource Mode=FindAncestor, AncestorType={x:Type Border}, AncestorLevel=3 },Path=BorderBrush}
  • 34. 2. TP Tout d’abord, vous pouvez garder votre application précédente et nous allons l’améliorer. Nous allons ajouter une string photo avec le chemin d’une image dans notre classe student qu’il faudra afficher dans la liste et le détail(vous aurez besoin d’un converter). On ajoute ensuite un booléen pour le sexe et en fonction de cela je voudrais une bordure rose pour les filles et bleu pour les garçons ou une propriété mac ou pc (essayer d’utiliser un template selector même si il est pas trop approprier).
  • 35. 2. TP Je désirerais aussi une validation des noms et prénoms (pour nom et prénom uniquement des lettres, pas de caractère spéciaux) Et en bonus ajouter un « parcourir »pour trouver une photo sur l’ordinateur. Pour vous aider voici le lien de la solution de présentation. Lien