Windows Presentation Foundation

Présentation de la formation
Windows Presentation
Foundation
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Emmanuel DURIN
Formateur et Consultant indépendant
Forum : http://www.alphorm.com/forum Développement logiciel
Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©
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

Connaissances réutilisables avec d’autres technos : Silverlight, Windows
Phone, Windows Store Apps

Le plan de formation
1. Présentation générale 9. Localisation/Globalisation
2. Conception de l’IHM avec XAML 10. Contrôles personnalisés
3. Ressources et Styles 11. Dessiner et imprimer : graphiques 2D
4. Liaison de données (DataBinding) 12. Animer l’IHM
5. ItemsControl 13. WPF et Windows Forms
6. Model View ViewModel 14. Cycle de vie de l’application
7. Glisser-déposer 15. Test et débogage
8. Tâches de fond et WPF 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 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 ? ☺

Conception de l’IHM
Bases de XAML
Emmanuel DURIN
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 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">
<TextBlock Text="Prenom" FontSize="20"/>
</Grid>
</Border>

XAML : un langage objet
Propriété .Net : <Button Content="Remplir" />
Syntaxe permettant de décrire <Button>

pleinement une propriété <Button.Content>Remplir</Button.Content>
objet : </Button>
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
<TextBox x:Name="textboxPrenom" />
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
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
<Button Content="Remplir" Click="ButtonFillClick" />
private void ButtonFillClick(object sender, RoutedEventArgs e){

personnes.Add(new Personne { Nom = "Tournesol"});
}
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
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

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 :
Edition en mode texte (XAML)
Edition en mode graphique

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

ContentControls - exemples

ContentControls
Ont une propriété Content qui peut contenir :
Du texte
Un autre composant graphique
<Button>Remplir</Button> <Button>
<Button.Content>Remplir</Button.Content>
<Button Content="Remplir"/> </Button>
<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 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
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
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"/>
</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.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"

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

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

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

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

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

</Style>

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
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}"/>
</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
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
Window
Border
Arbre logique (*) : ce qui disposé en XAML
Arbre visuel : inclut les templates, ce que AdornerDecorator
l’utilisateur voit au final
ContentPresenter AdornerLayer
Grid
Label Button
Border Border
ContentPresenter ContentPresenter
TextBlock 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 :

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

DataBinding
DataBinding et
INotifyPropertyChanged
Emmanuel DURIN
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 Path=Adresse.Rue}" />
public void PageLoaded( ... ){

this.DataContext = personne =
new Personne() { Age = 10, Prenom = "Emmanuel" };
}

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,
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
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
Static : très utile pour se lier aux propriétés statiques
<TextBlock Text="{x:Static local:App.Current}" />
Pour naviguer dans l’arborescence visuelle :

<TextBlock Text="{Binding Title, RelativeSource={RelativeSource
FindAncestor, AncestorType={x:Type local:MainWindow}}}"/>
Pour accéder à ses propres propriétés :

<TextBlock Name="Prénom" Text="{Binding
Name,RelativeSource={RelativeSource Self}}" />

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

INotifyPropertyChanged : exemple
public class Personne : INotifyPropertyChanged{

public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged( [CallerMemberName] string propName =
null) {
if (PropertyChanged != null) .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

DataBinding
IValueConverter
Emmanuel DURIN
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
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">
Déclaration <Window.Resources>
de la <converter:BooleanToVisibilityConverter
ressource x:Key="booleanToVisibilityConverter" />
</Window.Resources>
Utilisation de la ressource
<StackPanel
Visibility="{Binding Path=ShowTutorial,
Converter={StaticResource booleanToVisibilityConverter}}">

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
public object ConvertBack(object value, Type targetType, object p, CultureInfo
culture)
{
return value is Visibility && (Visibility)value == Visibility.Visible;
}
}
Il est souvent inutile d’implémenter le ConvertBack

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

DataBinding
Validation de surface
Emmanuel DURIN
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>
</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,
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

DataBinding
Validation
par l’objet métier
Emmanuel DURIN
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
Person IDataErrorInfo
Lastname : String Error : String
Firstname : String Item[] : String
PersonDecorator
Lastname : String
1 Firstname : String

INotifyDataErrorInfo
.Net 4.5
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; }
event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged;
IEnumerable GetErrors(string propertyName);
}

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.
Le design pattern du décorateur permet de découpler les objets métiers de cette
logique

DataBinding
Données de conception
Emmanuel DURIN
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 !

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

ItemsControls
Composants et Templates
Emmanuel DURIN
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
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
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.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 av ec l'ID de relation rId3 n'a pas été trouv é dans le fichier.

ItemsControls
Choisir le Template
Emmanuel DURIN
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>
<HierarchicalDataTemplate DataType="{x:Type model:Societe}"
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}"/>

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) {
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>
et CollectionViewSource
Emmanuel DURIN
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

ObservableCollection<T>, cinématique
persons = new ObservableCollection<Person>();
1. Click 2. CollectionChanged
persons.Add( new Person {

Firstname = textboxFirstname.Text,
Lastname = textboxLastname.Text });
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
CollectionViewSource Trie, filtre, regroupe

les données
ObservableCollection Fournit les données

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


ItemsControls
Données pour les listes
à la conception
Emmanuel DURIN
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

Model View ViewModel
Architecture MVVM
Emmanuel DURIN
• 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

MVVM dans une architecture 3 tiers
Couche de présentation
View
Composants graphiques
ViewModel Model
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
Evénement sur Binding fournit Binding fournit

mise à jour du les données à les Commandes
modèle afficher à aux boutons,
travers des menus
propriétés
Binding fournit
les listes
Commandes
Commandes d’objets pour
Commandes ListBox, …
ViewModel Objet 1
…
Objet N
est
propriété Mini ViewModel

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
• 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
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
ICommandSource CanExecute( param ) :bool
Command 1
Execute(param)
CommandParameter (1) CanExecuteChanged
CommandTarget : IInputElement
ButtonBase
MenuItem Button

• Les commandes
CommandSource

RoutedCommands
Emmanuel DURIN
Plan
• RoutedCommands
• CommandBindings
• InputBindings

RoutedCommands : propagation
Grâce aux CommandBindings, on peut traiter une commande à tout niveau
Valable pour Executed et CanExecute
1 : CommandBinding.PreviewExecuted 6 : CommandBinding.Executed
Window
Tunneling
Bubbling
2 : CommandBinding.PreviewExecuted Grid 5 : CommandBinding.Executed
Tunneling
Bubbling
Button
3 : CommandBinding.PreviewExecuted 4 : CommandBinding.Executed

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
UIElement
CommandBindings :CommandBindingCollection
*
ICommand CommandBinding
ICommandSource CanExecute( param ) :bool Command : ICommand
Command 1 1 PreviewCanExecute
Execute(param)
CommandParameter (1) CanExecuteChanged CanExecute
CommandTarget : IInputElement PreviewExecuted
Executed
RoutedCommand
ButtonBase Name : String
ApplicationCommands
Save
MenuItem Button RoutedUICommand * Open
Text: String Cut
Copy
Paste
...

• RoutedCommands
• CommandBindings
• InputBindings

Glisser déposer
Implémentation
Emmanuel DURIN
Objectif
• Découvrir comment implémenter le Glisser-Déposer
( Drag ‘n Drop)

Collaboration du glisser-déposer
Source Cible
MouseDown
DragEnter
DragDrop.DoDragDrop Entrée dans une
(source, dataObject, dragDropEffects)
cible de DnD
GiveFeeedBack
Donner un retour visuel Changer le curseur. DragOver
Ex : interdit, représentation des données Déplacement
DragLeave
Sortie
QueryContinueDrag
Sur modificaton de l’état du clavier (Ctrl, …)
Drop
Fourniture
du code de
retour de
DoDragDrop

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) {
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
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 le Drop
AllowDrop = true

Glisser déposer
Formats de données
Emmanuel DURIN
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
MouseDown Exposer
les
formats
DragDrop.DoDragDrop DragEnter
GiveFeeedBack
DragOver
Vérifier
DragLeave
QueryContinueDrag
Drop Vérifier
Fourniture
du code de
retour de
DoDragDrop

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

Tâches de fond et WPF
Les threads
Emmanuel DURIN
Plan
• Démarrer un thread
• Synchroniser les ressources
• Mettre à jour l’IHM à partir d’un worker thread avec le

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();
}
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
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
Push=Dispatcher.Invoke
Thread IHM Thread travailleur
while ( ! messages.Count > 0)
Worker
GUI Event 1
Function
GUI Event 2
Fonction N+2
Fonction N+1
GUI Event 3
Fonction N
GUI Event 4
Fonction N-1
Pop

Dispatcher pour rentrer dans le GUI Thread
• Le Dispatcher permet de résoudre ce problème
Est-ce qu’on est
ailleurs que dans
le Thread
graphique ?
private void MiseAJourIHM(long pourcentage, String msg){

Dispatcher dispatcher = progressBar.Dispatcher;
if ( ! dispatcher.CheckAccess())
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

Tâches de fond et WPF
BackgroundWorker
Emmanuel DURIN
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
Thread IHM Thread travailleur
DoWork
RunWorkerAsync()
while ( ! CancellationPending)
User Handler
ProgressChanged
ReportProgress()
User Handler
CancelAsync()
User Handler
Fin du travail
User Handler

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

Localisation/Globalisation
Internationalisation
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

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 :
<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 bin\debug
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

Internationalisation
WPFLocalizeExtension
Emmanuel DURIN
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 un affichage à la conception

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


Contrôles personnalisés
UserControls et
Emmanuel DURIN
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é

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
• 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
• 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
• Peuvent être stylés et templatés
• Fichier de code et style par défaut dans Themes\Generic.xaml

• UserControls
• Custom Controls

Routed Events
Emmanuel DURIN
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
1 : Window.PreviewMouseDown 6 : Window. MouseDown
Tunneling
Window
Bubbling
2 : Grid.PreviewMouseDown
Grid 5 : Grid.MouseDown
Tunneling
Bubbling
3 : Ellipse.PreviewMouseDown
Ellipse
4 : Ellipse.MouseDown

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

• Routed Events
• Propagation
• Gestion globale

Dependency Properties /
Attached Properties
Emmanuel DURIN
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
• 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
<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);
}
public static readonly DependencyProperty RowProperty =
DependencyProperty.RegisterAttached("Row", typeof(int),
typeof(Grid), new PropertyMetadata(0));

• Dependency Properties
• Attached Properties

Dessiner et imprimer
Transformations
et Shapes
Emmanuel DURIN
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
• 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
• l’ordre est important
• Utiles pour les positionnements statiques et animations.

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

FillRule

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 Hx trait droit jusqu’en (x,oldY)
Vert. Line Vy 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
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));
}
• 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
• 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),
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
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
<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

Imprimantes
• PrintQueue
Pour imprimer sur une imprimante
PrintQueue.CreateXpsDocumentWriter(PrintDocumentImageableArea)
• Affiche boite de dialogue pour choisir l'imprimante :
PrintDocumentImageableArea imageArea = null;
XpsDocumentWriter xpsdw = PrintQueue.CreateXpsDocumentWriter(ref imageArea);
AddJob(stream : String), Pause(), Resume(), Purge()
• PrintServer
Pour s'adresser à un serveur en particulier et obtenir ses PrintQueues

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

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

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

Animer l’IHM
Animations
et storyboards
Emmanuel DURIN
Plan
• Animations
• Storyboards

Animations
• 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é :

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

Animer l’IHM
Les Triggers
Emmanuel DURIN
Plan
• EventTriggers
• PropertyTriggers et DataTriggers

Différents types de Triggers
• <Trigger> aussi appelé PropertyTrigger
Se déclenche sur un changement de propriété dépendante du composant.
• <DataTrigger>
Déclenché sur une propriété d’un objet CLR, métier
(pas forcément une dependency property)
• <MultiTrigger> : multiconditionnel
• <MultiDataTrigger> un DataTrigger multiconditionnel
• <EventTrigger> se déclenche sur un événement

EventTrigger
• Associer un Storyboard à un événement grâce aux
EventTriggers
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click“
SourceName="buttonGo">
<BeginStoryboard
Storyboard="{StaticResource StoryboardClickButton}"/>
</EventTrigger>
</Window.Triggers>

Triggers et Property/DataTrigger
• Avec les DataTrigger et les PropertyTrigger, on peut aussi ajouter des
Storyboards.
• On distingue les EnterAction et les ExitAction
<Trigger Property="IsMouseOver" Value="true">

<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</Trigger.EnterActions>
<Setter Property="Background" TargetName="border"
Value="{StaticResource Button.MouseOver.Background}"/>
</Trigger>

• EventTriggers
• PropertyTriggers et DataTriggers

Animer l’IHM
VisualStates
Emmanuel DURIN
Objectif
• Découvrir les VisualStates

Orthogonalité des VisualStateGroups
Button CommonStates
Normal
1 PointerOver
• A un instant donné le bouton
a un état pour chacun des
groupes d’état qui lui sont Pressed
définis
Disabled
• On peut créer ses propres
Groupes d’états.
• Exemple : une ListBox avec 2
représentations selon qu’elle a FocusStates
ou pas des éléments. Focused
1
Unfocused
PointerFocused

Changer l’état d’un contrôle
• Changer l’état d’un contrôle par le code
• Il s’agit principalement de gérer ses états de code personnalisés
• Les états Normal, Focused, Unfocused sont traités par WPF
VisualStateManager.GoToState(control, stateName, useTransitions );

Définir des états différents
• XAML permet d’exprimer, des Storyboard dotées d’animations
correspondant à chaque état
• Les animations peuvent être sans durée et être juste un changement
d’apparence
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualWhite"/>
<DoubleAnimation Duration="0" To="1"
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="FocusVisualBlack"/>
</Storyboard>
</VisualState>

• Découverte des VisualStates

Animer l’IHM
Behaviors
Emmanuel DURIN
Objectif
• Découvrir les Behaviors

Classe Behavior<T>
• Behavior connaît juste l’objet auquel il est attaché
public abstract class Behavior : Animatable, IAttachedObject {

...
protected virtual void OnAttached();
protected virtual void OnDetaching();
}
public abstract class Behavior<T> : Behavior

where T : DependencyObject {
protected T AssociatedObject { get; }
}

Behavior<T>
• Pour ajouter un comportement à un composant
• Blend fournit une liste de Behaviors (et d’actions) :
• Internet et le développement complémentent avec d’autres behaviors

Associer un behavior à un composant
• Résultat du XAML généré par Blend :
<Canvas HorizontalAlignment="Left" Height="100" Margin="49,71,0,0“

VerticalAlignment="Top" Width="100" Background="#FFBF2626">
<i:Interaction.Behaviors>
<ei:MouseDragElementBehavior/>
</i:Interaction.Behaviors>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<ei:PlaySoundAction Source="chord.wav"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Canvas>
• Note : les actions ne sont pas des behaviors. Elles ont une méthode Invoke

• Behaviors
Possibilité d’étendre un composant sans héritage
Avec le concepteur de Blend

WPF et Windows Forms
Intégration des deux
technologies
Emmanuel DURIN
Plan
• Intégrer un contrôle Windows Forms dans une application
WPF
• Intégrer un contrôle WPF dans une application Windows
Forms

• Windows Forms dans une application WPF
• Besoin de réutiliser les contrôles Windows Forms en WPF
Nécessite l’assemblée WindowsFormsIntegration
<WindowsFormsHost x:Name="host">
<winforms:MonthCalendar />
</WindowsFormsHost>
public MainWindow(){
InitializeComponent();
MonthCalendar monthCalendar = (MonthCalendar)host.Child;
monthCalendar.DateSelected += (sender,e)
{
MessageBox.Show("Selected date is from " + e.Start + " to " + e.End);
}
}

• WPF dans une application Windows Forms
• ElementHost permet d’intégrer des contrôles WPF dans du Windows
Forms
La classe est glissable-déposable à partir de la boîte à outils
Nécessite l’assemblée WindowsFormsIntegration
public partial class FormAvecWPF : Form

{
public FormAvecWPF()
{
InitializeComponent();
graphCanvas = new GraphCanvas();
elementHost1.Child = graphCanvas;
}
}

• Intégrer un contrôle Windows Forms dans une application WPF
• Avec WindowsFormsHost
• Intégrer un contrôle WPF dans une application Windows Forms

• Avec ElementHost

Cycle de vie de l’application
Paramètres
fortement typés
Emmanuel DURIN
Objectif
• Découvrir comment sauvegarder et relire les paramètres
d’une application

Fichier de paramètres (Settings)
• Pas spécifique à WPF
• Edition graphique avec Visual Studio

des paramètres de :
• l’application (non-modifiables à
l’exécution, stockés dans
MonAppli.exe.config, renommage de
app.config)
• l’utilisateur (stockage dans un
répertoire spécifique à chaque
utilisateur)
private void FormParent_Load(object sender, EventArgs e){

this.Top = Settings.Default.Top;
• Visual Studio génère }
une classe pour une private void FormParent_FormClosed(object sender,
manipulation fortement FormClosedEventArgs e){
typée des paramètres Settings.Default.Top = this.Top;
Settings.Default.Save();
}

Paramètres d’une application

Déploiement
Déploiement classique
et déploiement ClickOnce
Emmanuel DURIN
Plan
• GAC : Global Assembly Cache
• Déploiements lourds : projets de Setup et Xcopy
• Déploiement ClickOnce

Global Assembly Cache
• Le GAC est un endroit unique pour le système dans lequel on peut installer des
assemblées partagées, utilisables par toutes les applications
• Le GAC permet d’installer plusieurs versions de la même assemblée, dans différentes
cultures.
• Installation avec :
%SDK%\gacutil.exe
Windows Installer
• Pour être installée dans le GAC, une DLL doit avoir un nom fort :
Nécessité d’être signée un certificat
• Une DLL n’a pas forcément besoin de faire partie du GAC pour être utilisée.
Elle peut simplement être copiée dans le répertoire d’une application

Projet de Setup
• Possibilité de faire une installation lourde et intrusive, qui nécessite des
droits d’administration :
Modification des clés de registre,
Installation de composants COM,
Installation de service Windows
Installation d’Assemblées dans le Global Assembly Cache ,…
• Génère aussi le .msi
• Capable d’installer le Framework .Net
• Présent jusqu’à VS 2010 …après Flexera InstallShield

Déploiement XCopy
• Consiste à déployer une application et toutes ses dépendances
(assemblées, images,…) dans un répertoire.
• La désinstallation consiste à effacer le répertoire
• Non intrusif
• Variante : le fichier CAB/Zip qui garantit l’intégrité du déploiement
• Pas de droit d’administrateur nécessaire

Déploiement ClickOnce
• Permet de faire un déploiement à partir d’un seul click
• A partir, d’internet, FTP, d’un partage réseau, d’un CD
• Supporte les mises à jour automatiques
• Impossibilité de faire une installation lourde et intrusive, qui nécessite des droits
d’administration :
Modification des clés de registre interdite,
Installation de composants COM interdit
Installation de service Windows
Mais possibilité d’installer des DLL, SQL server express ou Compact Edition,
Framework.Net

ClickOnce, comment ?
• Configurable à travers les propriétés du projet

• GAC : Global Assembly Cache
• Déploiements lourds : projets de Setup et Xcopy
• Déploiement ClickOnce

Déploiement
Déploiement XBAP
Emmanuel DURIN
Plan
• XAML Browser Applications
• Permissions et Full ou Partial Trust : la confiance
• Naviguer dans une application

XBAP : Xaml Browser Applications
• Applications à base de navigation – projet spécial
L’application est hébergée dans une NavigationWindow
• Elle contient des pages
• Fonctionnent dans le navigateur (IE6+ et Firefox (Windows avec .Net 3.5 et Mac OS)
Navigation intégrée avec le navigateur
• Dans un sandbox ( partial trust ou full trust)
• Accessibles à partir d’un fichier XBAP (XML)

Généré par Visual Studio ou Mage.exe/MageUI.exe
• IE sait télécharger le FX si il n’est pas installé

http://msdn.microsoft.com/en-us/library/aa970910.aspx

Restriction des permissions sans le Full trust
• Permis
Dessin 2D, 3D, Animation, Audio, Appels aux services ASMX, et services
Windows Communication Foundation (WCF), FlowDocuments et Readers
associés, Documents XPS, glisser-déposer internes, Boîtes de messages,
OpenFileDialog, Pages, Contrôles de saisie de texte (inclut la RichTextBox),
contrôles IHM, Vidéo
• Interdit
Accès au glisser-déposer de l’OS, Effets Bitmaps (dépréciés en .NET 3.5 SP1),
Communication directe avec DB (à moins du Full trust), Interopérabilité avec
des contrôles Windows ou des contrôles ActiveX, la plupart des boîtes de
dialogue standard, Shader effects, Fenêtres de haut niveau

Obtenir le full trust
Zone de sécurité Comportement Obtenir le « full trust »
Ordinateur local Full Trust Pas d’action nécessaire

Automatique
Intranet et sites de Demander le full Signer le XBAP avec un
confiance trust certificat de confiance. La
confiance peut alors être
demandée à l’utilisateur.
Internet Echec « confiance Signer le XBAP avec un
pas accordée » certificat

Naviguer dans l’application
• Les classes NavigationWindow et Page permettent de naviguer à la
manière d’un navigateur
NavigationService
CanGoBack : bool
CanGoForward : bool
Page GoBack()
NavigationService GoForward()
Navigate( …)
RemoveBackEntry()

Frame
• Intéressant pour composer des pages dans une même fenêtre
Conteneur de pages qui peut être inséré dans une page
• Gère la navigation
contentFrame.Navigate(new Uri("page1.xaml", UriKind.Relative));
Frame
Mêmes membres de
navigation que
NavigationWindow

• XAML Browser Applications
• Permissions et Full ou Partial Trust : la confiance
• Naviguer dans une application

Tests et débogage
Débogage du WPF
Emmanuel DURIN
Plan
• Rappels Débogage
• Visualiseur WPF
• PresentationTraceSources
• Snoop

Opérations de débogage
• L’environnement de développement supporte le débogage
Menu Raccourci Explication
Déboguer/Démarrer le débogage F5 Exécution sous le contrôle du debugger
Déboguer/Exécuter sans Ctrl+F5 Exécute le programme dans un processus autre

débogage que Visual Studio
Déboguer/Fenêtres/… Nombreuses fenêtres de débogage
Déboguer/Pas à pas détaillé F11 Rentrer dans les fonctions
Déboguer/Pas à pas principal F10 Ne rentre pas dans le détail des fonctions
Click droit/Exécuter jusqu’au Ctrl+F10 Exécuter jusqu’au curseur

curseur
Click droit/Pas à pas sortant Shift+F11 Exécuter jusqu’à sortir de la fonction courante
Click droit/Point d’arrêt F9 Ajouter/enlever un point d’arrêt

Fenêtres de débogage
• Accessibles dans le menu Déboguer/Fenêtres
Raccourci Explication
Ctrl+Alt+C Affichage de la pile
Ctrl+Alt+W,1 Espion 1
Ctrl+Alt+V,L Variables locales
Ctrl+Alt+V,A Automatique
Ctrl+Alt+I Immédiat
Ctrl+Alt+O Sortie
Ctrl+Alt+B Points d’arrêts

Points d’arrêt et Points de trace
• Les points de Trace permettent de

laisser des traces sans impacter le
code existant
• Accessibles par Clic droit/Point
d’arrêt/Insérer un point de Trace
• Points d’arrêt éditables :

• Nombre de passages
• Condition

Visualiseur WPF pour les contrôles
• Outillage de Visual Studio pour explorer les hiérarchies visuelles

PresentationTraceSources.TraceLevel
• Propriété attachée pour tracer les Bindings
<TreeView x:Name="treeviewItems" Margin="10"
xmlns:diagnostics="clr-namespace:System.Diagnostics;assembly=WindowsBase"
ItemsSource="{Binding Societes,
diagnostics:PresentationTraceSources.TraceLevel=High}">
• Fenêtre de sortie résultante :

Created BindingExpression (hash=58602024) for Binding (hash=28880957)
Path: 'Societes'
BindingExpression (hash=58602024): Default mode resolved to OneWay
BindingExpression (hash=58602024): Default update trigger resolved to PropertyChanged
…

Snoop
• Projet Codeplex pour explorer son WPF sous un autre angle
• Nombreuses fonctionnalités de débogage proches du
Visualiseur WPF

• Rappels Débogage
• Visualiseur WPF
• PresentationTraceSources
• Snoop

Tests et débogage
Tests
Emmanuel DURIN
Plan
• Tests unitaires
• Tests d’intégration avec UI automation
• Coded UI Tests

Tests unitaires
• Permettent de tester une classe isolément
• Le plus difficile est parfois de l’isoler ! -> Mock objects
• Intégrés à Visual Studio avec MS Test
• L’architecture MVVM rend le ViewModel facilement testable
• L’IHM est difficilement testable avec l’IHM

Tests unitaires : constitution
• Les tests unitaires sont constitués de méthode annotées par des attributs
• Les méthodes de test sont ponctuées par des Assertions (=vérifications)
[TestClass] public class TestMainViewModel{

[TestMethod] public void TestStartLoadingAndCancel()
{
MainViewModel viewModel = new MainViewModel();
viewModel.RefreshCmd.Execute(null);
Assert.AreEqual(true, viewModel.IsLoading);
Assert.AreEqual(true,
viewModel.CancelCmd.CanExecute(null));
}
}

Tests unitaires : initialisation et nettoyage
• Attributs pour exécuter du code d’initialisation ou
nettoyage :
• ClassInitialized
• ClassCleanup
• TestInitialized
• TestCleanup

UI Automation
• Frameworks pour accéder aux composants d’une application
• Fonctionne avec WPF, Win32, HTML
• Utile pour l’accessibilité et … les tests
• Concepts de UI Automation :
• Arborescence UI Automation
• Composants = hWnd Win32
• Eléments Automation
• Composants de l’arborescence
• Propriétés Automation
• Control Patterns
• Pour donner un ordre à un composant (Click,…)
• Evénements d’automation

UI Automation : Exemple de code
AutomationElement buttonOK =
AutomationElement.RootElement.FindFirst(
TreeScope.Descendants,
new PropertyCondition(
AutomationElement.AutomationIdProperty,
"buttonOK"));
// Obtention du pattern.
InvokePattern pattern = (InvokePattern)
button.GetCurrentPattern(InvokePattern.Pattern);
// Cliquer sur le bouton

pattern.Invoke();

Coded UI Tests
• Pour réaliser des tests par le clic et la saisie dans l’IHM de l’application
• Génération du code automatique qui simule l’utilisateur

• Insertion des instructions d’assertion à la main
[TestMethod] public void TestSaisieInvalide() {

this.UIMap.RecordedMethod1();
WpfEdit uITextboxCAEdit =
this.UIMap.UIERPPlusWindow.UITabControlItemsTabList
.UIERPPlusSocieteTabPage.UITextboxCAEdit;
Assert.AreNotEqual("", uITextboxCAEdit.ToolTipText);
Assert.AreNotEqual(null, uITextboxCAEdit.ToolTipText);
}

• Tests unitaires
• Tests d’intégration avec UI automation
• Coded UI Tests

Tests et débogage
Exceptions
Emmanuel DURIN
Objectif
• Attraper toutes les exceptions

Les exceptions dans une appli pas WPF
• Rappel :
AppDomain.CurrentDomain.UnhandledException +=
new UnhandledExceptionEventHandler(OnUnhandledException);

Attraper toutes les exceptions dans une appli WPF
• Les gérer ou pas, laisser des traces
public partial class App : Application{

public App(){
DispatcherUnhandledException+=UnhandledException;
}
private void UnhandledException(object sender,
DispatcherUnhandledExceptionEventArgs e) {
// empêche le plantage de l’application
e.Handled = true;
}
}


Conclusion
Emmanuel DURIN
Plan
• Rappels des objectifs de la formation
• Liens, bibliographie
• Coordonnées formateur

Rappels des objectifs
1. Présentation générale 9. Localisation/Globalisation
2. Conception de l’IHM avec XAML 10. Contrôles personnalisés
3. Ressources et Styles 11. Dessiner et imprimer : graphiques 2D
4. Liaison de données (DataBinding) 12. Animer l’IHM
5. ItemsControl 13. WPF et Windows Forms
6. Model View ViewModel 14. Cycle de vie de l’application
7. Glisser-déposer 15. Test et débogage
8. Tâches de fond et WPF 16. Conclusion

Coordonnées 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

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é

Merci
et à la prochaine ☺

Windows Presentation Foundation

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Windows Presentation Foundation

Încărcat de

Drepturi de autor:

Formate disponibile

Présentation de la formation

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

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

• Très riche : Data Binding, Stylistique, Animations, MultiMedia, …

• Utilise largement XAML

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

2. Conception de l’IHM avec XAML 10. Contrôles personnalisés

3. Ressources et Styles 11. Dessiner et imprimer : graphiques 2D

4. Liaison de données (DataBinding) 12. Animer l’IHM

5. ItemsControl 13. WPF et Windows Forms

6. Model View ViewModel 14. Cycle de vie de l’application

7. Glisser-déposer 15. Test et débogage

8. Tâches de fond et WPF 16. Conclusion

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

• Cette certification fait partie des cursus

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

• Ou bien connaissance d’un autre langage de programmation non .Net

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

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

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Syntaxe permettant de décrire <Button>

Les composants sont souvent décrits en XAML, mais peuvent aussi

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

private void Page_Loaded(object sender, RoutedEventArgs e)

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

private void ButtonFillClick(object sender, RoutedEventArgs e){

A partir du Concepteur graphique,

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Derrière un abonnement : une référence est gardée

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

<StackPanel Margin="10" Orientation="Vertical" >

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

<Border Background="Black" BorderBrush="#FF8080FF"

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©

Windows Presentation Foundation avec Visual Studio 2013 alphorm.com™©