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.

1. WPF CUSTOM CONTROL DEVELOPMENT UNCHAINED
David C. Thömmes
Senior Software Engineer
Lead Software Engineering Standards
thoemmes@ergosign.de
Ergosign GmbH

2. Auf der Suche nach
Custom Controls

3. CUSTOM CONTROL ANALYSE
3
Abstraktes Vorgehen

4. CUSTOM CONTROL ANALYSE
3
Abstraktes Vorgehen
Design
Anforderungen

5. CUSTOM CONTROL ANALYSE
3
Abstraktes Vorgehen
Design
Anforderungen
UI
Development
Analyse
Abstraktion

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. 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. CUSTOM CONTROLS?
4

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. 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. KAPITELTITEL
7
Neues Projekt
erstellen

12. 8
Template WPF Custom
Control Library
wählen

13. 9
Los gehts!

14. 10
CustomControl1.cs

15. 11
Generic.xaml

16. 12
SearchTextBox.cs

17. 13
Generic.xaml

18. WANN IST EIN CUSTOM CONTROL SINNVOLL?
14

19. WANN IST EIN CUSTOM CONTROL SINNVOLL?
15

20. WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?

21. WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WPF Standard Controls
gruppieren?

22. WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?

23. WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?
ValueConverter/Markup
Extensions?

24. WANN IST EIN CUSTOM CONTROL SINNVOLL?
15
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?
ValueConverter/Markup
Extensions?
Attached Properties/Behaviors?

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

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

31. SearchTextBox

32. ANALYSE
21

33. SEARCHTEXTBOX
22
View Model

34. SEARCHTEXTBOX
22
View Model

35. SEARCHTEXTBOX
22
TextBox
View Model

36. SEARCHTEXTBOX
22
TextBox
View Model

37. SEARCHTEXTBOX
22
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
TextBox
View Model

38. SEARCHTEXTBOX
22
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
TextBox
View Model

39. SEARCHTEXTBOX
22
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Zurücksetzen des Texts)
TextBox
View Model

40. SEARCHTEXTBOX
22
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Zurücksetzen des Texts)
TextBox
View Model

41. SEARCHTEXTBOX
22
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Zurücksetzen des Texts)
TextBox
PropertyBinding
View Model

42. CUSTOM CONTROL LIBRARY
23

43. KAPITELTITEL
24
Es kann losgehen!

44. 25
Basisklasse
bestimmen
(SearchTextBox.cs)

45. STYLE & TEMPLATE
26

46. SEARCHTEXTBOX
27
http://msdn.microsoft.com/en-us/library/aa970773(v=vs.110).aspx

47. Style & Template
(Generic.xaml)

48. DEPENDENCY PROPERTIES BASICS
29

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. > Registrieren über Statische Funktion
> Name
> Typ
> Control Typ bzw. Klasse
> Metadaten
Properties anlegen 1/2
(SearchTextBox.cs)
31

51. 32
> Verwendung der Methoden GetValue(), SetValue()
Properties anlegen 2/2
(SearchTextBox.cs)

52. ROUTED COMMANDS
33

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

55. SEARCHTEXTBOX
35
Child Control löst Command aus

56. SEARCHTEXTBOX
35
Parent 1
Child Control löst Command aus

57. SEARCHTEXTBOX
35
Parent 2
Parent 1
Child Control löst Command aus

58. SEARCHTEXTBOX
35
....
Parent 2
Parent 1
Child Control löst Command aus

59. SEARCHTEXTBOX
35
Parent Control mit “Abonnement” führt Aktion aus
....
Parent 2
Parent 1
Child Control löst Command aus

60. SEARCHTEXTBOX
35
Parent Control mit “Abonnement” führt Aktion aus
....
Parent 2
Parent 1
Child Control löst Command aus

61. SEARCHTEXTBOX
36

62. SEARCHTEXTBOX
36

63. SEARCHTEXTBOX
36
1.Button-Click löst das Command aus

64. SEARCHTEXTBOX
36
1.Button-Click löst das Command aus
2. SearchTextBox mit
“Abonnement” führt Aktion aus

65. SEARCHTEXTBOX
36
1.Button-Click löst das Command aus
2. SearchTextBox mit
“Abonnement” führt Aktion aus
3. Command stoppt

66. 37
> Routed Command anlegen
> Name
> Control Typ bzw. Klasse
Routed Command 1/3
(SearchTextBox.cs)
> Execute Aktion
> CanExecute Abfrage

67. Routed Command 2/3
(SearchTextBox.cs)
38
> Command Binding erzeugen
> Command
> Execute
> CanExecute

68. Routed Command 3/3
(Generic.xaml)
39
> Auslösen über Command
Property / x:Static Verweis

69. VIEWMODEL KOMMUNIKATION
40

70. Binding (Implementierung INotifyPropertyChanged)
SEARCHTEXTBOX
ViewModel Kommunikation - Basics
41

71. 42
ViewModel
Kommunikation 1/3
(MainView.xaml)
> Binding an ViewModel
Property

72. 43
ViewModel
Kommunikation 2/3
(SampleViewModel.cs)
> Implementieren von
INotifyPropertyChanged

73. 44
ViewModel
Kommunikation 3/3
(SampleViewModel.cs)
> Aufrufen von
OnPropertyChanged (Update
des Bindings)
> Aufruf der
Update Logik

74. SEARCHTEXTBOX
45
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Rucksetzen des Texts)
TextBox
PropertyBinding
View Model

75. SEARCHTEXTBOX
45
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Rucksetzen des Texts)
TextBox
PropertyBinding
View Model
DONE

76. POINTCHART
46

77. PointChart

78. ANALYSE
48

79. POINTCHART
49

80. POINTCHART
49
PointChartViewModel

81. POINTCHART
49
PointChartViewModel
Points

82. POINTCHART
49
PointChartViewModel
Points
P1
P2
...

83. POINTCHART
49
PointChartViewModel
Points
P1
P2
...

84. POINTCHART
49
PointChartViewModel
Points
P1
P2
...

85. POINTCHART
49
PointChartViewModel
Points
P1
P2
...

86. POINTCHART
49
PointChartViewModel
Points
P1
P2
...

87. POINTCHART
49
ListBox (PointChart)
PointChartViewModel
Points
P1
P2
...

88. POINTCHART
49
ListBox (PointChart)
ListBoxItem
(PointChartItem)
PointChartViewModel
Points
P1
P2
...

89. POINTCHART
49
ListBox (PointChart)
ListBoxItem
(PointChartItem)
Polyline (PART_Line)
PointChartViewModel
Points
P1
P2
...

90. POINTCHART
49
ListBox (PointChart)
ListBoxItem
(PointChartItem)
Polyline (PART_Line)
Canvas (PART_DrawingArea)
PointChartViewModel
Points
P1
P2
...

91. 50
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)

92. 50
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
X/YMinimum

93. 50
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
X/YMinimum
X/YMaximum

94. 50
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
X/YMinimum
X/YMaximum
LineThickness

95. 50
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
X/YMinimum
X/YMaximum
LineThickness
LineBrush

96. 50
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
X/YMinimum
X/YMaximum
LineThickness
LineBrush
...

97. 50
Property-
Binding
(ItemsSource)
PointChartViewModel
Points
P1
P2
...
POINTCHART
ListBox (PointChart)
X/YMinimum
X/YMaximum
LineThickness
LineBrush
...

98. 51
ListBoxItem:
(PointChartItem)
PointChartViewModel
Points
P1
P2
...
POINTCHART

99. 51
ListBoxItem:
(PointChartItem)
XUnitValue
PointChartViewModel
Points
P1
P2
...
POINTCHART

100. 51
ListBoxItem:
(PointChartItem)
XUnitValue
YUnitValue
PointChartViewModel
Points
P1
P2
...
POINTCHART

101. 51
ListBoxItem:
(PointChartItem)
XUnitValue
YUnitValue
Property Binding
PointChartViewModel
Points
P1
P2
...
POINTCHART

102. 51
ListBoxItem:
(PointChartItem)
XUnitValue
YUnitValue
Property Binding
PointChartViewModel
Points
P1
P2
...
POINTCHART
UnitPointChanged-RoutedEvent
(PointChart)

103. 52
Polyline (PART_Line)
PointChartViewModel
Points
P1
P2
...
POINTCHART

104. 52
Polyline (PART_Line)
Point-Management innerhalb
des Controls
PointChartViewModel
Points
P1
P2
...
POINTCHART

105. 52
Polyline (PART_Line)
Point-Management innerhalb
des Controls
(override) ItemsChanged
PointChartViewModel
Points
P1
P2
...
POINTCHART

106. 52
Polyline (PART_Line)
Point-Management innerhalb
des Controls
(override) ItemsChanged
UnitPointChanged
PointChartViewModel
Points
P1
P2
...
POINTCHART

107. 53
Polyline

108. POINTCHART
54
That’s it!

109. CUSTOM CONTROL LIBRARY
55

110. 56
Custom Control
Library erstellen

111. 57
Basisklasse
bestimmen
(PointChart.cs)

112. 58
Basisklasse
bestimmen
(PointChartItem.cs)

113. 59
Basisklasse
bestimmen
(PointChart.cs)
(PointChartItem.cs)

114. POINTCHART
Besonderheit ItemsControl
(Override) IsItemItsOwnContainerOverride
Ist das Item sein eigener Container?
(Override) GetContainerForItemOverride
Liefert das Element zum Anzeigen des Items
60

115. 61
Besonderheit
ItemsControl
(PointChart.cs)

116. STYLE & TEMPLATE
62

117. Style & Template:
PointChart
(Generic.xaml)

118. Style & Template:
PointChartItem
(Generic.xaml)

119. ONAPPLYTEMPLATE()
65

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. Element-
Referenzierung 1/2
(Generic.xaml)
> Diese beiden Elemente sollen
referenziert werden

122. Element-
Referenzierung 2/2
(PointChart.cs)
> Referenz kann null sein!

123. Element-
Referenzierung Tips
(PointChart.cs)

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. DEPENDENCY PROPERTIES EXTENDED
71

126. 72
Properties anlegen 1/2
(PointChart.cs)
> Was ist das?

127. 73
Properties anlegen 2/2
(PointChartItem.cs)

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. 75
Properties Changed
Callback
(PointChart.cs)
> Angabe Callback
> Callback mit
ChangedEventArgs

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. 77
Override Methods
(PointChart.cs)

132. 78
Override Properties
(PointChart.cs)

133. LOGIK
79

134. 80
Alle Punkte updaten
(PointChart.cs)

135. 81
Ein Punkt updaten
MathHelper Hilfsklasse
(PointChart.cs)

136. ROUTED EVENTS
82

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. 84
Routed Events 1/3
(PointChartItem.cs)
> Anlegen des Events in der
auslösenden Klasse

139. 85
Routed Events 2/3
(PointChartItem.cs)
> Aufrufen des angelegten Events

140. 86
Routed Events 3/3
(PointChart.cs)
> Event abonnieren und Aktion
definieren

141. VIEWMODEL KOMMUNIKATION
87

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. ViewModel
Kommunikation 1/3
(MainView.xaml)
> Binding PointChart
> Points
> SelectedItem
> Binding PointChartItem
> XUnitValue
> YUnitValue
> IsSelected
> ...

144. ViewModel
Kommunikation 2/3
(SampleViewModel.cs)
> Aufrufen von
OnPropertyChanged (Update
des Bindings)
> Aufruf der
Update Logik

145. POINTCHART
91
ListBox (PointChart)
ListBoxItem
(PointChartItem)
Polyline (PART_Line)
Canvas (PART_DrawingArea)
PointChartViewModel
Points
P1
P2
...

146. POINTCHART
91
ListBox (PointChart)
ListBoxItem
(PointChartItem)
Polyline (PART_Line)
Canvas (PART_DrawingArea)
PointChartViewModel
Points
P1
P2
...
DONE

147. BLENDABILITY
92

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. TemplatePart Attribute
(PointChart.cs)

150. ContentProperty
Attribute
(SearchTextBox.cs)

151. AlternateContent-
Property Attribute
(SearchTextBox.cs)

152. Description Attribute
1/2
(SearchTextBox.cs)

153. Description Attribute
2/2
(SearchTextBox.cs)

154. StyledTypedProperty
Attribute
(PointChart.cs)

155. Namespace Merge
(AssemblyInfo.cs)

156. DesignTime
(AssemblyInfo.cs)

157. TOOLS
102

158. Xaml Styler
1
2
3

159. Element & Speicher Analyse Xaml Spy
(Alternative WPF Inspector oder
Snoop)

160. Element & Speicher Analyse Xaml Spy
(Alternative WPF Inspector oder
Snoop)

161. Live Property Editing Xaml Spy
(Alternative WPF Inspector oder
Snoop)

162. Live Property Editing Xaml Spy
(Alternative WPF Inspector oder
Snoop)

163. FAZIT
106

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. SOURCE-CODE!
108

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. VIELEN DANK!
110

169. Ein benutzerzentrierter
Prozess ist Voraussetzung für
das Design einer positiven
User Experience.