WPF Custom Control Development Unchained

1.406 Aufrufe

Veröffentlicht am

Zusammen mit André, haben wir vor etwas längerer Zeit einen Vortrag zum Thema WPF Custom Control Development ausgestaltet. Wir hielten den Vortrag auf einigen Konferenzen und .NET UserGroups!

Der Vortrag zeigt zunächst, wie man abstrakt bei der Entwicklung neuer Controls vorgehen kann. Als Ausgangspunkt sollte eine kleine Analyse dienen. Ziel der Analyse ist die Klärung der Schnittstellen des Controls d.h. welche Properties, Events usw. angeboten werden. Danach thematisiert der Vortrag die Frage, wann überhaupt ein Custom Control sinnvoll ist. WPF bietet u.a. mit Styles und Templates unglaubliche Möglichkeiten und der Zeitpunkt zur Erstellung eines eigenes Custom Controls verzögert sich aus der technischen Perspektive stark. Demgegenüber stehen jedoch Überlegungen, ob das Control gerade für einen Prototyp oder realen Produktiv-Code implementiert wird. Für einen Wegwerf-Prototyp darf es gerne quick and dirty sein. Anschließend zeigt der Vortrag einige der handwerkliche Techniken u.a. Custom Control Library, Routed Events, Dependency Properties, Routed Commands, und OnApplyTemplate Methode. Diese Techniken werden anhand einer einfacheren SearchTextBox und eines komplexen PointCharts (Graphen) veranschaulicht.
Im Anschluss wird das Thema Blendability angesprochen und die wichtigsten Attribute vorgestellt.

Ich beschäftige mich schon wirklich lange mit der WPF und gegenwärtigen UI Frameworks. Nach wie vor fasziniert mich die Architektur der WPF unheimlich und aus meiner Sicht gibt es kein UI Framework, welches auch im Hinblick auf Custom Control Development so eine logische und ausgeklügelte Basis bietet! Wer einmal allgemeines Wissen über Control-Bau gelernt hat und sich danach die Techniken der WPF aneignet, wird die WPF lieben.

Veröffentlicht in: Software
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.406
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
10
Aktionen
Geteilt
0
Downloads
11
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

WPF Custom Control Development Unchained

  1. 1. WPF CUSTOM CONTROL DEVELOPMENT UNCHAINED David C. Thömmes Senior Software Engineer Lead Software Engineering Standards thoemmes@ergosign.de Ergosign GmbH
  2. 2. Auf der Suche nach Custom Controls
  3. 3. CUSTOM CONTROL ANALYSE 3 Abstraktes Vorgehen
  4. 4. CUSTOM CONTROL ANALYSE 3 Abstraktes Vorgehen Design Anforderungen
  5. 5. CUSTOM CONTROL ANALYSE 3 Abstraktes Vorgehen Design Anforderungen UI Development Analyse Abstraktion
  6. 6. CUSTOM CONTROL ANALYSE 3 Identifikation Standard UI Elemente Custom Controls Anforderungsanalyse pro Custom Control Funktionale Anforderungen, Properties, Events, .... Abstraktes Vorgehen Design Anforderungen UI Development Analyse Abstraktion
  7. 7. CUSTOM CONTROL ANALYSE 3 Identifikation Standard UI Elemente Custom Controls Anforderungsanalyse pro Custom Control Funktionale Anforderungen, Properties, Events, .... Abstraktes Vorgehen Design Anforderungen Develop UI Development Analyse Abstraktion
  8. 8. CUSTOM CONTROLS? 4
  9. 9. CUSTOM CONTROLS? Eigentlich “nur” Ableitung von einer konkreten Klasse != UserControl Styling- und Template- Möglichkeiten Visueller Aufbau im Control Template Default Style möglich Generic.xaml Zusammenfassung in einer Control Library möglich 5
  10. 10. Besteht i.d.R aus Klasse, Style, Template Verwaltung in Custom Control Library (VS Projektvorlage) Kann beliebe Custom Controls & Ressourcen enthalten DefaultStyle wird nach Konvention in “Themes/Generic.xaml” deklariert Mapping im statischen Konstruktor des Controls (DefaultStyleKeyProperty.OverrideMetadata) CUSTOM CONTROLS? Custom Control Library 6
  11. 11. KAPITELTITEL 7 Neues Projekt erstellen
  12. 12. 8 Template WPF Custom Control Library wählen
  13. 13. 9 Los gehts!
  14. 14. 10 CustomControl1.cs
  15. 15. 11 Generic.xaml
  16. 16. 12 SearchTextBox.cs
  17. 17. 13 Generic.xaml
  18. 18. WANN IST EIN CUSTOM CONTROL SINNVOLL? 14
  19. 19. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15
  20. 20. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control?
  21. 21. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren?
  22. 22. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating?
  23. 23. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions?
  24. 24. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions? Attached Properties/Behaviors?
  25. 25. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions? Attached Properties/Behaviors? Drittanbieter?
  26. 26. WANN IST EIN CUSTOM CONTROL SINNVOLL? 15 WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions? Attached Properties/Behaviors? Drittanbieter? My Custom Controlvs.
  27. 27. Prototyp vs. Produktiv Code Wiederverwendbarkeit Konsistenz im User Interface Produktivität bei großen Projekten WANN IST EIN CUSTOM CONTROL SINNVOLL? Allgemeine Überlegungen 16
  28. 28. PointChart SearchTextBox
  29. 29. WANN IST EIN CUSTOM CONTROL SINNVOLL? Die Ausrüstung! 18 Loaded/Unloaded Routed Commands Custom ControlDependency Properties Blendability Attribute Overrid e Style, Template & TemplateBinding OnApplyTemplate Routed Events Custom Control Library & Generic.xaml
  30. 30. SEARCHTEXTBOX 19
  31. 31. SearchTextBox
  32. 32. ANALYSE 21
  33. 33. SEARCHTEXTBOX 22 View Model
  34. 34. SEARCHTEXTBOX 22 View Model
  35. 35. SEARCHTEXTBOX 22 TextBox View Model
  36. 36. SEARCHTEXTBOX 22 TextBox View Model
  37. 37. SEARCHTEXTBOX 22 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground TextBox View Model
  38. 38. SEARCHTEXTBOX 22 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground TextBox View Model
  39. 39. SEARCHTEXTBOX 22 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground ClearCommand (Zurücksetzen des Texts) TextBox View Model
  40. 40. SEARCHTEXTBOX 22 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground ClearCommand (Zurücksetzen des Texts) TextBox View Model
  41. 41. SEARCHTEXTBOX 22 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground ClearCommand (Zurücksetzen des Texts) TextBox PropertyBinding View Model
  42. 42. CUSTOM CONTROL LIBRARY 23
  43. 43. KAPITELTITEL 24 Es kann losgehen!
  44. 44. 25 Basisklasse bestimmen (SearchTextBox.cs)
  45. 45. STYLE & TEMPLATE 26
  46. 46. SEARCHTEXTBOX 27 http://msdn.microsoft.com/en-us/library/aa970773(v=vs.110).aspx
  47. 47. Style & Template (Generic.xaml)
  48. 48. DEPENDENCY PROPERTIES BASICS 29
  49. 49. Oberflächlich wie .NET Properties (Get, Set) Unterschied liegt in der Implementierung Ausschließliche Verwendung bei Controls Metadaten und Speicherperformance, Änderungsbenachrichtigungen Grundlage für Trigger, Data Binding, Animationen etc. SEARCHTEXTBOX Dependency Properties - Basics 30
  50. 50. > Registrieren über Statische Funktion > Name > Typ > Control Typ bzw. Klasse > Metadaten Properties anlegen 1/2 (SearchTextBox.cs) 31
  51. 51. 32 > Verwendung der Methoden GetValue(), SetValue() Properties anlegen 2/2 (SearchTextBox.cs)
  52. 52. ROUTED COMMANDS 33
  53. 53. RoutedCommand Klasse implementiert ICommand Löst eine Aktion innerhalb eines Controls aus und muss abonniert werden Verknüpfung mit Methode oder Funktion der Control Klasse per CommandBinding Kann über Command Property ausgelöst werden SEARCHTEXTBOX RoutedCommands 34
  54. 54. SEARCHTEXTBOX 35
  55. 55. SEARCHTEXTBOX 35 Child Control löst Command aus
  56. 56. SEARCHTEXTBOX 35 Parent 1 Child Control löst Command aus
  57. 57. SEARCHTEXTBOX 35 Parent 2 Parent 1 Child Control löst Command aus
  58. 58. SEARCHTEXTBOX 35 .... Parent 2 Parent 1 Child Control löst Command aus
  59. 59. SEARCHTEXTBOX 35 Parent Control mit “Abonnement” führt Aktion aus .... Parent 2 Parent 1 Child Control löst Command aus
  60. 60. SEARCHTEXTBOX 35 Parent Control mit “Abonnement” führt Aktion aus .... Parent 2 Parent 1 Child Control löst Command aus
  61. 61. SEARCHTEXTBOX 36
  62. 62. SEARCHTEXTBOX 36
  63. 63. SEARCHTEXTBOX 36 1.Button-Click löst das Command aus
  64. 64. SEARCHTEXTBOX 36 1.Button-Click löst das Command aus 2. SearchTextBox mit “Abonnement” führt Aktion aus
  65. 65. SEARCHTEXTBOX 36 1.Button-Click löst das Command aus 2. SearchTextBox mit “Abonnement” führt Aktion aus 3. Command stoppt
  66. 66. 37 > Routed Command anlegen > Name > Control Typ bzw. Klasse Routed Command 1/3 (SearchTextBox.cs) > Execute Aktion > CanExecute Abfrage
  67. 67. Routed Command 2/3 (SearchTextBox.cs) 38 > Command Binding erzeugen > Command > Execute > CanExecute
  68. 68. Routed Command 3/3 (Generic.xaml) 39 > Auslösen über Command Property / x:Static Verweis
  69. 69. VIEWMODEL KOMMUNIKATION 40
  70. 70. Binding (Implementierung INotifyPropertyChanged) SEARCHTEXTBOX ViewModel Kommunikation - Basics 41
  71. 71. 42 ViewModel Kommunikation 1/3 (MainView.xaml) > Binding an ViewModel Property
  72. 72. 43 ViewModel Kommunikation 2/3 (SampleViewModel.cs) > Implementieren von INotifyPropertyChanged
  73. 73. 44 ViewModel Kommunikation 3/3 (SampleViewModel.cs) > Aufrufen von OnPropertyChanged (Update des Bindings) > Aufruf der Update Logik
  74. 74. SEARCHTEXTBOX 45 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground ClearCommand (Rucksetzen des Texts) TextBox PropertyBinding View Model
  75. 75. SEARCHTEXTBOX 45 Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground ClearCommand (Rucksetzen des Texts) TextBox PropertyBinding View Model DONE
  76. 76. POINTCHART 46
  77. 77. PointChart
  78. 78. ANALYSE 48
  79. 79. POINTCHART 49
  80. 80. POINTCHART 49 PointChartViewModel
  81. 81. POINTCHART 49 PointChartViewModel Points
  82. 82. POINTCHART 49 PointChartViewModel Points P1 P2 ...
  83. 83. POINTCHART 49 PointChartViewModel Points P1 P2 ...
  84. 84. POINTCHART 49 PointChartViewModel Points P1 P2 ...
  85. 85. POINTCHART 49 PointChartViewModel Points P1 P2 ...
  86. 86. POINTCHART 49 PointChartViewModel Points P1 P2 ...
  87. 87. POINTCHART 49 ListBox (PointChart) PointChartViewModel Points P1 P2 ...
  88. 88. POINTCHART 49 ListBox (PointChart) ListBoxItem (PointChartItem) PointChartViewModel Points P1 P2 ...
  89. 89. POINTCHART 49 ListBox (PointChart) ListBoxItem (PointChartItem) Polyline (PART_Line) PointChartViewModel Points P1 P2 ...
  90. 90. POINTCHART 49 ListBox (PointChart) ListBoxItem (PointChartItem) Polyline (PART_Line) Canvas (PART_DrawingArea) PointChartViewModel Points P1 P2 ...
  91. 91. 50 PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart)
  92. 92. 50 PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart) X/YMinimum
  93. 93. 50 PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart) X/YMinimum X/YMaximum
  94. 94. 50 PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart) X/YMinimum X/YMaximum LineThickness
  95. 95. 50 PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart) X/YMinimum X/YMaximum LineThickness LineBrush
  96. 96. 50 PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart) X/YMinimum X/YMaximum LineThickness LineBrush ...
  97. 97. 50 Property- Binding (ItemsSource) PointChartViewModel Points P1 P2 ... POINTCHART ListBox (PointChart) X/YMinimum X/YMaximum LineThickness LineBrush ...
  98. 98. 51 ListBoxItem: (PointChartItem) PointChartViewModel Points P1 P2 ... POINTCHART
  99. 99. 51 ListBoxItem: (PointChartItem) XUnitValue PointChartViewModel Points P1 P2 ... POINTCHART
  100. 100. 51 ListBoxItem: (PointChartItem) XUnitValue YUnitValue PointChartViewModel Points P1 P2 ... POINTCHART
  101. 101. 51 ListBoxItem: (PointChartItem) XUnitValue YUnitValue Property Binding PointChartViewModel Points P1 P2 ... POINTCHART
  102. 102. 51 ListBoxItem: (PointChartItem) XUnitValue YUnitValue Property Binding PointChartViewModel Points P1 P2 ... POINTCHART UnitPointChanged-RoutedEvent (PointChart)
  103. 103. 52 Polyline (PART_Line) PointChartViewModel Points P1 P2 ... POINTCHART
  104. 104. 52 Polyline (PART_Line) Point-Management innerhalb des Controls PointChartViewModel Points P1 P2 ... POINTCHART
  105. 105. 52 Polyline (PART_Line) Point-Management innerhalb des Controls (override) ItemsChanged PointChartViewModel Points P1 P2 ... POINTCHART
  106. 106. 52 Polyline (PART_Line) Point-Management innerhalb des Controls (override) ItemsChanged UnitPointChanged PointChartViewModel Points P1 P2 ... POINTCHART
  107. 107. 53 Polyline
  108. 108. POINTCHART 54 That’s it!
  109. 109. CUSTOM CONTROL LIBRARY 55
  110. 110. 56 Custom Control Library erstellen
  111. 111. 57 Basisklasse bestimmen (PointChart.cs)
  112. 112. 58 Basisklasse bestimmen (PointChartItem.cs)
  113. 113. 59 Basisklasse bestimmen (PointChart.cs) (PointChartItem.cs)
  114. 114. POINTCHART Besonderheit ItemsControl (Override) IsItemItsOwnContainerOverride Ist das Item sein eigener Container? (Override) GetContainerForItemOverride Liefert das Element zum Anzeigen des Items 60
  115. 115. 61 Besonderheit ItemsControl (PointChart.cs)
  116. 116. STYLE & TEMPLATE 62
  117. 117. Style & Template: PointChart (Generic.xaml)
  118. 118. Style & Template: PointChartItem (Generic.xaml)
  119. 119. ONAPPLYTEMPLATE() 65
  120. 120. Logic (C#, Klasse) und Visualisierung (Xaml, Template) getrennt Elemente innerhalb Control Template werden nach Konvention mit PART_... benannt Element-Referenzierung über OnApplyTemplate() Methode GetTemplateChild() Methode mit PART_... aufrufen Achtung: Element müssen nicht in der Template vorhanden sein POINTCHART OnApplyTemplate() 66
  121. 121. Element- Referenzierung 1/2 (Generic.xaml) > Diese beiden Elemente sollen referenziert werden
  122. 122. Element- Referenzierung 2/2 (PointChart.cs) > Referenz kann null sein!
  123. 123. Element- Referenzierung Tips (PointChart.cs)
  124. 124. POINTCHART OnApplyTemplate() - Tipps 70 Nur verwenden wenn Template Binding, RoutedCommands oder RoutedEvents nicht zu dem gewünschten Ergebnis führen NullReferenceException vermeiden und defensiv programmieren OnApplyTemplate() Methode kann mehrfach aufgerufen werden, mit internen Properties arbeiten (Mehr Kontrolle) OnApplyTemplate() Methode kann manuell aufgerufen werden. Dadurch wird Control Template geladen
  125. 125. DEPENDENCY PROPERTIES EXTENDED 71
  126. 126. 72 Properties anlegen 1/2 (PointChart.cs) > Was ist das?
  127. 127. 73 Properties anlegen 2/2 (PointChartItem.cs)
  128. 128. Reagieren auf Änderungen über Changed Callback möglich Angabe einer statischen Funktion. Über das Metadatenobjekt innerhalb der Funktion erhält man Zugriff auf die Instanz des Controls sowie Informationen über Änderungen (ChangedEventArgs) Statische Methoden möglichst kurz halten und auf der Instanz eine Methode aufrufen POINTCHART Dependency Properties - Extended 1/2 74
  129. 129. 75 Properties Changed Callback (PointChart.cs) > Angabe Callback > Callback mit ChangedEventArgs
  130. 130. Doch was wenn bereits existierende Properties Elemente beeinflussen? Hier: Width, Height Items Lösung: Überschreiben bereits vorhandener Methoden oder Properties Dependency Properties - Extended 2/2 76 POINTCHART
  131. 131. 77 Override Methods (PointChart.cs)
  132. 132. 78 Override Properties (PointChart.cs)
  133. 133. LOGIK 79
  134. 134. 80 Alle Punkte updaten (PointChart.cs)
  135. 135. 81 Ein Punkt updaten MathHelper Hilfsklasse (PointChart.cs)
  136. 136. ROUTED EVENTS 82
  137. 137. RoutedEvents können je nach Strategy im visuellen Baum hoch oder hinunter navigieren. Somit können Sie mehrere Handler auf verschiedenen Elementen auslösen Strategien: Tunneling = Down Bubbling = Up Direct = Direct (Vergleiche standard .NET Events) RoutedEvents 83 POINTCHART
  138. 138. 84 Routed Events 1/3 (PointChartItem.cs) > Anlegen des Events in der auslösenden Klasse
  139. 139. 85 Routed Events 2/3 (PointChartItem.cs) > Aufrufen des angelegten Events
  140. 140. 86 Routed Events 3/3 (PointChart.cs) > Event abonnieren und Aktion definieren
  141. 141. VIEWMODEL KOMMUNIKATION 87
  142. 142. SampleViewModel.cs, PointViewModel.cs implementieren INotifyPropertyChanged Binding der Items an XUnitValue, YUnitValue Binding der ItemsSource an ObservableCollection Points POINTCHART ViewModel Kommunikation - Extended 88
  143. 143. ViewModel Kommunikation 1/3 (MainView.xaml) > Binding PointChart > Points > SelectedItem > Binding PointChartItem > XUnitValue > YUnitValue > IsSelected > ...
  144. 144. ViewModel Kommunikation 2/3 (SampleViewModel.cs) > Aufrufen von OnPropertyChanged (Update des Bindings) > Aufruf der Update Logik
  145. 145. POINTCHART 91 ListBox (PointChart) ListBoxItem (PointChartItem) Polyline (PART_Line) Canvas (PART_DrawingArea) PointChartViewModel Points P1 P2 ...
  146. 146. POINTCHART 91 ListBox (PointChart) ListBoxItem (PointChartItem) Polyline (PART_Line) Canvas (PART_DrawingArea) PointChartViewModel Points P1 P2 ... DONE
  147. 147. BLENDABILITY 92
  148. 148. Xaml friendly und Blend kompatibel Default Property Values, Styles und Templates Zusätzliche Ressourcen als Properties Keine tiefe Verschachtelung der Templates Mode Properties für Trigger Design Time Features verwenden ... BLENDABILITY Blendability 93
  149. 149. TemplatePart Attribute (PointChart.cs)
  150. 150. ContentProperty Attribute (SearchTextBox.cs)
  151. 151. AlternateContent- Property Attribute (SearchTextBox.cs)
  152. 152. Description Attribute 1/2 (SearchTextBox.cs)
  153. 153. Description Attribute 2/2 (SearchTextBox.cs)
  154. 154. StyledTypedProperty Attribute (PointChart.cs)
  155. 155. Namespace Merge (AssemblyInfo.cs)
  156. 156. DesignTime (AssemblyInfo.cs)
  157. 157. TOOLS 102
  158. 158. Xaml Styler 1 2 3
  159. 159. Element & Speicher Analyse Xaml Spy (Alternative WPF Inspector oder Snoop)
  160. 160. Element & Speicher Analyse Xaml Spy (Alternative WPF Inspector oder Snoop)
  161. 161. Live Property Editing Xaml Spy (Alternative WPF Inspector oder Snoop)
  162. 162. Live Property Editing Xaml Spy (Alternative WPF Inspector oder Snoop)
  163. 163. FAZIT 106
  164. 164. FAZIT Fazit WPF bietet die optimale Basis für Custom Control Development Custom Controls sinnvoll einsetzen Sorgen für mehr Konsistenz (Bausteine) Erhöhen die Produktivität (Implementierung, Blendability) Leben Sie einen benutzerzentrierten Designprozess! 107
  165. 165. SOURCE-CODE! 108
  166. 166. SOURCE-CODE! GitHub und Blogs / Kontakte GitHub Repository mit Slides und Beispielen https://github.com/dctdct/WPF-UI-Development-Best- Practices Ergosign Blog http://www.ergosign.de/de/unternehmen/blog DCT Blog / Twitter / Xing http://davidchristian.de/ https://twitter.com/davidcthoemmes https://www.xing.com/profile/DavidC_Thoemmes 109
  167. 167. VIELEN DANK! 110
  168. 168. Ein benutzerzentrierter Prozess ist Voraussetzung für das Design einer positiven 
 User Experience.

×