Présentation de la formation
Windows Presentation
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Si...
Plan
• Présentation du formateur
• Qu’est-ce que c’est WPF ?
• Le plan de formation
• La certification Microsoft 70-511
• ...
Présentation du formateur
• Emmanuel DURIN
• emmanuel@durin.org
• Consultant & Formateur Microsoft .Net, C++
• Mission con...
Qu’est-ce que c’est WPF?
• Windows Presentation Foundation est la couche de Présentation de
.Net
• En vigueur depuis .Net ...
Le plan de formation
1. Présentation générale
2. Conception de l’IHM avec XAML
3. Ressources et Styles
4. Liaison de donné...
La certification 70-511
• Cette formation prépare au passage de la certification 70-511 :
• TS: Windows Applications Devel...
Publics concernés
• Développeurs, programmeurs
• Chefs de Projets
• Architectes
Windows Presentation Foundation avec Visua...
Connaissances requises
• Connaissance de C# ou de Vb.Net, autre langage .Net
• Ou bien connaissance d’un autre langage de ...
Présentation de l’étude de cas
• Réalisation de parties représentatives d’un progiciel : ERPPlus
• Nombreuses démonstratio...
D’autres formations développement sur Alphorm
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Formations développement .NET sur Alphorm
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Liens des ressources
• Documentations & Bibliothèques techniques:
Introduction to WPF
https://msdn.microsoft.com/en-us/lib...
Bibliographie
• Programming WPF
• Livre complet et détaillé de bonne qualité
Windows Presentation Foundation avec Visual S...
Are you ready ? ☺
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Bases de XAML
Conception de l’IHM
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www....
Objectif
•Découvrir les bases de XAML
XAML décrit une arborescence d’objets graphiques
XAML utilisé pour les IHM (Silverli...
XAML et Codebehind
Une Page, une Window, un UserControl sont conçus graphiquement
par glisser-déposer de composants dans u...
Instancier les composants
XAML Permet d’instancier des objets graphiques, mais aussi n’importe quelle
catégorie d’objet .N...
XAML : un langage objet
<Button Content="Remplir" />
<Button>
<Button.Content>Remplir</Button.Content>
</Button>
Propriété...
XAML : nommage des composants
Le nommage des composants permet de les utiliser dans la page, après l’appel
à InitializeCom...
XAML : instancier un objet
XAML permet d’instancier des objets de n’importe quelle classe
L’association namespace-xml à na...
XAML : Evénements
private void ButtonFillClick(object sender, RoutedEventArgs e){
personnes.Add(new Personne { Nom = "Tour...
Evénements, abonnement dynamique
L’application peut s’abonner dynamiquement :
// Abonnement :
buttonFill.Click += ButtonFi...
Ce qu’on a couvert
XAML, syntaxe xml d’instanciation d’objets
La méthode InitializeComponent
Equivalence XAML et .Net
Wind...
Disposer les contrôles
Conception de l’IHM
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : ht...
Propriétés des composants
Un certain nombre de propriétés permettent d’ajuster la disposition
des composants :
Margin. Ex ...
Cacher les composants
Opacity : 0 à 1
Plus ou moins transparent
Visibility
Visible
Hidden, l’objet occupe toujours de l’es...
Ce qu’on a couvert
Les différentes propriétés de placement des composants graphiques
Conseil : ne pas utiliser de marges d...
Familles de composants
Conception de l’IHM
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : ht...
Plan
De nombreux contrôles existent
On peut regrouper certains contrôles en familles :
ContentControls
HeaderedControls
It...
ContentControls - exemples
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
ContentControls
Ont une propriété Content qui peut contenir :
Du texte
Un autre composant graphique
<Button>
<Button.Conte...
HeaderedContentControls
Héritent de ContentControl :
Ont un Header en plus
Windows Presentation Foundation avec Visual Stu...
Ce qu’on a couvert
On a découvert deux familles de contrôles :
ContentControls pour personnaliser le contenu
HeaderedConte...
Les Panels
Conception de l’IHM
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Les Panels
Site : htt...
Les Panels
Ils regroupent plusieurs composants enfants
Ils positionnent souvent les enfants à travers des propriétés attac...
Disposition des composants par le parent
Les composants : sont souvent disposés automatiquement par leur
parent grâce à :
...
Canvas
Permet de positionner les enfants en coordonnées Top, Left grâce à
des propriétés attachées Canvas.Top et Canvas.le...
StackPanel
Empile les composants selon la propriété orientation
( défaut = vertical )
On peut facilement composer les pane...
DockPanel
Place les composants sur les différents bords du DockPanel.
Grâce à la propriété attachée DockPanel.Dock
Plusieu...
Grid
Permet de disposer les composants à une intersection Row/Column
Il faut définir les lignes et les colonnes ( …avec le...
Border
Permet de doter d’une bordure un composant qui en est dénué
Permet aussi de fournir des bordures arrondies
Pas un v...
Ce qu’on a couvert
Les Panels, qui permettent d’organiser semi-automatiquement leurs enfants
Les propriétés attachées
Wind...
Les Ressources
Ressources et styles
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Les Ressources
S...
Plan
Découvrir les ressources et leur utilisation
Dictionnaires de ressources
Accès programmatique
Ressources dynamiques
W...
Les ressources XAML
Les ressources rendent un objet réutilisable
Notion de charte graphique
Elles sont toutes nommées par ...
Les ressources : où les définir
Les ressources peuvent être définies dans :
L’Application (App.xaml),
La page / la fenêtre...
Ressources : un exemple
<Page.Resources>
<LinearGradientBrush x:Key="sunriseBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<G...
XAML : ressources, MergedDictionary
Les dictionnaires de ressources permettent d’éviter l’inflation du fichier
App.xaml
<A...
Accès programmatique
• Les ressources sont accessibles à partir de l’application :
backButton.Style =
Application.Current....
DynamicRessource
• Les entrées des dictionnaires sont remplaçables :
Utile si on change une entrée dans un dictionnaire
ro...
Ce qu’on a couvert
Les ressources, moyen de factoriser son apparence
Elles permettent de faire des chartes graphiques
Blen...
Les Styles
Ressources et styles
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Les Styles
Site : ht...
Plan
Style implicite
Définir un style pour tous les composants d’un type
Classes de style
Définir un style pour un sous en...
Style implicite
• Des objets <Style> peuvent être définis dans les ressources
Permettent de créer des chartes graphiques
•...
« Classe » de style : style explicite
Tous les boutons n’ont pas forcément la même apparence.
Le style peut être défini da...
Héritage de style
Comme l’héritage objet !
On peut redéfinir ou ajouter des propriétés
<Style TargetType="Button" x:Key="r...
Ce qu’on a couvert
Les styles peuvent être définis pour une classe de contrôles
Les styles peuvent être nommés pour avoir ...
Les templates
Ressources et styles
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www...
Plan
Les modèles (templates)
Arbre visuel et arbre logique
Windows Presentation Foundation avec Visual Studio 2013 alphorm...
Redéfinition du modèle d’affichage
On peut totalement redéfinir le modèle d’affichage des composants
avec les templates !
...
Templates spécialisés
Il n’est pas toujours nécessaire de reprendre tout le template d’un
contrôle.
Il en existe des spéci...
Arbre logique et arbre visuel
Arbre logique (*) : ce qui disposé en XAML
Arbre visuel : inclut les templates, ce que
l’uti...
Caractéristiques des Arbres
Arbre logique pour :
Héritage des DependencyProperty
Résolution des ressources dynamiques
Rech...
VisualTreeHelper et LogicalTreeHelper
Utile pour créer des procédures pour parcourir les arbres
public static T FindVisual...
Ce qu’on a couvert
Les templates permettent de redéfinir totalement l’apparence du
composant
Tout en gardant le même compo...
DataBinding et
DataBinding
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www.alphorm...
Plan
DataBinding
INotifyPropertyChanged
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
DataBinding : liaison de données
Il sert à lier les propriétés des composants avec des propriétés d’objets
.Net.
Il foncti...
DataContext
DependencyProperty qui fournit l’objet du binding.
Les Bindings se font sur les propriétés du DataContext
La p...
DataBinding entre éléments
<Slider Name="slider1" />
<TextBox Text="{Binding ElementName=slider1, Path=Value, Mode=TwoWay}...
Bindings de champs
Il lie les propriétés des objets IHM aux objets métiers.
Source Target
Windows Presentation Foundation ...
Modes de Binding
Chaque propriété a un mode de binding par défaut qui
peut être changé
OneWay
• Mode par défaut pour IsChe...
Autres Binding
Pour naviguer dans l’arborescence visuelle :
<TextBlock Text="{Binding Title, RelativeSource={RelativeSourc...
INotifyPropertyChanged
Implémentée par les objets qui notifient l’IHM lors de modifications
public interface INotifyProper...
INotifyPropertyChanged : exemple
public class Personne : INotifyPropertyChanged{
public event PropertyChangedEventHandler ...
Ce qu’on a couvert
Le Databinding
Binding sur DataContext
Binding entre éléments
INotifyPropertyChanged
Implémentation par...
IValueConverter
DataBinding
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www.alphor...
Objectif
•Découvrir IValueConverter pour convertir une
valeur ou un type pour l’affichage
Windows Presentation Foundation ...
Convertisseurs de données
Parfois les données du modèle ne sont pas prêtes à être
afficher telles quelles
Besoin de format...
Convertisseurs, côté XAML
<Window xmlns:converter="clr-namespace:FormulairePersonne">
<Window.Resources>
<converter:Boolea...
Implémentation IValueConverter
public class BooleanToVisibilityConverter : IValueConverter {
// convertir les données pour...
Ce qu’on a couvert
IValueConverter pour convertir des données métiers en données
affichables
Ne doit pas contenir de logiq...
Validation de surface
DataBinding
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www....
Plan
ExceptionValidationRule pour attraper les erreurs de
conversion
ValidationRule personnalisée
Affichage du message d’e...
ExceptionValidationRule
Attraper les exceptions lors de la conversion
<TextBox><TextBox.Text>
<Binding Path="Age" NotifyOn...
ValidationRule personnalisée
public class NumberRangeRule : ValidationRule{
public override ValidationResult Validate(obje...
Affichage du message d’erreur
Les messages d’erreurs sont accessibles
Pourquoi pas un ItemsControl si on veut tous les aff...
Personnalisation du template des erreurs
Le template du composant peut être modifié pour intégrer le message
d’erreur
<Tex...
Ce qu’on a couvert
ExceptionValidationRule pour attraper les erreurs de
conversion
ValidationRule personnalisée
Affichage ...
Validation
DataBinding
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www.alphorm.com...
Plan
Toutes les validations ne peuvent être simples.
Validations déléguées à l’objet métier
Plan :
Validation par les exce...
Validation par les propriétés
Une Propriété qui déclenche une exception, est source d’erreur
public String Libellé{
set {
...
IDataErrorInfo
Permet de fournir une erreur associée à chaque champ de formulaire
Typiquement implémentée avec une table a...
INotifyDataErrorInfo
Pour les validations asynchrones, longues
Car source d’événement quand la validation est réalisée
Per...
Ce qu’on a couvert
Validation par les exceptions de propriété
IDataErrorInfo pour une erreur par propriété
INotifyDataErro...
Données de conception
DataBinding
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www....
Objectif
En conception graphique, il est nécessaire de voir les données pour
concevoir les écrans.
Première solution : exé...
Fournir des données de conception avec Blend
Consiste à instancier une classe en XAML
Tout se fait graphiquement sous Blen...
Ce qu’on a couvert
Les données de conception avec Blend
On reviendra à ce sujet lorsqu’on s’intéressera aux
ItemsControls
...
Composants et Templates
ItemsControls
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://...
Plan
Hiérarchie des ItemsControls
ItemTemplate et ItemsPanel
DataGrid
TreeView
Windows Presentation Foundation avec Visual...
Hiérarchie des ItemsControls
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
ListBox, ComboBox
Servent à afficher des listes d’objets et faire des sélections
Windows Presentation Foundation avec Visu...
ItemTemplate, ItemsPanel
ItemTemplate
Pour personnaliser l’affichage de chaque ligne
De type DataTemplate
ItemsPanel
Pour ...
DataGrid
Servent à afficher des listes d’objets et faire des sélections
Permet l’édition le tri
Génération automatique de ...
DataGrid – définition des colonnes
Désactivation de AutoGenerateColumns
Plusieurs templates de colonnes disponibles
DataGr...
DataGridTemplateColumn
<DataGrid Name="dataGridPersonnes AutoGenerateColumns=“False”>
<DataGrid.Columns>
<DataGridTextColu...
TreeView
Utilisent des HierarchicalDataTemplate
Le template précise où trouver les enfants grâce à ItemsSource
DataType in...
Ce qu’on a couvert
Hiérarchie des ItemsControls
ItemTemplate et ItemsPanel
DataGrid pour l’édition
TreeView pour les donné...
Choisir le Template
ItemsControls
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www....
Plan
DataType du DataTemplate
ItemTemplateSelector pour un choix dynamique
Windows Presentation Foundation avec Visual Stu...
DataTemplate avec DataType
Des templates différents peuvent être utilisés selon l’Item à
afficher
Le choix du template se ...
ItemTemplateSelector
Classe qui permet de sélectionner le template pour chaque item
Pas forcément en fonction du type
<Win...
Implémentation de l’ItemTemplateSelector
public class TabControlTemplateSelector : DataTemplateSelector{
public override D...
Ce qu’on a couvert
DataType du DataTemplate
ItemTemplateSelector pour un choix dynamique
Windows Presentation Foundation a...
ItemsControls
ObservableCollection<T>
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://...
Plan
ObservableCollection<T>
CollectionViewSource
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
ObservableCollection<T>
Collection indexée, comme les listes
Emettrice d’événements lors d’ajout, suppression, vidage
Les ...
ObservableCollection<T>, cinématique
persons = new ObservableCollection<Person>();
Windows Presentation Foundation avec Vi...
CollectionViewSource
S’intercale entre les données et le composant
Permet d’activer des tris, filtrages, regroupements sur...
CollectionViewSource - exemple
ObservableCollection<Personne> personnes = …
CollectionViewSource sourcePersonnes = new Col...
Ce qu’on a couvert
ObservableCollection<T>
CollectionViewSource
Windows Presentation Foundation avec Visual Studio 2013 al...
Données pour les listes
ItemsControls
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://...
Objectif
Il s’agit de donner des données aux listes (sous classe de
ItemsControls), lors de la conception
Par défaut les l...
Fournir les données avec Blend
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Ce qu’on a couvert
Les données de conception sont fournies par Blend
Peuvent être éditées à la main
Windows Presentation F...
Architecture MVVM
Model View ViewModel
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http:/...
Model View ViewModel
• Pattern architectural comparable à Model View Controller
ou Model View Presenter
• Placé au niveau ...
MVVM dans une architecture 3 tiers
Couche de présentation
View
Composants graphiques
ViewModel
Adaptation des données pour...
Détail de la couche de présentation
View
Binding fournit
les données à
afficher à
travers des
propriétés
Binding fournit
B...
Responsabilité du ViewModel
• ViewModel présente les données pour l’IHM
• Vers un code sans événement ( en apparence )
• T...
Ce qu’on a couvert
Pattern architectural MVVM
Expose des propriétés
Sur lesquelles se lie l’IHM
Notifie l’IHM avec des évé...
Les Commandes
Model View ViewModel
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www...
Plan
• Les commandes
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Les commandes
• Design pattern de la commande
• Les Commandes sont souvent exposées par des propriétés de L’Objet
MVVM
• P...
Commande activée ou pas
La commande est émettrice d’événements pour signaler son changement
d’état à l’IHM
public interfac...
Commands et CommandSources
ICommand
CanExecute( param ) :bool
Execute(param)
CanExecuteChanged
ICommandSource
Command
Comm...
Ce qu’on a couvert
• Les commandes
CommandSource
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
RoutedCommands
Model View ViewModel
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://ww...
Plan
• RoutedCommands
• CommandBindings
• InputBindings
Windows Presentation Foundation avec Visual Studio 2013 alphorm.co...
RoutedCommands : propagation
Window
1 : CommandBinding.PreviewExecuted
6 : CommandBinding.Executed
Tunneling
Bubbling
Grâc...
RoutedCommand « globales »
Collection de commandes « standards » :
ApplicationCommands {New, Open, Save, Find, Replace, Un...
CommandBinding
Permet d’associer du comportement spécifiquement à une commande
dans le contexte d’un composant
public clas...
InputBinding
Permet d’associer un raccourci clavier ou une action souris à une
commande
<Window.InputBindings>
<KeyBinding...
Commandes : hiérarchie
ICommand
CanExecute( param ) :bool
Execute(param)
CanExecuteChanged
ICommandSource
Command
CommandP...
Ce qu’on a couvert
• RoutedCommands
• CommandBindings
• InputBindings
Windows Presentation Foundation avec Visual Studio 2...
Implémentation
Glisser déposer
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www.alp...
Objectif
• Découvrir comment implémenter le Glisser-Déposer
( Drag ‘n Drop)
Windows Presentation Foundation avec Visual St...
Collaboration du glisser-déposer
Source Cible
DragDrop.DoDragDrop
(source, dataObject, dragDropEffects)
DragEnter
Entrée d...
Début du glisser-déposer
Permettre le déposer
this.AllowDrop = true;
Démarrer l’opération de glisser-déposer :
protected o...
Suivre le glisser-déposer côté cible
Rentrée dans le UIElement de dépose
protected override void OnDragEnter(DragEventArgs...
Suivre le glisser-déposer côté cible
Survol dans le UIElement de dépose
protected override void OnDragOver(DragEventArgs e...
Suivre le glisser-déposer côté cible
Sortie du UIElement de dépose
protected override void OnDragLeave(DragEventArgs e)
{
...
Ce qu’on a couvert
Le Glisser-Déposer
Source
Sur MouseMove démarrer avec DragDrop.DoDragDrop
Gérer QueryContinueDrag, Give...
Formats de données
Glisser déposer
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www...
Objectif
• Exposer et négocier les formats de données pour le glisser-
déposer
• Vérifier sur la cible que les données son...
Quand vérifier les formats ?
Source Cible
DragDrop.DoDragDrop DragEnter
MouseDown
GiveFeeedBack
DragOver
Exposer
les
forma...
Exposer les données
Proposer des données sous plusieurs formats pour accroître les
chances d’utilisation
protected overrid...
Accepter ou refuser les données pour la Cible
Lors du drop, mais aussi lors du DragOver
protected override void OnDrop(Dra...
Ce qu’on a couvert
• Exposer et négocier les formats de données pour le glisser-déposer
• Vérifier sur la cible que les do...
Les threads
Tâches de fond et WPF
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www....
Plan
• Démarrer un thread
• Synchroniser les ressources
• Mettre à jour l’IHM à partir d’un worker thread avec le
Dispatch...
Démarrer un Thread
• Dans une IHM sophistiquée, il peut être utile que des « worker threads» fassent les taches
longues sa...
Synchroniser les ressources
• Les objets partagés en lecture par deux threads nécessitent un accès
synchronisé
• Plusieurs...
Mettre à jour l’IHM à partir d’un Worker Thread
• Il est interdit de mettre à jour l’IHM à partir du thread non graphique....
Dispatcher pour rentrer dans le GUI Thread
• Le Dispatcher permet de résoudre ce problème
private void MiseAJourIHM(long p...
Ce qu’on a couvert
• Démarrer un thread
• Synchroniser les ressources
• Mettre à jour l’IHM à partir d’un worker thread av...
BackgroundWorker
Tâches de fond et WPF
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http:/...
Objectif
• Découvrir les facilités du BackgroundWorker
Démarrer une tâche de fond
Gérer l’affichage de la progression
Annu...
BackgroundWorker
• Le composant non graphique BackgroundWorker gère l’envoi des mises à jour de progrès
depuis le Thread g...
Cinématique du BackgroundWorker
User Handler
RunWorkerAsync()
Thread IHM Thread travailleur
DoWork
ReportProgress()
Progre...
Ce qu’on a couvert
• Les facilités du BackgroundWorker
Démarrer une tâche de fond
Gérer l’affichage de la progression
Annu...
Internationalisation
Localisation/Globalisation
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site...
Plan
Fichiers de ressource
Localisation avec LocBaml
Multilingual Toolkit
Windows Presentation Foundation avec Visual Stud...
Assemblées satellites
• Les ressources sont décrites dans des fichiers XML :
-LocalResource.resx (culture neutre)
-LocalRe...
Changement de Culture dynamique
• Pour changer la langue de l’application, modifier :
Thread.CurrentThread.CurrentUICultur...
Localisation avec LocBaml
Basée sur le principe des assemblées satellites :
1 assemblée satellite par Culture générée à pa...
Multilingual Toolkit
Génère automatiquement les traductions et les Resx
Grâce à un web service de Microsoft
Outil téléchar...
Ce qu’on a couvert
Fichiers de ressource
Localisation avec LocBaml
Multilingual Toolkit
Windows Presentation Foundation av...
WPFLocalizeExtension
Internationalisation
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : htt...
Plan
WPF Localization Extension
Localiser un contrôle
Changer la culture dynamiquement
Windows Presentation Foundation ave...
WPF Localization Extension
Projet codeplex pour localiser ses applications
Supporte WPF .Net 3.5+, SL 5, WP 7+
Par défaut ...
Localiser un contrôle
<Window …
xmlns:lex="http://wpflocalizeextension.codeplex.com"
lex:LocalizeDictionary.DesignCulture=...
Changer la culture dynamiquement
<ComboBox Name="comboCulture" SelectionChanged="CultureChanged" />
void MainWindow_Loaded...
Ce qu’on a couvert
WPF Localization Extension
Localiser un contrôle
Changer la culture dynamiquement
Windows Presentation ...
UserControls et
Contrôles personnalisés
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http:...
Plan
• UserControls
• Custom Controls
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Nécessité d’un contrôle personnalisé
Avant de créer une nouvelle classe, examiner les autres solutions :
1. Valoriser les ...
UserControls
• Visual studio permet de réaliser des composants personnalisés par
assemblage de composants en glisser-dépos...
UserControls : réalisation
• Pour rendre le composant réutilisable, il faut déclarer :
• Des propriétés classiques
• Pour ...
UserControls : attributs utilisables
• [Attributs] :
• Category, CustomCategory
• Description/ SRDescription( pour localis...
CustomControls : pas de XAML, que du code
• UserControls : Composition
• XAML + CS
• Permettent facilement l’agrégation pa...
Ce qu’on a couvert
• UserControls
• Custom Controls
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Routed Events
Contrôles personnalisés
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://...
Plan
• Routed Events
• Propagation
• Gestion globale
• Déclaration
Windows Presentation Foundation avec Visual Studio 2013...
Routed Events
• Evénements qui se propagent du haut en bas puis de bas en haut de
l’arborescence.
• Permet de traiter les ...
Routed Events : propagation
Window
Grid
1 : Window.PreviewMouseDown
2 : Grid.PreviewMouseDown
6 : Window. MouseDown
5 : Gr...
Gestion globale
• Les Routed Events peuvent être traités de manière globale
• Permet d’enregistrer un seul handler pour N ...
Déclarer un Routed Event
public class Tile : Button{
public static readonly RoutedEvent TapEvent =
EventManager.RegisterRo...
Ce qu’on a couvert
• Routed Events
• Propagation
• Gestion globale
Windows Presentation Foundation avec Visual Studio 2013...
Dependency Properties /
Contrôles personnalisés
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site...
Plan
• Dependency Properties
• Attached Properties
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
DependencyProperties
• Nouveauté Fx 2.0
• Applicables seulement aux DependencyObject
• Nécessaires au Binding
• Pas de sto...
Dependency Property : exemple
• Génération grâce à l’extrait de code (Snippet ) propdp
• Habillage par une propriété .Net
...
Attached Properties
• Permettent de coller des données extrinsèques à un élement
• Mais qui seront utilisées par un parent...
Attached Property : exemple
• Génération grâce à l’extrait de code (Snippet ) propa
public static int GetRow(DependencyObj...
Ce qu’on a couvert
• Dependency Properties
• Attached Properties
Windows Presentation Foundation avec Visual Studio 2013 a...
Transformations
Dessiner et imprimer
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://w...
Plan
• La plupart du temps, le dessin n’est pas nécessaire
• Les composants de base suffisent
• Mais on peut avoir besoin ...
Measure/ArrangeOverride
• Négociation en deux étapes entre un composant et son parent pour
l’attribution de l’espace
Paren...
RenderTransform
• Tout UIElement peut se voir appliquer des transformations
géométriques sur sa RenderTransform:
• RotateT...
Shapes
Classes qui représentent des formes.
Utilisables en XAML
Supportent le binding
Shape
DefiningGeometry : Geometry
Fi...
Path
• Permet de représenter toutes les shapes !
[ avec un peu d’habileté ;-) ]
• Blend permet de combiner (union, interse...
Path : syntaxe
Commande Syntaxe Explication
Move M x, y Point d’origine (x,y)
Line L x,y trait droit jusqu’en (x,y)
Horiz....
Ce qu’on a couvert
• Layout Pass, LayoutTransform et RenderTransform
• Les Shapes
• Manipulation avec blend
Windows Presen...
Streaming Geometry
Dessiner et imprimer
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http:...
Objectif
• Streaming Geometry pour des dessins avec des performances accrues
Windows Presentation Foundation avec Visual S...
Streaming Geometry
• La redéfinition de OnRender permet de réaliser les dessins
soi-même
protected override void OnRender(...
Autres API de dessin du DrawingContext
• DrawDrawing ( GlyphDrawing, VideoDrawing, ImageDrawing, GeometryDrawing, DrawingG...
Redéclencher le dessin
• Grâce à une DependencyProperty dotée d’une PropertyMetadata qui
déclenche le rendering
private st...
Ce qu’on a couvert
• Streaming Geometry pour des dessins avec des performances accrues
Windows Presentation Foundation ave...
Impression
Dessiner et imprimer
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www.al...
Plan
• Documents XPS
• Text Object Model, modèle de flux
• Affichage des documents
• Impressions
Windows Presentation Foun...
XPS = XML Paper Specification
• Format de document
Zip contenant de nombreux documents, souvent XML
Embarquent aussi les f...
Modèle paginé du XPS
FixedDocumentSequence
*
FixedDocument
*
FixedPage
Windows Presentation Foundation avec Visual Studio ...
Text Object Model pour les <FlowDocument>
• Modèle des TextBlock et des FlowDocuments, constitués de :
• Eléments Inline
<...
Afficher les documents
• Pour les FixedDocument
<DocumentViewer>
• Pour les FlowDocument :
<FlowDocumentPageViewer> : une ...
Imprimer
• XPSDocumentWriter
Pour imprimer un FixedDocument dans un fichier ou sur une imprimante
• Obtenir un XPSDocument...
Imprimantes
• PrintQueue
Pour imprimer sur une imprimante
PrintQueue.CreateXpsDocumentWriter(PrintDocumentImageableArea)
•...
Ce qu’on a couvert
• Documents XPS
• Text Object Model, modèle de flux
• Affichage des documents
• Impressions
Windows Pre...
Multimédia
Dessiner et imprimer
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www.al...
Plan
• MediaElement, contrôle de vidéo
• Les modes de MediaElement et MediaPlayer
• Mode indépendant et Mode Horloge
• Med...
MediaElement
MediaElement contrôle pour la vidéo
• Pour jouer une vidéo et contrôler le déroulement
• Basé sur Windows Med...
MediaPlayer et MediaElement en mode Indépendant
• L’Uri du media peut être spécifiée
• Le playback peut être contrôlé ( Pl...
MediaPlayer et MediaElement en mode Horloge
• L’Uri est spécifiée par un <MediaTimeline>
• Le playback est contrôlé par l’...
Streaming Geometry et Brush avec VideoDrawing
• Dessiner dans un DrawingContext :
protected override void OnRender(System....
Ce qu’on a couvert
• MediaElement, contrôle de vidéo
• Les modes de MediaElement et MediaPlayer
• Mode indépendant et Mode...
Animations
Animer l’IHM
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www.alphorm.co...
Plan
• Animations
• Storyboards
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
• Les DependencyProperties des contrôles sont « animatables. »
• On peut faire varier dans le temps, la position, taille; ...
Storyboard
Un Storyboard regroupe plusieurs animations
Souvent défini dans les ressources
<Storyboard x:Name="storyboardCl...
Storyboard avec Blend
• Blend permet facilement de créer des Storyboards
Windows Presentation Foundation avec Visual Studi...
Jouer le Storyboard par code
• Déclenchable par code …
private void ButtonClick(object sender, RoutedEventArgs e)
{
storyb...
Ce qu’on a couvert
• Animations
• Storyboards
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Les Triggers
Animer l’IHM
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
Site : http://www.alphorm....
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)
Prochain SlideShare
Chargement dans…5
×

Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)

10 981 vues

Publié le

Formation complète ici:
http://www.alphorm.com/tutoriel/formation-en-ligne-wpf-avec-visual-studio-2013-70-511

Windows Presentation Foundation est le successeur mur de Windows Form et la plateforme de prédilection pour développer des clients riches.

Dans cette formation on apprendra XAML pour décrire l’IHM, la stylistique avancée qui permet aussi bien de créer des chartes graphiques que de changer le modèle d’affichage des composants.

En ce qui concerne la liaison avec les données, le DataBinding sera passé en revue pour les composants « simples » ainsi que les ListBox et,DataGrid, ainsi que différentes approches pour la validation de données.

Dans la foulée du Databinding, le pattern architectural Model – View-ViewModel et les commandes seront traités.

On verra comment réaliser une IHM réactive avec le multithreading, et les particularités liées à une application WPF.

Le Multilingual Toolkit et WPF Localization Extension internationaliseront l’application réalisée.

Les Contrôles personnalisés seront abordés.

La réalisation d’une interface animée et réactive, qui donne un retour à l’utilisateur sera abordée avec les Animations, les Triggers et les VisualStates.

Enfin les déploiements ClickOnce et XBAP permettront de déployer avec la possibilité de mises à jour ou en installant une portion du Framework. Tout cela en étant peu intrusif sur le système.

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
10 981
Sur SlideShare
0
Issues des intégrations
0
Intégrations
8 379
Actions
Partages
0
Téléchargements
145
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)

  1. 1. Présentation de la formation Windows Presentation Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Windows Presentation Foundation
  2. 2. Plan • Présentation du formateur • Qu’est-ce que c’est WPF ? • Le plan de formation • La certification Microsoft 70-511 • Publics concernés et connaissances requises Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Présentation de l’étude de cas • Liens, bibliographie
  3. 3. Présentation du formateur • Emmanuel DURIN • emmanuel@durin.org • Consultant & Formateur Microsoft .Net, C++ • Mission conseil, étude d’architecture, migration et formation • MCP, MCSD, MCT vérifiables à Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© https://mcp.microsoft.com/authenticate/validatemcp.aspx avec l’identifiant 1110403 et le code d’accès iu9F5vz3 • Mes références : www.durin.org Mon profil Alphorm : http://www.alphorm.com/auteur/emmanuel-durin
  4. 4. Qu’est-ce que c’est WPF? • Windows Presentation Foundation est la couche de Présentation de .Net • En vigueur depuis .Net 3 • Très riche : Data Binding, Stylistique, Animations, MultiMedia, … • Utilise largement XAML Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Utilise largement XAML Connaissances réutilisables avec d’autres technos : Silverlight, Windows Phone, Windows Store Apps
  5. 5. Le plan de formation 1. Présentation générale 2. Conception de l’IHM avec XAML 3. Ressources et Styles 4. Liaison de données (DataBinding) 9. Localisation/Globalisation 10. Contrôles personnalisés 11. Dessiner et imprimer : graphiques 2D 12. Animer l’IHM Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© 4. Liaison de données (DataBinding) 5. ItemsControl 6. Model View ViewModel 7. Glisser-déposer 8. Tâches de fond et WPF 13. WPF et Windows Forms 14. Cycle de vie de l’application 15. Test et débogage 16. Conclusion
  6. 6. La certification 70-511 • Cette formation prépare au passage de la certification 70-511 : • TS: Windows Applications Development with Microsoft .NET Framework 4 https://www.microsoft.com/learning/fr-ch/exam-70-511.aspx • Cette certification fait partie des cursus Microsoft Certification Solution Developer Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Microsoft Certification Solution Developer • Microsoft Certification Technical Specialist
  7. 7. Publics concernés • Développeurs, programmeurs • Chefs de Projets • Architectes Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  8. 8. Connaissances requises • Connaissance de C# ou de Vb.Net, autre langage .Net • Ou bien connaissance d’un autre langage de programmation non .Net Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  9. 9. Présentation de l’étude de cas • Réalisation de parties représentatives d’un progiciel : ERPPlus • Nombreuses démonstrations non-liées à l’étude de cas suivie Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  10. 10. D’autres formations développement sur Alphorm Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  11. 11. Formations développement .NET sur Alphorm Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  12. 12. Liens des ressources • Documentations & Bibliothèques techniques: Introduction to WPF https://msdn.microsoft.com/en-us/library/aa970268%28v=vs.110%29.asp Microsoft Developer Network https://msdn.microsoft.com/en-us/library/ms754130%28v=vs.110%29.aspx Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Forums Incontournable StackOverflow • www.stackoverflow.com
  13. 13. Bibliographie • Programming WPF • Livre complet et détaillé de bonne qualité Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  14. 14. Are you ready ? ☺ Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  15. 15. Bases de XAML Conception de l’IHM Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Bases de XAML
  16. 16. Objectif •Découvrir les bases de XAML XAML décrit une arborescence d’objets graphiques XAML utilisé pour les IHM (Silverlight, WPF, Windows Phone, Windows Store Apps) XAML aussi utilisé en Workflow Foundation Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© XAML aussi utilisé en Workflow Foundation
  17. 17. XAML et Codebehind Une Page, une Window, un UserControl sont conçus graphiquement par glisser-déposer de composants dans un fichier .Xaml Code associé pour réagir aux événements dans un fichier .cs ou .vb Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  18. 18. Instancier les composants XAML Permet d’instancier des objets graphiques, mais aussi n’importe quelle catégorie d’objet .Net <Border> <Grid Height="70" Width="300"> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <Grid Height="70" Width="300"> <TextBlock Text="Prenom" FontSize="20"/> </Grid> </Border>
  19. 19. XAML : un langage objet <Button Content="Remplir" /> <Button> <Button.Content>Remplir</Button.Content> </Button> Propriété .Net : Syntaxe permettant de décrire pleinement une propriété objet : Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Les composants sont souvent décrits en XAML, mais peuvent aussi être instanciés en .Net : Button buttonOK = new Button(); buttonOK.Content = "OK";
  20. 20. XAML : nommage des composants Le nommage des composants permet de les utiliser dans la page, après l’appel à InitializeComponent, et mieux, dans l’événement Loaded En effet dans l’événement Loaded, tous les calculs de taille, position, … ont été appliqués au composant. Permet d’éviter les bugs comme : la position de mon <TextBox x:Name="textboxPrenom" /> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© appliqués au composant. Permet d’éviter les bugs comme : la position de mon composant est incohérente private void Page_Loaded(object sender, RoutedEventArgs e) { this.textboxPrenom.Text = "Archibald"; }
  21. 21. XAML : instancier un objet XAML permet d’instancier des objets de n’importe quelle classe L’association namespace-xml à namespace-clr doit être faite <Window ... xmlns:bo="clr-namespace:BusinessObjects;assembly=BusinessObjects"> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <Window.Resources> <bo:Person x:Key="toto" Age="10" Firstname="toto" /> </Window.Resources>
  22. 22. XAML : Evénements private void ButtonFillClick(object sender, RoutedEventArgs e){ personnes.Add(new Personne { Nom = "Tournesol"}); } <Button Content="Remplir" Click="ButtonFillClick" /> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© A partir du Concepteur graphique, Propriétés du composant (F4), Evénements, double-clique sur l’événement à implémenter
  23. 23. Evénements, abonnement dynamique L’application peut s’abonner dynamiquement : // Abonnement : buttonFill.Click += ButtonFillClick; ... // Désabonnement : buttonFill.Click -= ButtonFillClick; Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Derrière un abonnement : une référence est gardée Fuite mémoire potentielle.
  24. 24. Ce qu’on a couvert XAML, syntaxe xml d’instanciation d’objets La méthode InitializeComponent Equivalence XAML et .Net Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  25. 25. Disposer les contrôles Conception de l’IHM Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Disposer les contrôles
  26. 26. Propriétés des composants Un certain nombre de propriétés permettent d’ajuster la disposition des composants : Margin. Ex : Margin="10" Margin="10 5" Margin="4 3 87 2" Width, Height, MinWidth,MaxWidth,MinHeight, MaxHeight VerticalAlignment et HorizontalAlignment ( Left,Right, Center, Stretch) Padding du parent Algorithme du peintre, et Panel.Zindex pour les superpositions Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Algorithme du peintre, et Panel.Zindex pour les superpositions
  27. 27. Cacher les composants Opacity : 0 à 1 Plus ou moins transparent Visibility Visible Hidden, l’objet occupe toujours de l’espace mais n’est pas visible Collapsed, l’élément est enlevé du VisualTree, ne réserve plus de place Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  28. 28. Ce qu’on a couvert Les différentes propriétés de placement des composants graphiques Conseil : ne pas utiliser de marges de placement Les fenêtres de Visual Studio Boîte à outils, Propriétés et événements, Structure du document Le concepteur graphique de Visual Studio : Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Le concepteur graphique de Visual Studio : Edition en mode texte (XAML) Edition en mode graphique
  29. 29. Familles de composants Conception de l’IHM Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Familles de composants
  30. 30. Plan De nombreux contrôles existent On peut regrouper certains contrôles en familles : ContentControls HeaderedControls ItemsControls Panels Shapes Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Shapes …
  31. 31. ContentControls - exemples Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  32. 32. ContentControls Ont une propriété Content qui peut contenir : Du texte Un autre composant graphique <Button> <Button.Content>Remplir</Button.Content> </Button> <Button>Remplir</Button> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© </Button><Button Content="Remplir"/> <Button Padding="5"> <StackPanel Orientation="Horizontal"> <Image Source="Icone2.png" /> <TextBlock Text="S'abonner" VerticalAlignment="Center"/> </StackPanel> </Button>
  33. 33. HeaderedContentControls Héritent de ContentControl : Ont un Header en plus Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  34. 34. Ce qu’on a couvert On a découvert deux familles de contrôles : ContentControls pour personnaliser le contenu HeaderedContentControls pour ajouter un en-tête aux ContentControls On verra plus tard : Les Panels pour regrouper Les ItemsControls pour des listes de données affichées de la même manière Les Shapes pour les dessins Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Les Shapes pour les dessins
  35. 35. Les Panels Conception de l’IHM Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Les Panels Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel
  36. 36. Les Panels Ils regroupent plusieurs composants enfants Ils positionnent souvent les enfants à travers des propriétés attachées Les Panels sont Canvas StackPanel VirtualizingStackPanel Grid Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Grid WrapPanel DockPanel UniformGrid Border hérite de FrameworkElement
  37. 37. Disposition des composants par le parent Les composants : sont souvent disposés automatiquement par leur parent grâce à : Une stratégie du parent Définition des Rows et Columns d’une Grid Empilement horizontal ou vertical dans un StackPanel … Des propriétés attachées Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Des propriétés attachées Dans le cas d’une Grid, grâce à Grid.{Row, Column, RowSpan, ColumnSpan} Propriété DockPanel.Dock des DockPanel Canvas.Top, Canvas .Left du Canvas …
  38. 38. Canvas Permet de positionner les enfants en coordonnées Top, Left grâce à des propriétés attachées Canvas.Top et Canvas.left Utile pour le pur graphisme, plus que pour les formulaires <Canvas> <Button Content="Button" Canvas.Left="215" Canvas.Top="115"/> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <Button Content="Button" Canvas.Left="215" Canvas.Top="115"/> </Canvas>
  39. 39. StackPanel Empile les composants selon la propriété orientation ( défaut = vertical ) On peut facilement composer les panels. Exemple : un StackPanel vertical contenant plusieurs StackPanels horizontaux pour faire un formulaire Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <StackPanel Margin="10" Orientation="Vertical" > <RadioButton Content="Homme"/> <RadioButton Content="Femme"/> </StackPanel>
  40. 40. DockPanel Place les composants sur les différents bords du DockPanel. Grâce à la propriété attachée DockPanel.Dock Plusieurs contrôles peuvent être placés sur un même bord La place restante est utilisée par le composant sans propriété DockPanel.Dock Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  41. 41. Grid Permet de disposer les composants à une intersection Row/Column Il faut définir les lignes et les colonnes ( …avec le concepteur graphique) … et placer les composants avec les propriétés attachées Plusieurs composants peuvent être placés dans la même case C’est en général un accident, sauf pour la transparence <Grid> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <Grid> <Grid.RowDefinitions> <RowDefinition Height="140"/> <RowDefinition Height="*"/> <RowDefinition Height="2*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"/> </Grid>
  42. 42. Border Permet de doter d’une bordure un composant qui en est dénué Permet aussi de fournir des bordures arrondies Pas un vrai Panel, car ne peut avoir qu’un seul enfant (hérite de FrameworkElement) <Border Background="Black" BorderBrush="#FF8080FF" Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <Border Background="Black" BorderBrush="#FF8080FF" BorderThickness="2" CornerRadius="5"> <StackPanel Margin="10" Orientation="Vertical" > <RadioButton Content="Homme"/> <RadioButton Content="Femme"/> </StackPanel> </Border>
  43. 43. Ce qu’on a couvert Les Panels, qui permettent d’organiser semi-automatiquement leurs enfants Les propriétés attachées Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  44. 44. Les Ressources Ressources et styles Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Les Ressources Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel
  45. 45. Plan Découvrir les ressources et leur utilisation Dictionnaires de ressources Accès programmatique Ressources dynamiques Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  46. 46. Les ressources XAML Les ressources rendent un objet réutilisable Notion de charte graphique Elles sont toutes nommées par une key Les ressources, exemples : Colors Styles Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Styles Brushes Thickness (pour margins, paddings) Template, ItemTemplate,ContentTemplate N’importe quel objet .Net
  47. 47. Les ressources : où les définir Les ressources peuvent être définies dans : L’Application (App.xaml), La page / la fenêtre N’importe quel FrameworkElement Les ressources peuvent être définies dans des fichiers séparés : dictionnaires de ressources. Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Ils sont inclus dans le XAML des FrameworkElement
  48. 48. Ressources : un exemple <Page.Resources> <LinearGradientBrush x:Key="sunriseBrush" EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF12243E"/> <GradientStop Color="#FF95229B" Offset="0.936"/> <GradientStop Color="#FF232D69" Offset="0.792"/> <GradientStop Color="#FFEE55B6" Offset="0.967"/> <GradientStop Color="#FFF19453" Offset="0.997"/> </LinearGradientBrush> </Page.Resources> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© </Page.Resources> <Grid Background="{StaticResource sunriseBrush}"> <Grid> <Grid.Background> <StaticResource ResourceKey="sunriseBrush"/> </Grid.Background> ... Ou bien :
  49. 49. XAML : ressources, MergedDictionary Les dictionnaires de ressources permettent d’éviter l’inflation du fichier App.xaml <Application x:Class="App11.App" ...> <Application.Resources> <ResourceDictionary> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="Common/StandardStyles.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
  50. 50. Accès programmatique • Les ressources sont accessibles à partir de l’application : backButton.Style = Application.Current.Resources["BackButtonStyle"] as Style; …mais aussi de n’importe quel FrameworkElement : Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© …mais aussi de n’importe quel FrameworkElement : object o = page.Resources["accountItemTemplate"]; DataTemplate dataTemplate = (DataTemplate)o;
  51. 51. DynamicRessource • Les entrées des dictionnaires sont remplaçables : Utile si on change une entrée dans un dictionnaire rootGrid.Resources["buttonBrush"] = newBrush; <Grid Name="rootGrid"> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <Grid Name="rootGrid"> <Grid.Resources> <SolidColorBrush x:Key="buttonBrush" Color="Red" /> </Grid.Resources> <Button Background="{DynamicResource buttonBrush}" /> </Grid>
  52. 52. Ce qu’on a couvert Les ressources, moyen de factoriser son apparence Elles permettent de faire des chartes graphiques Blend et Visual Studio aident à la réalisation des ressources Les dictionnaires de ressources Les ressources sont accessibles et modifiables par code Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  53. 53. Les Styles Ressources et styles Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Les Styles Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel
  54. 54. Plan Style implicite Définir un style pour tous les composants d’un type Classes de style Définir un style pour un sous ensemble de composants Hériter les styles Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Hériter les styles
  55. 55. Style implicite • Des objets <Style> peuvent être définis dans les ressources Permettent de créer des chartes graphiques • Exemple : un style pour tous les boutons : <Style TargetType="Button"> <Setter Property="Foreground" Value="Red"/> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <Setter Property="Foreground" Value="Red"/> </Style>
  56. 56. « Classe » de style : style explicite Tous les boutons n’ont pas forcément la même apparence. Le style peut être défini dans une ressource locale à une page, un panel, … Les ressources locales l’emportent sur les plus globales (App) Ou bien avoir une clé, équivalent de classe CSS <Button Content="Red Button" Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <Style TargetType="Button" x:Key="redButton"> <Setter Property="Foreground" Value="Red"/> </Style> <Button Content="Red Button" Style="{StaticResource redButton}"/>
  57. 57. Héritage de style Comme l’héritage objet ! On peut redéfinir ou ajouter des propriétés <Style TargetType="Button" x:Key="redButton"> <Setter Property="Foreground" Value="Red"/> </Style> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <Style TargetType="Button" x:Key="totallyRedButton" BasedOn="{StaticResource redButton}"> <Setter Property="Foreground" Value="Pink"/> <Setter Property="Background" Value="Red"/> </Style>
  58. 58. Ce qu’on a couvert Les styles peuvent être définis pour une classe de contrôles Les styles peuvent être nommés pour avoir l’équivalent d’une classe CSS Les styles peuvent être hérités Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  59. 59. Les templates Ressources et styles Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Les templates
  60. 60. Plan Les modèles (templates) Arbre visuel et arbre logique Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  61. 61. Redéfinition du modèle d’affichage On peut totalement redéfinir le modèle d’affichage des composants avec les templates ! <ControlTemplate TargetType="Button"> <Border BorderBrush="{TemplateBinding Foreground}" BorderThickness="2"> <TextBlock Text="{TemplateBinding Content}"/> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <TextBlock Text="{TemplateBinding Content}"/> </Border> </ControlTemplate> Avec VS/Blend, Click droit/Modifier le modèle/Modifier une copie…
  62. 62. Templates spécialisés Il n’est pas toujours nécessaire de reprendre tout le template d’un contrôle. Il en existe des spécialisés ContentControl Ils ont un ContentTemplate Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Ils ont un ContentTemplate ItemsControl ( ListBox, ComboBox), ont: ItemTemplate : un élément de liste ItemsPanelTemplate : la disposition des éléments Pour faire une liste horizontale ou avec un WrapPanel
  63. 63. Arbre logique et arbre visuel Arbre logique (*) : ce qui disposé en XAML Arbre visuel : inclut les templates, ce que l’utilisateur voit au final Window Grid Border AdornerDecorator AdornerLayerContentPresenter Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© ButtonLabel Grid ContentPresenter Border TextBlock ContentPresenter Border TextBlock
  64. 64. Caractéristiques des Arbres Arbre logique pour : Héritage des DependencyProperty Résolution des ressources dynamiques Recherche des noms d’éléments pour le binding Propagation des routed events Arbre visuel pour : Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Arbre visuel pour : Rendu des éléments visuels Propagation des LayoutTranform et RenderTransform Propagation de la propriété IsEnabled Test « Do hit » RelativeResource (FindAncestor)
  65. 65. VisualTreeHelper et LogicalTreeHelper Utile pour créer des procédures pour parcourir les arbres public static T FindVisualDescendantOfType<T>(this DependencyObject parent) where T : DependencyObject { for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); ++i) { DependencyObject child = VisualTreeHelper.GetChild(parent, i); Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© DependencyObject child = VisualTreeHelper.GetChild(parent, i); if (child is T) return (child as T); T result = FindVisualDescendantOfType<T>(child); if (result != null) return result; } return null; }
  66. 66. Ce qu’on a couvert Les templates permettent de redéfinir totalement l’apparence du composant Tout en gardant le même comportement, la même fonctionnalité Les composants sont organisés : En arbre logique pour le XAML En arbre visuel qui contient l’instanciation de tous les composants des templates Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© En arbre visuel qui contient l’instanciation de tous les composants des templates
  67. 67. DataBinding et DataBinding Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel DataBinding et INotifyPropertyChanged
  68. 68. Plan DataBinding INotifyPropertyChanged Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  69. 69. DataBinding : liaison de données Il sert à lier les propriétés des composants avec des propriétés d’objets .Net. Il fonctionne sur toutes les DependencyProperty des contrôles Scénario typique, mais pas limitatif : une propriété de contrôle se lie à une propriété d’objet métier <TextBox Text="{Binding Prenom}" /> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <TextBox Text="{Binding Prenom}" /> public void PageLoaded( ... ){ this.DataContext = personne = new Personne() { Age = 10, Prenom = "Emmanuel" }; } <TextBox Text="{Binding Path=Adresse.Rue}" />
  70. 70. DataContext DependencyProperty qui fournit l’objet du binding. Les Bindings se font sur les propriétés du DataContext La propriété DataContext est héritable par valeur. On la valorise au niveau de la page, fenêtre. Les enfants de la page héritent du même DataContext Cette propriété est souvent valorisée avec un objet ViewModel, Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Cette propriété est souvent valorisée avec un objet ViewModel, l’adaptateur des données pour la page
  71. 71. DataBinding entre éléments <Slider Name="slider1" /> <TextBox Text="{Binding ElementName=slider1, Path=Value, Mode=TwoWay}"/> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Rarement fait car souvent les contrôles tirent leurs données d’un objet ViewModel (Pattern MVVM). Le rassemblement de toutes les données dans un objet ViewModel permet d’y ajouter la logique de calcul des affichages
  72. 72. Bindings de champs Il lie les propriétés des objets IHM aux objets métiers. Source Target Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  73. 73. Modes de Binding Chaque propriété a un mode de binding par défaut qui peut être changé OneWay • Mode par défaut pour IsChecked des Checkbox. Données en lecture seule • Choix raisonnable pour laisser une chance de validation OneTime Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© OneTime La propriété du contrôle est initialisée lors du chargement du DataContext ou écriture de la propriété. Données static TwoWay Mode par défaut pour le Text des TextBox Toute modification faite sur le contrôle graphique est faite sur la propriété de l’objet métier OneWayToSource • Dans le sens contraire de OneWay
  74. 74. Autres Binding Pour naviguer dans l’arborescence visuelle : <TextBlock Text="{Binding Title, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainWindow}}}"/> Static : très utile pour se lier aux propriétés statiques <TextBlock Text="{x:Static local:App.Current}" /> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© FindAncestor, AncestorType={x:Type local:MainWindow}}}"/> <TextBlock Name="Prénom" Text="{Binding Name,RelativeSource={RelativeSource Self}}" /> Pour accéder à ses propres propriétés :
  75. 75. INotifyPropertyChanged Implémentée par les objets qui notifient l’IHM lors de modifications public interface INotifyPropertyChanged { // Se produit lorsqu'une valeur de propriété est modifiée. event PropertyChangedEventHandler PropertyChanged; Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© event PropertyChangedEventHandler PropertyChanged; }
  76. 76. INotifyPropertyChanged : exemple public class Personne : INotifyPropertyChanged{ public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged( [CallerMemberName] string propName = null) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propName)); .Net 4.5 Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© PropertyChanged(this, new PropertyChangedEventArgs(propName)); } public int Age { set { age = value; OnPropertyChanged(); } } private int age; }
  77. 77. Ce qu’on a couvert Le Databinding Binding sur DataContext Binding entre éléments INotifyPropertyChanged Implémentation par les objets métiers Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  78. 78. IValueConverter DataBinding Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel IValueConverter
  79. 79. Objectif •Découvrir IValueConverter pour convertir une valeur ou un type pour l’affichage Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  80. 80. Convertisseurs de données Parfois les données du modèle ne sont pas prêtes à être afficher telles quelles Besoin de formatage Si StringFormat du Binding pas suffisant Changement du type de donnée int -> Bitmap, Brush … Conversions de types boolean -> enum Visibility Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Conversions de types boolean -> enum Visibility Il faut aussi parfois convertir les données saisies, sélectionnées en données métiers.
  81. 81. Convertisseurs, côté XAML <Window xmlns:converter="clr-namespace:FormulairePersonne"> <Window.Resources> <converter:BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter" /> </Window.Resources> Déclaration de la ressource Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <StackPanel Visibility="{Binding Path=ShowTutorial, Converter={StaticResource booleanToVisibilityConverter}}"> Utilisation de la ressource
  82. 82. Implémentation IValueConverter public class BooleanToVisibilityConverter : IValueConverter { // convertir les données pour l’IHM public object Convert(object value, Type targetType, object param, CultureInfo culture) { return (value is bool && (bool)value) ? Visibility.Visible : Visibility.Collapsed; } // convertir les données de l’IHM vers l’objet métier Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Il est souvent inutile d’implémenter le ConvertBack // convertir les données de l’IHM vers l’objet métier public object ConvertBack(object value, Type targetType, object p, CultureInfo culture) { return value is Visibility && (Visibility)value == Visibility.Visible; } }
  83. 83. Ce qu’on a couvert IValueConverter pour convertir des données métiers en données affichables Ne doit pas contenir de logique métier. On la réserve pour le ViewModel Blend et Visual Studio pour utiliser les convertisseurs sur les bindings Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  84. 84. Validation de surface DataBinding Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Validation de surface
  85. 85. Plan ExceptionValidationRule pour attraper les erreurs de conversion ValidationRule personnalisée Affichage du message d’erreur Personnalisation du template des erreurs Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Personnalisation du template des erreurs
  86. 86. ExceptionValidationRule Attraper les exceptions lors de la conversion <TextBox><TextBox.Text> <Binding Path="Age" NotifyOnValidationError="True" UpdateSourceTrigger="PropertyChanged"> <Binding.ValidationRules> <ExceptionValidationRule/> </Binding.ValidationRules> </Binding> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© </Binding> </TextBox.Text></TextBox> Validation.AddErrorHandler(this.textBoxAge, AgeValidationHandler); ... void AgeValidationHandler(object sender, ValidationErrorEventArgs e){ if (e.Action == ValidationErrorEventAction.Added) MessageBox.Show(e.Error.ErrorContent.ToString()); }
  87. 87. ValidationRule personnalisée public class NumberRangeRule : ValidationRule{ public override ValidationResult Validate(object value, CultureInfo cultureInfo){ int number = … value …; ... if (number < min || number > max) { return new ValidationResult(false, Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© return new ValidationResult(false, String.Format("Number must be in range {0} - {1}", min, max)); } return ValidationResult.Result; } }
  88. 88. Affichage du message d’erreur Les messages d’erreurs sont accessibles Pourquoi pas un ItemsControl si on veut tous les afficher? Pour un seul message, un tooltip suffit : <TextBox ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  89. 89. Personnalisation du template des erreurs Le template du composant peut être modifié pour intégrer le message d’erreur <TextBox Text="{Binding Age, UpdateSourceTrigger=PropertyChanged}"> <Validation.ErrorTemplate> <ControlTemplate> <StackPanel> <!-- Placeholder for the TextBox itself --> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <!-- Placeholder for the TextBox itself --> <AdornedElementPlaceholder x:Name="textBox"/> <TextBlock Text="{Binding [0].ErrorContent}" Foreground="Red"/> </StackPanel> </ControlTemplate> </Validation.ErrorTemplate> </TextBox>
  90. 90. Ce qu’on a couvert ExceptionValidationRule pour attraper les erreurs de conversion ValidationRule personnalisée Affichage du message d’erreur Personnalisation du template des erreurs Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Personnalisation du template des erreurs
  91. 91. Validation DataBinding Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Validation par l’objet métier
  92. 92. Plan Toutes les validations ne peuvent être simples. Validations déléguées à l’objet métier Plan : Validation par les exceptions de propriété IDataErrorInfo pour une erreur par propriété INotifyDataErrorInfo pour les validations asynchrones et plusieurs Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© INotifyDataErrorInfo pour les validations asynchrones et plusieurs erreurs par propriété
  93. 93. Validation par les propriétés Une Propriété qui déclenche une exception, est source d’erreur public String Libellé{ set { if (String.IsNullOrWhiteSpace(value)) throw new Exception("Le libellé ne peut être vide"); libellé = value; } Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© } } <TextBox x:Name="textboxLibellé” Text="{Binding Libellé, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}"/>
  94. 94. IDataErrorInfo Permet de fournir une erreur associée à chaque champ de formulaire Typiquement implémentée avec une table associative Interface implémentable par les objets métiers ou objets du ViewModel pour fournir une source d’erreur Penser au Design Pattern Décorateur IDataErrorInfoPerson Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© IDataErrorInfo Error : String Item[] : String PersonDecorator Lastname : String Firstname : String Person Lastname : String Firstname : String 1 1
  95. 95. INotifyDataErrorInfo Pour les validations asynchrones, longues Car source d’événement quand la validation est réalisée Permet aussi d’avoir plusieurs erreurs sur un champ de formulaire public interface INotifyDataErrorInfo { bool HasErrors { get; } .Net 4.5 Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© bool HasErrors { get; } event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged; IEnumerable GetErrors(string propertyName); }
  96. 96. Ce qu’on a couvert Validation par les exceptions de propriété IDataErrorInfo pour une erreur par propriété INotifyDataErrorInfo pour les validations asynchrones et plusieurs erreurs par propriété L’implémentation des interfaces, ou la levée des exceptions dans les objets métiers peut être intrusif. Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© objets métiers peut être intrusif. Le design pattern du décorateur permet de découpler les objets métiers de cette logique
  97. 97. Données de conception DataBinding Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Données de conception
  98. 98. Objectif En conception graphique, il est nécessaire de voir les données pour concevoir les écrans. Première solution : exécuter le code pour voir les écrans Aller retours longs, car nécessite de compiler, exécuter et de naviguer jusqu’au bon écran Deuxième solution : les données de conception (design time data) Le retour visuel est immédiat ! Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Le retour visuel est immédiat !
  99. 99. Fournir des données de conception avec Blend Consiste à instancier une classe en XAML Tout se fait graphiquement sous Blend Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  100. 100. Ce qu’on a couvert Les données de conception avec Blend On reviendra à ce sujet lorsqu’on s’intéressera aux ItemsControls Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  101. 101. Composants et Templates ItemsControls Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Composants et Templates
  102. 102. Plan Hiérarchie des ItemsControls ItemTemplate et ItemsPanel DataGrid TreeView Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  103. 103. Hiérarchie des ItemsControls Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  104. 104. ListBox, ComboBox Servent à afficher des listes d’objets et faire des sélections Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Les données « statiques » sont fournies par la propriété Items OU les données sont plus souvent fournies par la propriété ItemsSource A valoriser avec un IEnumerable ( List<T>, ObservableCollection<T>, CollectionViewSource, …)
  105. 105. ItemTemplate, ItemsPanel ItemTemplate Pour personnaliser l’affichage de chaque ligne De type DataTemplate ItemsPanel Pour changer la disposition de tous les items Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Pour changer la disposition de tous les items De type ItemsPanelTemplate
  106. 106. DataGrid Servent à afficher des listes d’objets et faire des sélections Permet l’édition le tri Génération automatique de colonnes ou pas Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <DataGrid Name="dataGridPersonnes AutoGenerateColumns="True" >
  107. 107. DataGrid – définition des colonnes Désactivation de AutoGenerateColumns Plusieurs templates de colonnes disponibles DataGridTextColumn DataGridComboBoxColumn DataGridHyperlinkColumn DataGridCheckBoxColumn Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© DataGridCheckBoxColumn DataGridTemplateColumn, possibilité de personnaliser les templates
  108. 108. DataGridTemplateColumn <DataGrid Name="dataGridPersonnes AutoGenerateColumns=“False”> <DataGrid.Columns> <DataGridTextColumn Binding="{Binding Nom}« /> <DataGridTemplateColumn > <DataGridTemplateColumn.CellTemplate> <DataTemplate><Label Content="{Binding Prenom}"/></DataTemplate> </DataGridTemplateColumn.CellTemplate> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© </DataGridTemplateColumn.CellTemplate> <DataGridTemplateColumn.CellEditingTemplate> <DataTemplate><TextBox Text="{Binding Prenom}" /> </DataTemplate> </DataGridTemplateColumn.CellEditingTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid>
  109. 109. TreeView Utilisent des HierarchicalDataTemplate Le template précise où trouver les enfants grâce à ItemsSource DataType indique le type sur lequel porte le template <TreeView ItemsSource="{Binding Societes}" Grid.Row="1" Margin="3“ > <TreeView.Resources> <HierarchicalDataTemplate DataType="{x:Type model:Societe}" Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <HierarchicalDataTemplate DataType="{x:Type model:Societe}" ItemsSource="{Binding Employes}"> <TextBlock Margin="3" > <Run Text="{Binding Nom}"/> </TextBlock> </HierarchicalDataTemplate> </TreeView.Resources> </TreeView>
  110. 110. Ce qu’on a couvert Hiérarchie des ItemsControls ItemTemplate et ItemsPanel DataGrid pour l’édition TreeView pour les données hiérarchiques Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© La partie de l'image avec l'ID de relation rId3 n'a pas été trouvé dans le fichier.
  111. 111. Choisir le Template ItemsControls Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Choisir le Template
  112. 112. Plan DataType du DataTemplate ItemTemplateSelector pour un choix dynamique Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  113. 113. DataTemplate avec DataType Des templates différents peuvent être utilisés selon l’Item à afficher Le choix du template se fait avec DataType <TreeView ItemsSource="{Binding Societes}" Grid.Row="1" Margin="3" > <TreeView.Resources> <HierarchicalDataTemplate DataType="{x:Type model:Societe}" Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <HierarchicalDataTemplate DataType="{x:Type model:Societe}" ItemsSource="{Binding Employes}"> <TextBlock Margin="3" Text="{Binding Nom}" /> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="{x:Type model:Personne}"> <TextBlock Margin="3" Text="{Binding Prenom}" > </HierarchicalDataTemplate> </TreeView.Resources> </TreeView>
  114. 114. ItemTemplateSelector Classe qui permet de sélectionner le template pour chaque item Pas forcément en fonction du type <Window.Resources> <local:ItemTemplateSelector x:Key="itemTemplateSelector"/> </Window.Resources> <ListBox x:Name="listboxMaster" ItemsSource="{Binding Items}" ItemTemplateSelector="{StaticResource itemTemplateSelector}"/> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© ItemTemplateSelector="{StaticResource itemTemplateSelector}"/>
  115. 115. Implémentation de l’ItemTemplateSelector public class TabControlTemplateSelector : DataTemplateSelector{ public override DataTemplate SelectTemplate(object item, DependencyObject container) { FrameworkElement element = container as FrameworkElement; if (element != null && item != null && item is Societe){ return element.FindResource("societeTabTemplate") as DataTemplate; } else if (element != null && item != null && item is Personne) { Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© } else if (element != null && item != null && item is Personne) { FrameworkElementFactory factory = new FrameworkElementFactory(typeof(UserControlPersonne)); DataTemplate template = new DataTemplate{ VisualTree = factory}; return template; } return null; } }
  116. 116. Ce qu’on a couvert DataType du DataTemplate ItemTemplateSelector pour un choix dynamique Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  117. 117. ItemsControls ObservableCollection<T> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel ObservableCollection<T> et CollectionViewSource
  118. 118. Plan ObservableCollection<T> CollectionViewSource Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  119. 119. ObservableCollection<T> Collection indexée, comme les listes Emettrice d’événements lors d’ajout, suppression, vidage Les contrôles multiples (ListBox, ComboBox, DataGrid, …) se mettent à jour lorsque leur source ObservableCollection est mise à jour Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© est mise à jour
  120. 120. ObservableCollection<T>, cinématique persons = new ObservableCollection<Person>(); Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© persons.Add( new Person { Firstname = textboxFirstname.Text, Lastname = textboxLastname.Text }); 1. Click 2. CollectionChanged
  121. 121. CollectionViewSource S’intercale entre les données et le composant Permet d’activer des tris, filtrages, regroupements sur les données affichées DataGrid Affiche les données Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© CollectionViewSource ObservableCollection Fournit les données Trie, filtre, regroupe les données
  122. 122. CollectionViewSource - exemple ObservableCollection<Personne> personnes = … CollectionViewSource sourcePersonnes = new CollectionViewSource(); sourcePersonnes.Source = personnes; sourcePersonnes.Filter += SourcePersonnesFilter; dataGridPersonnes.ItemsSource = sourcePersonnes.View; Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© dataGridPersonnes.ItemsSource = sourcePersonnes.View; ... void SourcePersonnesFilter(object sender, FilterEventArgs e){ var personne = e.Item as Personne; e.Accepted = personne.Age >= ageMinimum; }
  123. 123. Ce qu’on a couvert ObservableCollection<T> CollectionViewSource Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  124. 124. Données pour les listes ItemsControls Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Données pour les listes à la conception
  125. 125. Objectif Il s’agit de donner des données aux listes (sous classe de ItemsControls), lors de la conception Par défaut les listes sont des grands rectangles blancs vides ! Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  126. 126. Fournir les données avec Blend Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  127. 127. Ce qu’on a couvert Les données de conception sont fournies par Blend Peuvent être éditées à la main Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  128. 128. Architecture MVVM Model View ViewModel Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Architecture MVVM
  129. 129. Model View ViewModel • Pattern architectural comparable à Model View Controller ou Model View Presenter • Placé au niveau de la couche de présentation • Utilisation/évolution naturelle avec un formidable outil tel que le DataBinding Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Utilisation/évolution naturelle avec un formidable outil tel que le DataBinding
  130. 130. MVVM dans une architecture 3 tiers Couche de présentation View Composants graphiques ViewModel Adaptation des données pour la vue Model Données métier. Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Adaptation des données pour la vue Données métier. Couche métier. (Business Logic Layer) Couche d’accès aux données. (Data Access Layer)
  131. 131. Détail de la couche de présentation View Binding fournit les données à afficher à travers des propriétés Binding fournit Binding fournit les Commandes aux boutons, menus Evénement sur mise à jour du modèle Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© ViewModel Commandes Mini ViewModel CommandesCommandes Objet 1 Objet N … Binding fournit les listes d’objets pour ListBox, … est propriété
  132. 132. Responsabilité du ViewModel • ViewModel présente les données pour l’IHM • Vers un code sans événement ( en apparence ) • Très utile pour les tests unitaires : on peut tester le ViewModel plus facilement que l’IHM • Les commandes sont exposées en tant que propriétés du ViewModel Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Les commandes sont exposées en tant que propriétés du ViewModel • Le ViewModel est émetteur d’événement sur modification des données. Plusieurs vues peuvent être mises à jour simultanément, sans couplage entre vue et vue-modèle
  133. 133. Ce qu’on a couvert Pattern architectural MVVM Expose des propriétés Sur lesquelles se lie l’IHM Notifie l’IHM avec des événements Découple les données et leur présentation Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  134. 134. Les Commandes Model View ViewModel Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Les Commandes
  135. 135. Plan • Les commandes Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  136. 136. Les commandes • Design pattern de la commande • Les Commandes sont souvent exposées par des propriétés de L’Objet MVVM • Plusieurs Contrôles du type ICommandSource : boutons, menus, peuvent être liés à la même commande. Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Sur (dés)activation tous les contrôles sont impactés
  137. 137. Commande activée ou pas La commande est émettrice d’événements pour signaler son changement d’état à l’IHM public interface ICommand { void Execute(object parameter); event EventHandler CanExecuteChanged; bool CanExecute(object parameter); } Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© } Les frameworks (Prism,…) fournissent des classes avec un début d’implémentation : DelegateCommand, RelayCommand Ces classes permettent de profiter des lambdas ou delegate anonymes et captures associées
  138. 138. Commands et CommandSources ICommand CanExecute( param ) :bool Execute(param) CanExecuteChanged ICommandSource Command CommandParameter (1) CommandTarget : IInputElement 1 Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© ButtonBase ButtonMenuItem
  139. 139. Ce qu’on a couvert • Les commandes CommandSource Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  140. 140. RoutedCommands Model View ViewModel Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel RoutedCommands
  141. 141. Plan • RoutedCommands • CommandBindings • InputBindings Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  142. 142. RoutedCommands : propagation Window 1 : CommandBinding.PreviewExecuted 6 : CommandBinding.Executed Tunneling Bubbling Grâce aux CommandBindings, on peut traiter une commande à tout niveau Valable pour Executed et CanExecute Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Grid Button 2 : CommandBinding.PreviewExecuted 3 : CommandBinding.PreviewExecuted 5 : CommandBinding.Executed 4 : CommandBinding.Executed Tunneling Bubbling Bubbling
  143. 143. RoutedCommand « globales » Collection de commandes « standards » : ApplicationCommands {New, Open, Save, Find, Replace, Undo, Redo, … } EditingCommands {AlignCenter, Delete, MoveToDocumentEnd ,...} MediaCommands { MoveToEnd,MoveToHome,…} ComponentCommands {ExtendSelectionDown, MoveDown, ScrollByLine} Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Ces commandes ne sont pas liées à des raccourcis standards : • Ctrl + X, Alt + F4, Ce sont les InputBindings qui font la liaison Ces commandes ne sont pas liées à un comportement Ce sont les CommandBindings qui donnent le comportement
  144. 144. CommandBinding Permet d’associer du comportement spécifiquement à une commande dans le contexte d’un composant public class UIElement { public CommandBindingCollection CommandBindings { get; } } Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© CommandBinding binding = new CommandBinding(ApplicationCommands.Close, AppClose); ... private void AppClose(object sender, ExecutedRoutedEventArgs e){ this.Close(); }
  145. 145. InputBinding Permet d’associer un raccourci clavier ou une action souris à une commande <Window.InputBindings> <KeyBinding Key="P" Modifiers="Control“ Command="{Binding PrintCommand}"/> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <KeyBinding Key=“O" Modifiers="Control" Command="ApplicationCommands.Open"/> <MouseBinding Gesture="LeftDoubleClick" Command="{Binding DataQuerySortEdit}" /> </Window.InputBindings>
  146. 146. Commandes : hiérarchie ICommand CanExecute( param ) :bool Execute(param) CanExecuteChanged ICommandSource Command CommandParameter (1) CommandTarget : IInputElement CommandBinding Command : ICommand PreviewCanExecute CanExecute PreviewExecuted Executed 1 UIElement CommandBindings :CommandBindingCollection * 1 Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© RoutedCommand Name : String RoutedUICommand Text: String ButtonBase ButtonMenuItem ApplicationCommands Save Open Cut Copy Paste ... *
  147. 147. Ce qu’on a couvert • RoutedCommands • CommandBindings • InputBindings Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  148. 148. Implémentation Glisser déposer Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Implémentation
  149. 149. Objectif • Découvrir comment implémenter le Glisser-Déposer ( Drag ‘n Drop) Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  150. 150. Collaboration du glisser-déposer Source Cible DragDrop.DoDragDrop (source, dataObject, dragDropEffects) DragEnter Entrée dans une cible de DnD MouseDown GiveFeeedBack Donner un retour visuel Changer le curseur. Ex : interdit, représentation des données DragOver Déplacement Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Drop Fourniture du code de retour de DoDragDrop Ex : interdit, représentation des données Déplacement DragLeave Sortie QueryContinueDrag Sur modificaton de l’état du clavier (Ctrl, …)
  151. 151. Début du glisser-déposer Permettre le déposer this.AllowDrop = true; Démarrer l’opération de glisser-déposer : protected override void OnMouseMove(MouseEventArgs e) { Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© protected override void OnMouseMove(MouseEventArgs e) { if (e.LeftButton == MouseButtonState.Pressed) { DragDropEffects effect = DragDrop.DoDragDrop(this, dataToDnD, DragDropEffects.Copy | DragDropEffects.Move); } }
  152. 152. Suivre le glisser-déposer côté cible Rentrée dans le UIElement de dépose protected override void OnDragEnter(DragEventArgs e) { base.OnDragEnter(e); // Sauvegarder un état graphique du composant // pour afficher une prévisualisation des effets de la dépose } Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© }
  153. 153. Suivre le glisser-déposer côté cible Survol dans le UIElement de dépose protected override void OnDragOver(DragEventArgs e) { base.OnDragOver(e); e.Effects = DragDropEffects.None; // Vérifier que le format de données est acceptable Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© // Vérifier que le format de données est acceptable if (e.KeyStates.HasFlag(DragDropKeyStates.ControlKey)) e.Effects = DragDropEffects.Copy; else e.Effects = DragDropEffects.Move; e.Handled = true; }
  154. 154. Suivre le glisser-déposer côté cible Sortie du UIElement de dépose protected override void OnDragLeave(DragEventArgs e) { base.OnDragLeave(e); // restauration de l’état graphique précédent // car pas de dépose } Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© }
  155. 155. Ce qu’on a couvert Le Glisser-Déposer Source Sur MouseMove démarrer avec DragDrop.DoDragDrop Gérer QueryContinueDrag, GiveFeedBack Cible Gérer DragEnter, DragOver, DragLeave Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Gérer DragEnter, DragOver, DragLeave Gérer le Drop AllowDrop = true
  156. 156. Formats de données Glisser déposer Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Formats de données
  157. 157. Objectif • Exposer et négocier les formats de données pour le glisser- déposer • Vérifier sur la cible que les données sont dans un format consommable Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  158. 158. Quand vérifier les formats ? Source Cible DragDrop.DoDragDrop DragEnter MouseDown GiveFeeedBack DragOver Exposer les formats Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Drop Fourniture du code de retour de DoDragDrop DragOver DragLeave QueryContinueDrag Vérifier Vérifier
  159. 159. Exposer les données Proposer des données sous plusieurs formats pour accroître les chances d’utilisation protected override void OnMouseMove(MouseEventArgs e) { base.OnMouseMove(e); if (e.LeftButton == MouseButtonState.Pressed) { // Empaqueter les données (un Cercle) Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© // Empaqueter les données (un Cercle) DataObject data = new DataObject(); data.SetData(DataFormats.StringFormat, circleUI.Fill.ToString()); data.SetData("Double", circleUI.Height); data.SetData("Object", this); // Initier l’opération de glisser-déposer DragDrop.DoDragDrop(this, data, DragDropEffects.Copy | DragDropEffects.Move); } }
  160. 160. Accepter ou refuser les données pour la Cible Lors du drop, mais aussi lors du DragOver protected override void OnDrop(DragEventArgs e) { base.OnDrop(e); // If the DataObject contains string data, extract it. if (e.Data.GetDataPresent(DataFormats.StringFormat)) { string dataString = e.Data.GetData(DataFormats.StringFormat) as string; Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© e.Data.GetData(DataFormats.StringFormat) as string; if (DataIsCorrect( dataString) ){ // Notifier la Source des effets du glisser-déposer if (e.KeyStates.HasFlag(DragDropKeyStates.ControlKey)) e.Effects = DragDropEffects.Copy; else e.Effects = DragDropEffects.Move; } } e.Handled = true; }
  161. 161. Ce qu’on a couvert • Exposer et négocier les formats de données pour le glisser-déposer • Vérifier sur la cible que les données sont dans un format consommable Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  162. 162. Les threads Tâches de fond et WPF Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Les threads
  163. 163. Plan • Démarrer un thread • Synchroniser les ressources • Mettre à jour l’IHM à partir d’un worker thread avec le Dispatcher Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Dispatcher
  164. 164. Démarrer un Thread • Dans une IHM sophistiquée, il peut être utile que des « worker threads» fassent les taches longues sans bloquer l’IHM. private delegate void MiseAJourHandler(long pourcentage, String msg); private void ButtonOKClick(object sender, EventArgs e){ Thread tache = new Thread(TacheDeFond); tache.Start(); Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© tache.Start(); } private void TacheDeFond(){ const long MAX = 10000000; for (long i = 0; i < MAX; i++) if (i % 1000 == 0) MiseAJourIHM(i * 100 / MAX, "Calcul en cours"); }
  165. 165. Synchroniser les ressources • Les objets partagés en lecture par deux threads nécessitent un accès synchronisé • Plusieurs solutions disponibles : Mot clé lock Monitor.Enter(obj), Monitor.Exit(obj), Monitor.TryEnter(obj,timeOut) • Synchronisation sur un objet Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Synchronisation sur un objet ReaderWriterLock Mutex • Exclusion à travers plusieurs processus Semaphore • Exclusion avec ressource comptée [MethodImpl(MethodImplOptions.Synchronized)]
  166. 166. Mettre à jour l’IHM à partir d’un Worker Thread • Il est interdit de mettre à jour l’IHM à partir du thread non graphique. • Nécessité d’empiler l’exécution d’une fonction pour le thread graphique Worker Function Push=Dispatcher.Invoke Thread IHM Thread travailleur while ( ! messages.Count > 0) GUI Event 1 Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Function Fonction N Fonction N+1 Fonction N+2 Pop GUI Event 2 GUI Event 3 GUI Event 4 Fonction N-1
  167. 167. Dispatcher pour rentrer dans le GUI Thread • Le Dispatcher permet de résoudre ce problème private void MiseAJourIHM(long pourcentage, String msg){ Dispatcher dispatcher = progressBar.Dispatcher; if ( ! dispatcher.CheckAccess()) Est-ce qu’on est ailleurs que dans le Thread graphique ? Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© dispatcher.Invoke(new Action<long,String>(MiseAJourIHM), new Object[] { pourcentage, msg }); else progressBar.Text = msg + " ( " + pourcentage + "% )"; } Passage vers le thread graphique
  168. 168. Ce qu’on a couvert • Démarrer un thread • Synchroniser les ressources • Mettre à jour l’IHM à partir d’un worker thread avec le Dispatcher Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  169. 169. BackgroundWorker Tâches de fond et WPF Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel BackgroundWorker
  170. 170. Objectif • Découvrir les facilités du BackgroundWorker Démarrer une tâche de fond Gérer l’affichage de la progression Annulation de la tâche Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Annulation de la tâche
  171. 171. BackgroundWorker • Le composant non graphique BackgroundWorker gère l’envoi des mises à jour de progrès depuis le Thread graphique. Très utile pour les ProgressBar • Il aide aussi pour la gestion de l’annulation, la progression. Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  172. 172. Cinématique du BackgroundWorker User Handler RunWorkerAsync() Thread IHM Thread travailleur DoWork ReportProgress() ProgressChanged while ( ! CancellationPending) Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© ReportProgress() User Handler CancelAsync() User Handler User Handler Fin du travail
  173. 173. Ce qu’on a couvert • Les facilités du BackgroundWorker Démarrer une tâche de fond Gérer l’affichage de la progression Annulation de la tâche Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Annulation de la tâche
  174. 174. Internationalisation Localisation/Globalisation Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Internationalisation
  175. 175. Plan Fichiers de ressource Localisation avec LocBaml Multilingual Toolkit Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  176. 176. Assemblées satellites • Les ressources sont décrites dans des fichiers XML : -LocalResource.resx (culture neutre) -LocalResource.fr-FR.resx -LocalResource.en-US.resx Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Une assemblée satellite nommée XXXApp.resources.dll générée pour chacune des cultures :
  177. 177. Changement de Culture dynamique • Pour changer la langue de l’application, modifier : Thread.CurrentThread.CurrentUICulture Utilisé par l’IHM Thread.CurrentThread.CurrentCulture Utilisé par String.Format, DateTime.ToString Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Utilisé par String.Format, DateTime.ToString
  178. 178. Localisation avec LocBaml Basée sur le principe des assemblées satellites : 1 assemblée satellite par Culture générée à partir de fichier resx Identifiants de ressource : Msbuild : <TextBlock x:Uid="TextBlock_1">Hello World</TextBlock> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Msbuild : Pour générer les uid : msbuild /t:updateuid helloapp.csproj Pour vérifier les doublons : msbuild /t:checkuid helloapp.csproj Outil LocBaml à télécharger et copier dans bindebug Extrait les ressources au format CSV pour localiser
  179. 179. Multilingual Toolkit Génère automatiquement les traductions et les Resx Grâce à un web service de Microsoft Outil téléchargeable S’intègre aux menus de Visual Studio Permet de gérer la validation de la traduction Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  180. 180. Ce qu’on a couvert Fichiers de ressource Localisation avec LocBaml Multilingual Toolkit Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  181. 181. WPFLocalizeExtension Internationalisation Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel WPFLocalizeExtension
  182. 182. Plan WPF Localization Extension Localiser un contrôle Changer la culture dynamiquement Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  183. 183. WPF Localization Extension Projet codeplex pour localiser ses applications Supporte WPF .Net 3.5+, SL 5, WP 7+ Par défaut utilise des Resx, mais le Provider est substituable (Database, fichiers CSV, …) Changement de Culture possible en cours d’exécution Supporte le Binding Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Supporte le Binding Supporte un affichage à la conception
  184. 184. Localiser un contrôle <Window … xmlns:lex="http://wpflocalizeextension.codeplex.com" lex:LocalizeDictionary.DesignCulture="en" La culture utilisée dans le Concepteur Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© lex:LocalizeDictionary.DesignCulture="en" lex:ResxLocalizationProvider.DefaultAssembly="DemoLocalization" lex:ResxLocalizationProvider.DefaultDictionary="Resources" > <TextBlock Text="{lex:Loc WelcomeMsg}" /> Classe de RessourceClé de la Ressource
  185. 185. Changer la culture dynamiquement <ComboBox Name="comboCulture" SelectionChanged="CultureChanged" /> void MainWindow_Loaded(object sender, RoutedEventArgs e){ ILocalizationProvider provider = LocalizeDictionary.GetDefaultProvider(LocalizeDictionary.Instance); comboCulture.ItemsSource = provider.AvailableCultures; Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© private void CultureChanged(object s, SelectionChangedEventArgs e){ CultureInfo newCultureInfo = (CultureInfo)comboCulture.SelectedValue; LocalizeDictionary.Instance.SetCurrentThreadCulture = true; LocalizeDictionary.Instance.Culture = newCultureInfo; } comboCulture.ItemsSource = provider.AvailableCultures; }
  186. 186. Ce qu’on a couvert WPF Localization Extension Localiser un contrôle Changer la culture dynamiquement Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  187. 187. UserControls et Contrôles personnalisés Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel UserControls et Contrôles personnalisés
  188. 188. Plan • UserControls • Custom Controls Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  189. 189. Nécessité d’un contrôle personnalisé Avant de créer une nouvelle classe, examiner les autres solutions : 1. Valoriser les propriétés d’un contrôle existant 2. Embarquer un contrôle dans un contrôle existant ( ContentControl,Panel ) 1. Changer le template d’un contrôle existant 2. En dernier recours, créer un Contrôle personnalisé Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© 2. En dernier recours, créer un Contrôle personnalisé
  190. 190. UserControls • Visual studio permet de réaliser des composants personnalisés par assemblage de composants en glisser-déposer. • C’est aussi facile que pour les Windows grâce au Designer • Possibilité de les mettre dans un DLL • Apparition des UserControls créés dans la barre d’outils Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  191. 191. UserControls : réalisation • Pour rendre le composant réutilisable, il faut déclarer : • Des propriétés classiques • Pour utilisation en C#/.Net • Des Dependency Properties • Nécessaires au Binding Des événements publicsseront disponibles à travers le Designer Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Des événements publicsseront disponibles à travers le Designer • Nécessité du constructeur par défaut
  192. 192. UserControls : attributs utilisables • [Attributs] : • Category, CustomCategory • Description/ SRDescription( pour localisation ) • EditorBrowsable (pour cacher une prop. Dans l’éditeur) • ContentProperty • DefaultValue, DefaultEvent Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© DefaultValue, DefaultEvent • Bindable • Localizability • TypeConverter
  193. 193. CustomControls : pas de XAML, que du code • UserControls : Composition • XAML + CS • Permettent facilement l’agrégation par DnD • Ne peuvent être templatés • CustomControls : extension • Etendent un contrôle avec du comportement/code additionnel • Meilleure approche pour faire une bibliothèque de contrôles Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Meilleure approche pour faire une bibliothèque de contrôles • Peuvent être stylés et templatés • Fichier de code et style par défaut dans ThemesGeneric.xaml
  194. 194. Ce qu’on a couvert • UserControls • Custom Controls Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  195. 195. Routed Events Contrôles personnalisés Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Routed Events
  196. 196. Plan • Routed Events • Propagation • Gestion globale • Déclaration Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  197. 197. Routed Events • Evénements qui se propagent du haut en bas puis de bas en haut de l’arborescence. • Permet de traiter les événements d’un contrôle à un niveau global • En mode pré ou post • Seuls certains événements sont routés • Pour intercepter un événement : Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© void PreviewMouseDownEllipse(object sender, RoutedEventArgs e){…} void MouseDownEllipse(object sender, RoutedEventArgs e){ e.Handled = true; var button = e.Source as Button; }
  198. 198. Routed Events : propagation Window Grid 1 : Window.PreviewMouseDown 2 : Grid.PreviewMouseDown 6 : Window. MouseDown 5 : Grid.MouseDown Tunneling Bubbling Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Grid Ellipse3 : Ellipse.PreviewMouseDown 4 : Ellipse.MouseDown Tunneling Bubbling
  199. 199. Gestion globale • Les Routed Events peuvent être traités de manière globale • Permet d’enregistrer un seul handler pour N objets • Permet de faire l’enregistrement à haut niveau si besoin d’intelligence globale <UniformGrid Button.Click="UniformGrid_Click" Columns="5" Rows="5"> <Button Width="30" Height="30" Background="Red" /> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© <Button Width="30" Height="30" Background="Red" /> <Button Width="30" Height="30" Background="Blue" /> <Button Width="30" Height="30" Background="Green" /> </UniformGrid>
  200. 200. Déclarer un Routed Event public class Tile : Button{ public static readonly RoutedEvent TapEvent = EventManager.RegisterRoutedEvent("Tap", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(Tile)); public event RoutedEventHandler Tap { add { AddHandler(TapEvent, value); } remove { RemoveHandler(TapEvent, value); } Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© remove { RemoveHandler(TapEvent, value); } } void RaiseTapEvent() { RoutedEventArgs newEventArgs = new RoutedEventArgs(Tile.TapEvent); RaiseEvent(newEventArgs); } protected override void OnClick() { RaiseTapEvent(); } }
  201. 201. Ce qu’on a couvert • Routed Events • Propagation • Gestion globale Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  202. 202. Dependency Properties / Contrôles personnalisés Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Dependency Properties / Attached Properties
  203. 203. Plan • Dependency Properties • Attached Properties Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  204. 204. DependencyProperties • Nouveauté Fx 2.0 • Applicables seulement aux DependencyObject • Nécessaires au Binding • Pas de stockage physique visible. • Recherche de la valeur dans le parent si pas présent localement ! • Pas d’occupation mémoire si pas de valeur définie Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Pas d’occupation mémoire si pas de valeur définie • Nécessaire aux animations
  205. 205. Dependency Property : exemple • Génération grâce à l’extrait de code (Snippet ) propdp • Habillage par une propriété .Net public int Price{ get { return (int)GetValue(PriceProperty); } set { SetValue(PriceProperty, value); } } Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© } // Using a DependencyProperty as the backing store for // Price. This enables animation, styling, binding, etc... public static readonly DependencyProperty PriceProperty = DependencyProperty.Register("Price", typeof(int), typeof(Car), new PropertyMetadata(0));
  206. 206. Attached Properties • Permettent de coller des données extrinsèques à un élement • Mais qui seront utilisées par un parent par exemple • Pour changer la valeur programmatiquement : <Button x:Name="buttonOK" Grid.Row="3" Grid.Column="2" /> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Pour changer la valeur programmatiquement : Grid.SetRow(buttonOK, 3);
  207. 207. Attached Property : exemple • Génération grâce à l’extrait de code (Snippet ) propa public static int GetRow(DependencyObject obj){ return (int)obj.GetValue(RowProperty); } public static void SetRow(DependencyObject obj, int value){ obj.SetValue(RowProperty, value); Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© obj.SetValue(RowProperty, value); } public static readonly DependencyProperty RowProperty = DependencyProperty.RegisterAttached("Row", typeof(int), typeof(Grid), new PropertyMetadata(0));
  208. 208. Ce qu’on a couvert • Dependency Properties • Attached Properties Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  209. 209. Transformations Dessiner et imprimer Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Transformations et Shapes
  210. 210. Plan • La plupart du temps, le dessin n’est pas nécessaire • Les composants de base suffisent • Mais on peut avoir besoin de dessiner des courbes, camemberts, jauge « techniques » • Plan Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Plan • Layout Pass, LayoutTransform et RenderTransform • Les Shapes
  211. 211. Measure/ArrangeOverride • Négociation en deux étapes entre un composant et son parent pour l’attribution de l’espace Parent Enfant LayoutTransform Measure(availableSize) Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Layout Pass Size ArrangeOverride(arrangeBounds) RenderTransform
  212. 212. RenderTransform • Tout UIElement peut se voir appliquer des transformations géométriques sur sa RenderTransform: • RotateTransform • ScaleTransform (homothétie) • TranslateTransform • SkewTransform (Cisaillement) Elles sont cumulables grâce aux TransformGroup Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Elles sont cumulables grâce aux TransformGroup • l’ordre est important • Utiles pour les positionnements statiques et animations.
  213. 213. Shapes Classes qui représentent des formes. Utilisables en XAML Supportent le binding Shape DefiningGeometry : Geometry Fill : Brush FrameworkElement Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Fill : Brush Stroke : Brush StrokeDashArray : PenLineCap StrokeThickness : double EllipsePath Polygon FillRule Polyline Rectangle
  214. 214. Path • Permet de représenter toutes les shapes ! [ avec un peu d’habileté ;-) ] • Blend permet de combiner (union, intersection) les shapes <Path Stroke="Black" Fill="Gray“ Data="M 10,100 C 10,300 300,-200 300,100" /> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  215. 215. Path : syntaxe Commande Syntaxe Explication Move M x, y Point d’origine (x,y) Line L x,y trait droit jusqu’en (x,y) Horiz. Line H x trait droit jusqu’en (x,oldY) Vert. Line V y trait droit jusqu’en (oldX,y) Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Vert. Line V y trait droit jusqu’en (oldX,y) Arc d’ellipse A size rotationAngle isLarg eArcFlag sweepDirectionFla g endPoint Et aussi 4 courbes de Bézier …
  216. 216. Ce qu’on a couvert • Layout Pass, LayoutTransform et RenderTransform • Les Shapes • Manipulation avec blend Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  217. 217. Streaming Geometry Dessiner et imprimer Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Streaming Geometry
  218. 218. Objectif • Streaming Geometry pour des dessins avec des performances accrues Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  219. 219. Streaming Geometry • La redéfinition de OnRender permet de réaliser les dessins soi-même protected override void OnRender(DrawingContext dc){ base.OnRender(dc); Pen pen = new Pen(Brushes.Black,2.0); dc.DrawLine(pen, new Point(0, 0), new Point(Width, Height)); dc.DrawLine(pen, new Point(Width, 0), new Point(0, Height)); Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© dc.DrawLine(pen, new Point(Width, 0), new Point(0, Height)); } • Le dessin est en mode retained (conservé). • OnRender n’est pas réappelé même en cas d’applications de nouvelles transformations géométriques
  220. 220. Autres API de dessin du DrawingContext • DrawDrawing ( GlyphDrawing, VideoDrawing, ImageDrawing, GeometryDrawing, DrawingGroup) • DrawEllipse • DrawGeometry (EllipseGeometry, LineGeometry, PatGeometry, RectangleGeometry, StreamGeometry, CombinedGeometry, GeometryGroup) • DrawGlyphRun • DrawImage • DrawLine • DrawRectangle • DrawRoundedRectangle Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • DrawRoundedRectangle • DrawText • DrawVideo • PushTransform • PushClip • PushEffect • PushOpacity • Pop
  221. 221. Redéclencher le dessin • Grâce à une DependencyProperty dotée d’une PropertyMetadata qui déclenche le rendering private static FrameworkPropertyMetadata fpm = new FrameworkPropertyMetadata( Brushes.Black, (FrameworkPropertyMetadataOptions.AffectsRender | FrameworkPropertyMetadataOptions.BindsTwoWayByDefault), Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© FrameworkPropertyMetadataOptions.BindsTwoWayByDefault), null, null ); public static readonly DependencyProperty TimeBrushProperty = DependencyProperty.Register("TimeBrush", typeof(Brush), typeof(PaintCanvas), fpm);
  222. 222. Ce qu’on a couvert • Streaming Geometry pour des dessins avec des performances accrues Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  223. 223. Impression Dessiner et imprimer Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Impression
  224. 224. Plan • Documents XPS • Text Object Model, modèle de flux • Affichage des documents • Impressions Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  225. 225. XPS = XML Paper Specification • Format de document Zip contenant de nombreux documents, souvent XML Embarquent aussi les fontes (droits d'auteur) et bitmaps Possibilité de créer des liens hypertextes, Thumbnails Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Possibilité d’y écrire du XAML • sous forme de Canvas, Glyph, Path
  226. 226. Modèle paginé du XPS FixedDocumentSequence * FixedDocument * FixedPage Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© PageContent * UIElement
  227. 227. Text Object Model pour les <FlowDocument> • Modèle des TextBlock et des FlowDocuments, constitués de : • Eléments Inline <Inline/> : du texte dans un paragraphe <Span TextDecorations="" BaselineAlignment="" FlowDirection=""> : peut contenir des enfants <LineBreak /> <InlineUIContainer> : pour mettre des UIElement (IHM) Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • Eléments Block (pas pour les TextBlock) <Section/> : regroupement de stylistique sur plusieurs <Inline> <Floater HorizontalAlignment="" Width="" /> : pour faire des encadrés <Image Source Width> <List MarkerStyle="" StartIndex=""> et <ListItem> <Table>
  228. 228. Afficher les documents • Pour les FixedDocument <DocumentViewer> • Pour les FlowDocument : <FlowDocumentPageViewer> : une page à la fois <FlowDocumentReader> : permet à l'utilisateur de choisir le mode de visualisation : une page, deux pages à la fois, défilement continu Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© une page, deux pages à la fois, défilement continu <FlowDocumentScrollViewer> : visualisation en scrolling continu <RichTextBox > : pour permettre l'édition à l'utilisateur
  229. 229. Imprimer • XPSDocumentWriter Pour imprimer un FixedDocument dans un fichier ou sur une imprimante • Obtenir un XPSDocumentWriter de fichier : XpsDocumentWriter xpsdw = XpsDocument.CreateXpsDocumentWriter(xpsDocumentFile); FixedDocument fixedDocument = DocumentMaker.GenerateFixedDocument(); xpsdw.Write(fixedDocument); Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Permet aussi d'imprimer les IDocumentPaginator • Donc possible d'imprimer un FlowDocument grâce à son implémentation de IDocumentPaginatorSource xpsdw.Write(fixedDocument);
  230. 230. Imprimantes • PrintQueue Pour imprimer sur une imprimante PrintQueue.CreateXpsDocumentWriter(PrintDocumentImageableArea) • Affiche boite de dialogue pour choisir l'imprimante : PrintDocumentImageableArea imageArea = null; Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© AddJob(stream : String), Pause(), Resume(), Purge() • PrintServer Pour s'adresser à un serveur en particulier et obtenir ses PrintQueues PrintDocumentImageableArea imageArea = null; XpsDocumentWriter xpsdw = PrintQueue.CreateXpsDocumentWriter(ref imageArea);
  231. 231. Ce qu’on a couvert • Documents XPS • Text Object Model, modèle de flux • Affichage des documents • Impressions Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  232. 232. Multimédia Dessiner et imprimer Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Multimédia
  233. 233. Plan • MediaElement, contrôle de vidéo • Les modes de MediaElement et MediaPlayer • Mode indépendant et Mode Horloge • MediaPlayer pour Streaming Geometry et les Brush Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  234. 234. MediaElement MediaElement contrôle pour la vidéo • Pour jouer une vidéo et contrôler le déroulement • Basé sur Windows Media Player • Supporte MPEG, AVI, WMV et autres codecs installés • Gère le téléchargement Propriétés Evénements Méthodes Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Propriétés IsPaused IsBuffering IsMuted Balance HasAudio HasVideo LoadedBehavior BufferingProgress CanPause SpeedRatio Evénements MediaOpened MediaEnded MediaFailed Méthodes Play() Pause() Stop()
  235. 235. MediaPlayer et MediaElement en mode Indépendant • L’Uri du media peut être spécifiée • Le playback peut être contrôlé ( Play(), Pause(), Stop() ) • Position et SpeedRatio peuvent être spécifiés Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  236. 236. MediaPlayer et MediaElement en mode Horloge • L’Uri est spécifiée par un <MediaTimeline> • Le playback est contrôlé par l’Horloge. Les méthodes Play, Pause, Stop ne peuvent être utilisées • Le Media est chargé par MediaTimeLine.Source Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  237. 237. Streaming Geometry et Brush avec VideoDrawing • Dessiner dans un DrawingContext : protected override void OnRender(System.Windows.Media.DrawingContext dc) { var mediaPlayer = new MediaPlayer (); mediaPlayer.Open(new Uri("rocket.mp4",UriKind.Relative)); var videoDrawing = new VideoDrawing{ Player = mediaPlayer}; dc.DrawDrawing(videoDrawing); mediaPlayer.Play(); Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© mediaPlayer.Play(); } • Brush avec VideoDrawing: mediaPlayer = new MediaPlayer(); mediaPlayer.Open(new Uri("rocket.mp4", UriKind.Relative)); VideoDrawing vd = new VideoDrawing { Player = mediaPlayer }; vd.Rect = new Rect(0, 0, 100, 100); this.Background = new DrawingBrush(vd); mediaPlayer.Play();
  238. 238. Ce qu’on a couvert • MediaElement, contrôle de vidéo • Les modes de MediaElement et MediaPlayer • Mode indépendant et Mode Horloge • MediaPlayer pour Streaming Geometry et les Brush Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  239. 239. Animations Animer l’IHM Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Animations et storyboards
  240. 240. Plan • Animations • Storyboards Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  241. 241. • Les DependencyProperties des contrôles sont « animatables. » • On peut faire varier dans le temps, la position, taille; mais aussi Foreground, Background, Visibility, Margin … • Une Animation modifie une propriété d’un contrôle dans le temps • Différents types d’animations selon type de la propriété : Animations Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© • DoubleAnimation • Int32Animation • ColorAnimation • ThicknessAnimation • …
  242. 242. Storyboard Un Storyboard regroupe plusieurs animations Souvent défini dans les ressources <Storyboard x:Name="storyboardClickButton"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="buttonGo"> Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Storyboard.TargetName="buttonGo"> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard>
  243. 243. Storyboard avec Blend • Blend permet facilement de créer des Storyboards Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  244. 244. Jouer le Storyboard par code • Déclenchable par code … private void ButtonClick(object sender, RoutedEventArgs e) { storyboardClickButton.Begin(); } Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  245. 245. Ce qu’on a couvert • Animations • Storyboards Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
  246. 246. Les Triggers Animer l’IHM Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Emmanuel DURIN Formateur et Consultant indépendant Développement logiciel Les Triggers

×