Successfully reported this slideshow.

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

12,238 views

Published on

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

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

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

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

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

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

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

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

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

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

Published in: Technology
  • Be the first to comment

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

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

×