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

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

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
• Présentation de l’étude de cas
• Liens, bibliographie

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 à
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

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
• Utilise largement XAML
Connaissances réutilisables avec d’autres technos : Silverlight, Windows
Phone, Windows Store Apps

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
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

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
• Microsoft Certification Solution Developer
• Microsoft Certification Technical Specialist

Publics concernés
• Développeurs, programmeurs
• Chefs de Projets
• Architectes

Connaissances requises
• Connaissance de C# ou de Vb.Net, autre langage .Net
• Ou bien connaissance d’un autre langage de programmation non .Net

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

D’autres formations développement sur Alphorm

Formations développement .NET sur Alphorm

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
• Forums
Incontournable StackOverflow
• www.stackoverflow.com

Bibliographie
• Programming WPF
• Livre complet et détaillé de bonne qualité

Are you ready ? ☺

Bases de XAML
Conception de l’IHM
Emmanuel DURIN
Bases de XAML

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
XAML aussi utilisé en Workflow Foundation

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

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">
<Grid Height="70" Width="300">
<TextBlock Text="Prenom" FontSize="20"/>
</Grid>
</Border>

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 :
Les composants sont souvent décrits en XAML, mais peuvent aussi
être instanciés en .Net :
Button buttonOK = new Button();
buttonOK.Content = "OK";

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" />
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";
}

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">
<Window.Resources>
<bo:Person x:Key="toto" Age="10" Firstname="toto" />
</Window.Resources>

XAML : Evénements
private void ButtonFillClick(object sender, RoutedEventArgs e){
personnes.Add(new Personne { Nom = "Tournesol"});
}
<Button Content="Remplir" Click="ButtonFillClick" />
A partir du Concepteur graphique,
Propriétés du composant (F4),
Evénements, double-clique sur
l’événement à implémenter

Evénements, abonnement dynamique
L’application peut s’abonner dynamiquement :
// Abonnement :
buttonFill.Click += ButtonFillClick;
...
// Désabonnement :
buttonFill.Click -= ButtonFillClick;
Derrière un abonnement : une référence est gardée
Fuite mémoire potentielle.

Ce qu’on a couvert
XAML, syntaxe xml d’instanciation d’objets
La méthode InitializeComponent
Equivalence XAML et .Net

Disposer les contrôles
Emmanuel DURIN
Disposer les contrôles

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
Algorithme du peintre, et Panel.Zindex pour les superpositions

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

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 :
Le concepteur graphique de Visual Studio :
Edition en mode texte (XAML)
Edition en mode graphique

Familles de composants
Emmanuel DURIN
Familles de composants

Plan
De nombreux contrôles existent
On peut regrouper certains contrôles en familles :
ContentControls
HeaderedControls
ItemsControls
Panels
Shapes
Shapes
…

ContentControls - exemples

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>
</Button><Button Content="Remplir"/>
<Button Padding="5">
<StackPanel Orientation="Horizontal">
<Image Source="Icone2.png" />
<TextBlock Text="S'abonner" VerticalAlignment="Center"/>
</StackPanel>
</Button>

HeaderedContentControls
Héritent de ContentControl :
Ont un Header en plus

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
Les Shapes pour les dessins

Les Panels
Les Panels
Emmanuel DURIN

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
Grid
WrapPanel
DockPanel
UniformGrid
Border hérite de FrameworkElement

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
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
…

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"/>
<Button Content="Button" Canvas.Left="215" Canvas.Top="115"/>
</Canvas>

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
<StackPanel Margin="10" Orientation="Vertical" >
<RadioButton Content="Homme"/>
<RadioButton Content="Femme"/>
</StackPanel>

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

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>
<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>

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"
<Border Background="Black" BorderBrush="#FF8080FF"
BorderThickness="2" CornerRadius="5">
<StackPanel Margin="10" Orientation="Vertical" >
<RadioButton Content="Homme"/>
<RadioButton Content="Femme"/>
</StackPanel>
</Border>

Les Panels, qui permettent d’organiser semi-automatiquement leurs enfants
Les propriétés attachées

Les Ressources
Ressources et styles
Les Ressources
Emmanuel DURIN

Plan
Découvrir les ressources et leur utilisation
Dictionnaires de ressources
Accès programmatique
Ressources dynamiques

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
Styles
Brushes
Thickness (pour margins, paddings)
Template, ItemTemplate,ContentTemplate
N’importe quel objet .Net

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.
Ils sont inclus dans le XAML des FrameworkElement

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>
</Page.Resources>
<Grid Background="{StaticResource sunriseBrush}">
<Grid>
<Grid.Background>
<StaticResource ResourceKey="sunriseBrush"/>
</Grid.Background> ...
Ou bien :

XAML : ressources, MergedDictionary
Les dictionnaires de ressources permettent d’éviter l’inflation du fichier
App.xaml
<Application x:Class="App11.App" ...>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Common/StandardStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

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 :
…mais aussi de n’importe quel FrameworkElement :
object o = page.Resources["accountItemTemplate"];
DataTemplate dataTemplate = (DataTemplate)o;

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">
<Grid Name="rootGrid">
<Grid.Resources>
<SolidColorBrush x:Key="buttonBrush" Color="Red" />
</Grid.Resources>
<Button Background="{DynamicResource buttonBrush}" />
</Grid>

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

Les Styles
Les Styles
Emmanuel DURIN

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
Hériter les styles

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"/>
</Style>

« 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"
<Style TargetType="Button" x:Key="redButton">
</Style>
<Button Content="Red Button"
Style="{StaticResource redButton}"/>

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">
</Style>
<Style TargetType="Button" x:Key="totallyRedButton"
BasedOn="{StaticResource redButton}">
<Setter Property="Foreground" Value="Pink"/>
<Setter Property="Background" Value="Red"/>
</Style>

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

Les templates
Emmanuel DURIN
Les templates

Plan
Les modèles (templates)
Arbre visuel et arbre logique

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}"/>
<TextBlock Text="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
Avec VS/Blend, Click droit/Modifier le modèle/Modifier une copie…

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
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

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
ButtonLabel
Grid
ContentPresenter
Border
TextBlock
ContentPresenter
Border
TextBlock

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 :
Arbre visuel pour :
Rendu des éléments visuels
Propagation des LayoutTranform et RenderTransform
Propagation de la propriété IsEnabled
Test « Do hit »
RelativeResource (FindAncestor)

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);
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;
}

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
En arbre visuel qui contient l’instanciation de tous les composants des templates

DataBinding et
DataBinding
Emmanuel DURIN
DataBinding et
INotifyPropertyChanged

Plan
DataBinding

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}" />
<TextBox Text="{Binding Prenom}" />
public void PageLoaded( ... ){
this.DataContext = personne =
new Personne() { Age = 10, Prenom = "Emmanuel" };
}
<TextBox Text="{Binding Path=Adresse.Rue}" />

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,
Cette propriété est souvent valorisée avec un objet ViewModel,
l’adaptateur des données pour la page

DataBinding entre éléments
<Slider Name="slider1" />
<TextBox Text="{Binding ElementName=slider1, Path=Value, Mode=TwoWay}"/>
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

Bindings de champs
Il lie les propriétés des objets IHM aux objets métiers.
Source Target

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
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

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}" />
FindAncestor, AncestorType={x:Type local:MainWindow}}}"/>
<TextBlock Name="Prénom" Text="{Binding
Name,RelativeSource={RelativeSource Self}}" />
Pour accéder à ses propres propriétés :

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;
event PropertyChangedEventHandler PropertyChanged;
}

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
PropertyChanged(this, new PropertyChangedEventArgs(propName));
}
public int Age {
set { age = value;
OnPropertyChanged(); }
}
private int age;
}

Le Databinding
Binding sur DataContext
Binding entre éléments
Implémentation par les objets métiers

IValueConverter
DataBinding
Emmanuel DURIN
IValueConverter

Objectif
•Découvrir IValueConverter pour convertir une
valeur ou un type pour l’affichage

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
Conversions de types boolean -> enum Visibility
Il faut aussi parfois convertir les données saisies, sélectionnées en
données métiers.

Convertisseurs, côté XAML
<Window xmlns:converter="clr-namespace:FormulairePersonne">
<Window.Resources>
<converter:BooleanToVisibilityConverter
x:Key="booleanToVisibilityConverter" />
</Window.Resources>
Déclaration
de la
ressource
<StackPanel
Visibility="{Binding Path=ShowTutorial,
Converter={StaticResource booleanToVisibilityConverter}}">
Utilisation de la ressource

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
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;
}
}

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

Validation de surface
DataBinding
Emmanuel DURIN
Validation de surface

Plan
ExceptionValidationRule pour attraper les erreurs de
conversion
ValidationRule personnalisée
Affichage du message d’erreur
Personnalisation du template des erreurs

ExceptionValidationRule
Attraper les exceptions lors de la conversion
<TextBox><TextBox.Text>
<Binding Path="Age" NotifyOnValidationError="True"
UpdateSourceTrigger="PropertyChanged">
<Binding.ValidationRules>
<ExceptionValidationRule/>
</Binding.ValidationRules>
</Binding>
</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());
}

public class NumberRangeRule : ValidationRule{
public override ValidationResult Validate(object value, CultureInfo
cultureInfo){
int number = … value …;
...
if (number < min || number > max) {
return new ValidationResult(false,
return new ValidationResult(false,
String.Format("Number must be in range {0} - {1}", min, max));
}
return ValidationResult.Result;
}
}

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}">

Le template du composant peut être modifié pour intégrer le message
d’erreur
<TextBox Text="{Binding Age, UpdateSourceTrigger=PropertyChanged}">
<Validation.ErrorTemplate>
<ControlTemplate>
<StackPanel>


<AdornedElementPlaceholder x:Name="textBox"/>
<TextBlock Text="{Binding [0].ErrorContent}" Foreground="Red"/>
</StackPanel>
</ControlTemplate>
</Validation.ErrorTemplate>
</TextBox>

ExceptionValidationRule pour attraper les erreurs de
conversion

Validation
DataBinding
Emmanuel DURIN
Validation
par l’objet métier

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
erreurs par propriété

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;
}
}
}
<TextBox x:Name="textboxLibellé”
Text="{Binding Libellé, Mode=TwoWay,
NotifyOnValidationError=True, ValidatesOnExceptions=True}"/>

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
IDataErrorInfo
Error : String
Item[] : String
PersonDecorator
Lastname : String
Firstname : String
Person
Lastname : String
Firstname : String
1
1

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
bool HasErrors { get; }
event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged;
IEnumerable GetErrors(string propertyName);
}

Validation par les exceptions de propriété
IDataErrorInfo pour une erreur par propriété
erreurs par propriété
L’implémentation des interfaces, ou la levée des exceptions dans les
objets métiers peut être intrusif.
objets métiers peut être intrusif.
Le design pattern du décorateur permet de découpler les objets métiers de cette
logique

Données de conception
DataBinding
Emmanuel DURIN
Données de conception

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 !
Le retour visuel est immédiat !

Fournir des données de conception avec Blend
Consiste à instancier une classe en XAML
Tout se fait graphiquement sous Blend

Les données de conception avec Blend
On reviendra à ce sujet lorsqu’on s’intéressera aux
ItemsControls

Composants et Templates
ItemsControls
Emmanuel DURIN
Composants et Templates

Plan
Hiérarchie des ItemsControls
ItemTemplate et ItemsPanel
DataGrid
TreeView

ListBox, ComboBox
Servent à afficher des listes d’objets et faire des sélections
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, …)

ItemTemplate, ItemsPanel
ItemTemplate
Pour personnaliser l’affichage de chaque ligne
De type DataTemplate
ItemsPanel
Pour changer la disposition de tous les items
Pour changer la disposition de tous les items
De type ItemsPanelTemplate

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
<DataGrid Name="dataGridPersonnes AutoGenerateColumns="True" >

DataGrid – définition des colonnes
Désactivation de AutoGenerateColumns
Plusieurs templates de colonnes disponibles
DataGridTextColumn
DataGridComboBoxColumn
DataGridHyperlinkColumn
DataGridCheckBoxColumn
DataGridCheckBoxColumn
DataGridTemplateColumn, possibilité de personnaliser les
templates

DataGridTemplateColumn
<DataGrid Name="dataGridPersonnes AutoGenerateColumns=“False”>
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Nom}« />
<DataGridTemplateColumn >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate><Label Content="{Binding Prenom}"/></DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate><TextBox Text="{Binding Prenom}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>

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}"
ItemsSource="{Binding Employes}">
<TextBlock Margin="3" >
<Run Text="{Binding Nom}"/>
</TextBlock>
</HierarchicalDataTemplate>
</TreeView.Resources>
</TreeView>

ItemTemplate et ItemsPanel
DataGrid pour l’édition
TreeView pour les données hiérarchiques
La partie de l'image avec l'ID de relation rId3 n'a pas été trouvé dans le fichier.

Choisir le Template
ItemsControls
Emmanuel DURIN
Choisir le Template

Plan
DataType du DataTemplate
ItemTemplateSelector pour un choix dynamique

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>
ItemsSource="{Binding Employes}">
<TextBlock Margin="3" Text="{Binding Nom}" />
<HierarchicalDataTemplate DataType="{x:Type model:Personne}">
<TextBlock Margin="3" Text="{Binding Prenom}" >
</TreeView.Resources>
</TreeView>

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}"/>
ItemTemplateSelector="{StaticResource itemTemplateSelector}"/>

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) {
} 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;
}
}

DataType du DataTemplate
ItemTemplateSelector pour un choix dynamique

ItemsControls
ObservableCollection<T>
Emmanuel DURIN
et CollectionViewSource

Plan
CollectionViewSource

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
est mise à jour

ObservableCollection<T>, cinématique
persons = new ObservableCollection<Person>();
persons.Add( new Person {
Firstname = textboxFirstname.Text,
Lastname = textboxLastname.Text });
1. Click 2. CollectionChanged

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
ObservableCollection Fournit les données
Trie, filtre, regroupe
les données

CollectionViewSource - exemple
ObservableCollection<Personne> personnes = …
CollectionViewSource sourcePersonnes = new CollectionViewSource();
sourcePersonnes.Source = personnes;
sourcePersonnes.Filter += SourcePersonnesFilter;
dataGridPersonnes.ItemsSource = sourcePersonnes.View;
dataGridPersonnes.ItemsSource = sourcePersonnes.View;
...
void SourcePersonnesFilter(object sender, FilterEventArgs e){
var personne = e.Item as Personne;
e.Accepted = personne.Age >= ageMinimum;
}

Données pour les listes
ItemsControls
Emmanuel DURIN
Données pour les listes
à la conception

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 !

Fournir les données avec Blend

Les données de conception sont fournies par Blend
Peuvent être éditées à la main

Architecture MVVM
Model View ViewModel
Emmanuel DURIN
Architecture MVVM

• 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
• Utilisation/évolution naturelle avec un formidable outil tel
que le DataBinding

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.
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)

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
ViewModel
Commandes
Mini ViewModel
CommandesCommandes
Objet 1
Objet N
…
Binding fournit
les listes
d’objets pour
ListBox, …
est
propriété

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
• 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

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

Les Commandes
Emmanuel DURIN
Les Commandes

Plan
• Les commandes

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.
Sur (dés)activation tous les contrôles sont impactés

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);
}
}
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

Commands et CommandSources
ICommand
CanExecute( param ) :bool
Execute(param)
CanExecuteChanged
ICommandSource
Command
CommandParameter (1)
CommandTarget : IInputElement
1
ButtonBase
ButtonMenuItem

• Les commandes
CommandSource

RoutedCommands
Emmanuel DURIN
RoutedCommands

Plan
• RoutedCommands
• CommandBindings
• InputBindings

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
Grid
Button
Tunneling
Bubbling
Bubbling

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}
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

CommandBinding
Permet d’associer du comportement spécifiquement à une commande
dans le contexte d’un composant
public class UIElement
{
public CommandBindingCollection CommandBindings { get; }
}
CommandBinding binding =
new CommandBinding(ApplicationCommands.Close, AppClose);
...
private void AppClose(object sender, ExecutedRoutedEventArgs e){
this.Close();
}

InputBinding
Permet d’associer un raccourci clavier ou une action souris à une
commande
<Window.InputBindings>
<KeyBinding Key="P" Modifiers="Control“
Command="{Binding PrintCommand}"/>
<KeyBinding Key=“O" Modifiers="Control"
Command="ApplicationCommands.Open"/>
<MouseBinding Gesture="LeftDoubleClick"
Command="{Binding DataQuerySortEdit}" />
</Window.InputBindings>

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
RoutedCommand
Name : String
RoutedUICommand
Text: String
ButtonBase
ButtonMenuItem
ApplicationCommands
Save
Open
Cut
Copy
Paste
...
*

• RoutedCommands
• CommandBindings
• InputBindings

Implémentation
Glisser déposer
Emmanuel DURIN
Implémentation

Objectif
• Découvrir comment implémenter le Glisser-Déposer
( Drag ‘n Drop)

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
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, …)

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) {
protected override void OnMouseMove(MouseEventArgs e) {
if (e.LeftButton == MouseButtonState.Pressed) {
DragDropEffects effect =
DragDrop.DoDragDrop(this, dataToDnD,
DragDropEffects.Copy | DragDropEffects.Move);
}
}

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
}
}

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
// 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;
}

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
}
}

Le Glisser-Déposer
Source
Sur MouseMove démarrer avec DragDrop.DoDragDrop
Gérer QueryContinueDrag, GiveFeedBack
Cible
Gérer DragEnter, DragOver, DragLeave
Gérer DragEnter, DragOver, DragLeave
Gérer le Drop
AllowDrop = true

Formats de données
Glisser déposer
Emmanuel DURIN
Formats de données

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

Quand vérifier les formats ?
Source Cible
DragDrop.DoDragDrop DragEnter
MouseDown
GiveFeeedBack
DragOver
Exposer
les
formats
Drop
Fourniture
du code de
retour de
DoDragDrop
DragOver
DragLeave
QueryContinueDrag
Vérifier
Vérifier

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)
// 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);
}
}

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;
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;
}

• 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

Les threads
Tâches de fond et WPF
Emmanuel DURIN
Les threads

Plan
• Démarrer un thread
• Synchroniser les ressources
• Mettre à jour l’IHM à partir d’un worker thread avec le
Dispatcher
Dispatcher

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();
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");
}

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
• Synchronisation sur un objet
ReaderWriterLock
Mutex
• Exclusion à travers plusieurs processus
Semaphore
• Exclusion avec ressource comptée
[MethodImpl(MethodImplOptions.Synchronized)]

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
Function
Fonction N
Fonction N+1
Fonction N+2
Pop
GUI Event 2
GUI Event 3
GUI Event 4
Fonction N-1

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 ?
dispatcher.Invoke(new Action<long,String>(MiseAJourIHM),
new Object[] { pourcentage, msg });
else
progressBar.Text = msg + " ( " + pourcentage + "% )";
}
Passage vers
le thread
graphique

• Démarrer un thread
• Synchroniser les ressources
• Mettre à jour l’IHM à partir d’un worker thread avec le Dispatcher

BackgroundWorker
Tâches de fond et WPF
Emmanuel DURIN
BackgroundWorker

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

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.

Cinématique du BackgroundWorker
User Handler
RunWorkerAsync()
Thread IHM Thread travailleur
DoWork
ReportProgress()
ProgressChanged
while ( ! CancellationPending)
ReportProgress()
User Handler
CancelAsync()
User Handler
User Handler
Fin du travail

• Les facilités du BackgroundWorker
Démarrer une tâche de fond
Gérer l’affichage de la progression

Internationalisation
Localisation/Globalisation
Emmanuel DURIN

Plan
Fichiers de ressource
Localisation avec LocBaml
Multilingual Toolkit

Assemblées satellites
• Les ressources sont décrites dans des fichiers XML :
-LocalResource.resx (culture neutre)
-LocalResource.fr-FR.resx
-LocalResource.en-US.resx
• Une assemblée satellite nommée
XXXApp.resources.dll générée pour chacune
des cultures :

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
Utilisé par String.Format, DateTime.ToString

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>
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

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

Fichiers de ressource

WPFLocalizeExtension
Emmanuel DURIN
WPFLocalizeExtension

Plan
WPF Localization Extension
Localiser un contrôle
Changer la culture dynamiquement

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
Supporte le Binding
Supporte un affichage à la conception

<Window …
xmlns:lex="http://wpflocalizeextension.codeplex.com"
lex:LocalizeDictionary.DesignCulture="en"
La culture utilisée dans le Concepteur
lex:LocalizeDictionary.DesignCulture="en"
lex:ResxLocalizationProvider.DefaultAssembly="DemoLocalization"
lex:ResxLocalizationProvider.DefaultDictionary="Resources" >
<TextBlock Text="{lex:Loc WelcomeMsg}" />
Classe de RessourceClé de la Ressource

<ComboBox Name="comboCulture" SelectionChanged="CultureChanged" />
void MainWindow_Loaded(object sender, RoutedEventArgs e){
ILocalizationProvider provider =
LocalizeDictionary.GetDefaultProvider(LocalizeDictionary.Instance);
comboCulture.ItemsSource = provider.AvailableCultures;
private void CultureChanged(object s, SelectionChangedEventArgs e){
CultureInfo newCultureInfo = (CultureInfo)comboCulture.SelectedValue;
LocalizeDictionary.Instance.SetCurrentThreadCulture = true;
LocalizeDictionary.Instance.Culture = newCultureInfo;
}
comboCulture.ItemsSource = provider.AvailableCultures;
}

UserControls et
Contrôles personnalisés
Emmanuel DURIN
UserControls et

Plan
• UserControls
• Custom Controls

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é
2. En dernier recours, créer un Contrôle personnalisé

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

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
• Des événements publicsseront disponibles à travers le Designer
• Nécessité du constructeur par défaut

UserControls : attributs utilisables
• [Attributs] :
• Category, CustomCategory
• Description/ SRDescription( pour localisation )
• EditorBrowsable (pour cacher une prop. Dans l’éditeur)
• ContentProperty
• DefaultValue, DefaultEvent
DefaultValue, DefaultEvent
• Bindable
• Localizability
• TypeConverter

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
• 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

• UserControls
• Custom Controls

Routed Events
Emmanuel DURIN
Routed Events

Plan
• Routed Events
• Propagation
• Gestion globale
• Déclaration

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 :
void PreviewMouseDownEllipse(object sender, RoutedEventArgs e){…}
void MouseDownEllipse(object sender, RoutedEventArgs e){
e.Handled = true;
var button = e.Source as Button;
}

Routed Events : propagation
Window
Grid
1 : Window.PreviewMouseDown
2 : Grid.PreviewMouseDown
6 : Window. MouseDown
5 : Grid.MouseDown
Tunneling
Bubbling
Grid
Ellipse3 : Ellipse.PreviewMouseDown 4 : Ellipse.MouseDown
Tunneling
Bubbling

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" />
<Button Width="30" Height="30" Background="Red" />
<Button Width="30" Height="30" Background="Blue" />
<Button Width="30" Height="30" Background="Green" />
</UniformGrid>

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); }
remove { RemoveHandler(TapEvent, value); }
}
void RaiseTapEvent() {
RoutedEventArgs newEventArgs = new RoutedEventArgs(Tile.TapEvent);
RaiseEvent(newEventArgs);
}
protected override void OnClick() {
RaiseTapEvent();
}
}

• Routed Events
• Propagation
• Gestion globale

Dependency Properties /
Emmanuel DURIN
Dependency Properties /
Attached Properties

Plan
• Dependency Properties
• Attached Properties

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
• Pas d’occupation mémoire si pas de valeur définie
• Nécessaire aux animations

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); }
}
}
// 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));

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" />
• Pour changer la valeur programmatiquement :
Grid.SetRow(buttonOK, 3);

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);
obj.SetValue(RowProperty, value);
}
public static readonly DependencyProperty RowProperty =
DependencyProperty.RegisterAttached("Row", typeof(int),
typeof(Grid), new PropertyMetadata(0));

• Dependency Properties
• Attached Properties

Transformations
Dessiner et imprimer
Emmanuel DURIN
Transformations
et Shapes

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
• Plan
• Layout Pass, LayoutTransform et RenderTransform
• Les Shapes

Measure/ArrangeOverride
• Négociation en deux étapes entre un composant et son parent pour
l’attribution de l’espace
Parent Enfant
LayoutTransform
Measure(availableSize)
Layout Pass
Size ArrangeOverride(arrangeBounds)
RenderTransform

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
• Elles sont cumulables grâce aux TransformGroup
• l’ordre est important
• Utiles pour les positionnements statiques et animations.

Shapes
Classes qui représentent des formes.
Utilisables en XAML
Supportent le binding
Shape
DefiningGeometry : Geometry
Fill : Brush
FrameworkElement
Fill : Brush
Stroke : Brush
StrokeDashArray : PenLineCap
StrokeThickness : double
EllipsePath Polygon
FillRule
Polyline Rectangle

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" />

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)
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 …

• Layout Pass, LayoutTransform et RenderTransform
• Les Shapes
• Manipulation avec blend

Streaming Geometry
Emmanuel DURIN
Streaming Geometry

Objectif
• Streaming Geometry pour des dessins avec des performances accrues

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));
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

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
• DrawRoundedRectangle
• DrawText
• DrawVideo
• PushTransform
• PushClip
• PushEffect
• PushOpacity
• Pop

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),
FrameworkPropertyMetadataOptions.BindsTwoWayByDefault),
null,
null
);
public static readonly DependencyProperty TimeBrushProperty =
DependencyProperty.Register("TimeBrush", typeof(Brush),
typeof(PaintCanvas), fpm);

• Streaming Geometry pour des dessins avec des performances accrues

Impression
Emmanuel DURIN
Impression

Plan
• Documents XPS
• Text Object Model, modèle de flux
• Affichage des documents
• Impressions

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
Possibilité d’y écrire du XAML
• sous forme de Canvas, Glyph, Path

Modèle paginé du XPS
FixedDocumentSequence
*
FixedDocument
*
FixedPage
PageContent
*
UIElement

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)
• 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>

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
une page, deux pages à la fois, défilement continu
<FlowDocumentScrollViewer> : visualisation en scrolling continu
<RichTextBox > : pour permettre l'édition à l'utilisateur

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);
Permet aussi d'imprimer les IDocumentPaginator
• Donc possible d'imprimer un FlowDocument grâce à son implémentation de
IDocumentPaginatorSource
xpsdw.Write(fixedDocument);

Imprimantes
• PrintQueue
Pour imprimer sur une imprimante
PrintQueue.CreateXpsDocumentWriter(PrintDocumentImageableArea)
• Affiche boite de dialogue pour choisir l'imprimante :
PrintDocumentImageableArea imageArea = null;
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);

• Documents XPS
• Text Object Model, modèle de flux
• Affichage des documents
• Impressions

Multimédia
Emmanuel DURIN
Multimédia

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

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
Propriétés
IsPaused
IsBuffering
IsMuted
Balance
HasAudio
HasVideo
LoadedBehavior
BufferingProgress
CanPause
SpeedRatio
Evénements
MediaOpened
MediaEnded
MediaFailed
Méthodes
Play()
Pause()
Stop()

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

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

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();
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();

• 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

Animations
Animer l’IHM
Emmanuel DURIN
Animations
et storyboards

Plan
• Animations
• Storyboards

• 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
• DoubleAnimation
• Int32Animation
• ColorAnimation
• ThicknessAnimation
• …

Storyboard
Un Storyboard regroupe plusieurs animations
Souvent défini dans les ressources
<Storyboard x:Name="storyboardClickButton">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="buttonGo">
Storyboard.TargetName="buttonGo">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

Storyboard avec Blend
• Blend permet facilement de créer des Storyboards

Jouer le Storyboard par code
• Déclenchable par code …
private void ButtonClick(object sender, RoutedEventArgs e)
{
storyboardClickButton.Begin();
}

• Animations
• Storyboards

Les Triggers
Animer l’IHM
Emmanuel DURIN
Les Triggers

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

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

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

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

Más de Alphorm

Más de Alphorm (20)

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