Weitere ähnliche Inhalte Ähnlich wie Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511) (20) Alphorm.com Formation Windows Presentation Foundation avec Visual Studio 2013 (70-511)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. 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. 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. 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. 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. 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
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. 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™©
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
14. Are you ready ? ☺
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
…
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>
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. « 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. 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. 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. 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
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. 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. 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. 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. 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. 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. 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
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. 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. 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. 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. 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. 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. 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. 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. 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™©
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
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. 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. 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. 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. 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. 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. 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. 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
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. 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. 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. Ce qu’on a couvert
DataType du DataTemplate
ItemTemplateSelector pour un choix dynamique
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. 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. 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. 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. Ce qu’on a couvert
ObservableCollection<T>
CollectionViewSource
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. 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. Fournir les données avec Blend
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. 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. 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. 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. 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. 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. 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. 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
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. 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. 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. Ce qu’on a couvert
• Les commandes
CommandSource
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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
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. 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. 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. 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. 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. Ce qu’on a couvert
• RoutedCommands
• CommandBindings
• InputBindings
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. Objectif
• Découvrir comment implémenter le Glisser-Déposer
( Drag ‘n Drop)
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
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. 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. 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. 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. Ce qu’on a couvert
Fichiers de ressource
Localisation avec LocBaml
Multilingual Toolkit
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. 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. 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. 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. 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
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. 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. 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. 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. 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. Ce qu’on a couvert
• UserControls
• Custom Controls
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. Plan
• Routed Events
• Propagation
• Gestion globale
• Déclaration
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. 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. 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. 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. Ce qu’on a couvert
• Routed Events
• Propagation
• Gestion globale
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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
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. 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. 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. 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. Ce qu’on a couvert
• Dependency Properties
• Attached Properties
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. 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. 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. 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. 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. 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. 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. 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. 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. Objectif
• Streaming Geometry pour des dessins avec des performances accrues
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. 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. 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. Ce qu’on a couvert
• Streaming Geometry pour des dessins avec des performances accrues
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. Plan
• Documents XPS
• Text Object Model, modèle de flux
• Affichage des documents
• Impressions
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. Modèle paginé du XPS
FixedDocumentSequence
*
FixedDocument
*
FixedPage
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
PageContent
*
UIElement
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
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. 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. Storyboard avec Blend
• Blend permet facilement de créer des Storyboards
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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. Ce qu’on a couvert
• Animations
• Storyboards
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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