ComponentOne DropDown for WPF - HTML5 / jQuery, ASP.NET, WPF
Cours wpf avancé
-
Upload
lucas-zientek -
Category
Education
-
view
1.119 -
download
0
description
Transcript of Cours wpf avancé
![Page 1: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/1.jpg)
Cours WPF avancéLabo développement Microsoft Supinfo
![Page 2: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/2.jpg)
Sommaire
1. Binding et introduction au datacontexta. Binding d’une propriétéb. Notification de changementc. Binding sur des listesd. Binding d’élément WPF
2. Options avancéesa. Static Ressourceb. Converterc. Selectord. Validatore. RelativeSource
![Page 3: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/3.jpg)
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 .
![Page 4: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/4.jpg)
1. Binding et introduction au datacontextPremière partie!
1. Binding et introduction au datacontext
![Page 5: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/5.jpg)
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.
![Page 6: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/6.jpg)
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; }
![Page 7: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/7.jpg)
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; }
![Page 8: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/8.jpg)
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é
![Page 9: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/9.jpg)
1. a. Binding d’une propriété
Rapidement a propos du datacontextC’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
![Page 10: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/10.jpg)
1. a. Binding d’une propriété
Démo rapide!
![Page 11: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/11.jpg)
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.
![Page 12: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/12.jpg)
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.
![Page 13: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/13.jpg)
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
![Page 14: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/14.jpg)
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
![Page 15: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/15.jpg)
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
![Page 16: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/16.jpg)
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)
![Page 17: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/17.jpg)
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>
![Page 18: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/18.jpg)
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
![Page 19: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/19.jpg)
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
![Page 20: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/20.jpg)
1. FIN
Avez-vous des questions sur cette partie?
![Page 21: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/21.jpg)
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).
![Page 22: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/22.jpg)
2. Options avancéesDeuxieme partie.
![Page 23: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/23.jpg)
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.
![Page 24: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/24.jpg)
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>
![Page 25: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/25.jpg)
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}"/>
</Grid>
![Page 26: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/26.jpg)
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>
![Page 27: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/27.jpg)
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
![Page 28: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/28.jpg)
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
![Page 29: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/29.jpg)
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
![Page 30: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/30.jpg)
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
![Page 31: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/31.jpg)
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.
![Page 32: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/32.jpg)
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.
![Page 33: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/33.jpg)
2. e. RelativeSource
Syntaxe du Binding:
{Binding RelativeSource={
RelativeSource Mode=FindAncestor,
AncestorType={x:Type Border},
AncestorLevel=3
},Path=BorderBrush}
![Page 34: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/34.jpg)
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).
![Page 35: Cours wpf avancé](https://reader034.fdocuments.us/reader034/viewer/2022052507/5584547bd8b42a5b0a8b4dea/html5/thumbnails/35.jpg)
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