Follow our Experts: https://twitter.com/davidcthoemmes - https://twitter.com/ergosign GUI&Design 2012

1. WPF UI Development Best Practices
David C. Thömmes

2. David C. Thömmes
Software Engineer & UI Developer @ ERGOSIGN
Bachelor of Science, Medieninformatik, FH KL
Aktuelle Schwerpunkte
UI & Application Development
.NET, WPF, Qt, iOS
Lehrbeauftragter FH KL „UI Development“
2

3. WPF = bessere & schönere UI‘s

4. WPF = bessere & schönere UI‘s
4

5. WPF = bessere & schönere UI‘s
4

6. WPF = bessere & schönere UI‘s

7. WPF = bessere & schönere UI‘s
F AILED
!

8. Prozesse

9. Prozesse - User-centered design
7

10. Prozesse - User-centered design
Analysis(
Implementation( Design(
Specification( Prototype(
Evaluation(
7

11. Prozesse - User-centered design
Analysis(
Implementation( Design(
Specification( Prototype(
Evaluation(
7

12. Prozesse - User-centered design
Analysis(
Implementation( Design(
Specification( Prototype(
Evaluation(
7

13. Prozesse - User-centered design
Analysis(
Implementation( Design(
Specification( Prototype(
Evaluation(
7

14. Prozesse - User-centered design
Analysis(
Implementation( Design(
Specification( Prototype(
Evaluation(
7

15. Prozesse - User-centered design
Analysis(
Implementation( Design(
Specification( Prototype(
Evaluation(
7

16. Prozesse - User-centered design
Analysis(
Implementation( Design(
Specification( Prototype(
Evaluation(
7

17. Prozesse - User-centered design - Spezifikation
8

18. Prozesse - User-centered design - Spezifikation
wtf? :-D 8

19. Reminder - Deklarative Programmierung mit XAML, Styling, Templates...
Button
9

20. Reminder - Model View ViewModel - Klare Trennung Visualisierung & Logik
10

21. Prozesse - Aber was sind die Probleme?
Probleme
Komplexität und Umfang der Dokumente (Style Guide, etc.)
Interpretationsfreiräume des Software Engineers
Know-how zur Realisierung fehlt
Allgemein UI Development unterbewertet
11

22. Prozesse - UI Developer als Schlüsselelement
Lösung
Rolle „UI Developer“ mit eigener Wissensbasis forcieren
Fokus UI Development
Zwischen UX Designer und Software Engineer aktiv angesiedelt
Schicht Präsentation und Interaktion
Styling, Templating, Layouting, Views, ViewModels, Custom
Control Development...
12

23. Prozesse - UI Development in der Anwendungsarchitektur
Präsentation
Interaktion
Geschäftslogik
Datenmanagement
Daten
13

24. Prozesse - UI Development in der Anwendungsarchitektur
Präsentation
Interaktion UI Development
Geschäftslogik
Datenmanagement
Daten
13

25. Prozesse
UI Development muss als eigene Disziplin innerhalb des
Software Engineerings verstanden werden!
UX Design ist die Basis für UI Development
14

26. Prozesse
UI Development muss als eigene Disziplin innerhalb des
Software Engineerings verstanden werden!
UX Design ist die Basis für UI Development
Ein benutzer-zentrierter Designprozess ist essentiell!
14

27. Prozesse
Us e r- c e n t
e re d de s ig
+ S o f t wa r n
e Eng i ne e r
+ U I De ve l o i ng
pme n t
= App l ic at
i o n ! ;-)
14

28. WPF UI Development Best Practices
Jetzt aber ;-)

29. Resource Management

30. Resource Management
Strategie
Zentrales „Styling Projekt“ für alle relevanten WPF Ressourcen
Beinhaltet wohldefinierte Struktur aus Resource Dictionaries
Pflege, Wartbarkeit und Zusammenarbeit vereinfachen
Vermeidung unnötiger Inkonsistenzen und Redundanzen
17

31. Resource Management - Styling Projekt
18

32. Resource Management - Styling Projekt
Feingranulare
Struktur
19

33. Resource Management - Styling Projekt - Colors & Brushes
Auslagern von Colors und
Brushes
20

34. Resource Management - Styling Projekt
Farbpalette des UI Designs
als Color Objekte anlegen
(Redundanzfrei)
21

35. Resource Management - Styling Projekt
Aus Colors
Brushes bauen
22

36. Resource Management - Styling Projekt - Settings & Typo
Konstanten,
Pfade,
Schriftgrößen,
Fonts ...
23

37. Resource Management - Styling Projekt - Settings & Typo
Definition der Schrift-Layer (Größen)
24

38. Resource Management - Styling Projekt - Styles
Pro Control-Typ eigenes
Resource Dictionary
25

39. Resource Management - Styling Projekt - Styles
Fokus auf Style Setter und Control Template
Kompakter XAML Source-Code
26

40. Resource Management - Styling Projekt - Bitmap Graphics
Beinhaltet alle
Rastergrafiken
(PNG, JPEG, ...)
27

41. Resource Management - Styling Projekt - Bitmap Graphics
Verwaltung als ImageSource
28

42. Resource Management - Styling Projekt - Vector Graphics
DrawingBrush
29

43. Resource Management - Styling Projekt - Data Templates
Data Templates ebenfalls auslagern
30

44. Resource Management - Styling Projekt - All XAML
Ein Resource Dictionary das alle
Ressourcen beinhaltet
Kann später in App.xaml
eingebunden werden
31

45. Resource Management - Styling Projekt - All XAML
Reihenfolge beachten
32

46. Resource Management - Styling Projekt - All XAML
Einfaches einbinden...
33

47. Resource Management - Styling Projekt - All XAML
34

48. Resource Management - Styling Projekt - All XAML
Default Styles anbieten!
(Kein x:Key)
35

49. Shared Resource Dictionary

50. Resource Management - Shared Resource Dictionary
Vorsicht
bei MergedDictionaries (Speicherfresser)
Bewirkt mehrfache Allokation der Ressourcen!
Kritisch bei modularen Projekten mit Ressourcen „Verlinkung“
Lösung
Shared Resource Dictionary
37

51. Resource Management - Shared Resource Dictionary
38

52. Resource Management - Shared Resource Dictionary
38

53. Resource Management - Shared Resource Dictionary
Führt zu Mehrfachanlegung
38

54. Resource Management - Shared Resource Dictionary
39

55. Resource Management - Shared Resource Dictionary
Verwendung wie gewohnt, aber...
40

56. Resource Management - Shared Resource Dictionary
41

57. Resource Management - Shared Resource Dictionary
Preprocessor Symbol zum steuern verwenden :-)
42

58. Resource Management - Shared Resource Dictionary
43

59. Resource Management - Shared Resource Dictionary
In eigener Assembly auslagern und Namespace Mapping in
AssemblyInfo.cs definieren ;-)
44

60. Modulare Projekte

61. Resource Management - Modulare Projekte
Strategie
„Common Styling“ Projekt für allgemeine Ressourcen
Pro Module spezifisches „Styling Projekt“
„Lazy load“ spezifischer Ressourcen lokal in View
46

62. UserControl

63. UserControl
Leicht zu erstellen und benutzen
Struktur = Content
Element-Referenzierung mit x:Name
Styling und Templating möglich
Code-Behind (Blend, Visual Studio)
48

64. UserControl - Model View ViewModel - Überblick
View = UserControl
49

65. UserControl
UserControls dienen der
Zusammenfassung und Gruppierung
mehrerer Controls und Layout Panels.
50

66. UserControl vs. Custom Control - Gegenüberstellung
UserControl Custom Control
Technik XAML + Code Behind Klasse + Style + Template
Logik & Visual Harte Verdrahtung Getrennt
Styling Hart Flexibel
Aufwand* Wenig Etwas aufwändiger
Reuse Schlecht Gut
51

67. Davids Top 3 „UserControl Misused“

68. UserControl - Davids Top 3 „UserControl Misused“
53

69. UserControl - Davids Top 3 „UserControl Misused“
#1
Interaktions-, Geschäfts- und Anwendungslogik mit Model-
Layer-Zugriffen im Code-Behind des UserControls
53

70. UserControl - Davids Top 3 „UserControl Misused“
54

71. UserControl - Davids Top 3 „UserControl Misused“
#2
Atomare Controls (Button, CheckBox, ...) in UserControls
einzeln kapseln nur um Code-Behind verwenden zu können
54

72. UserControl - Davids Top 3 „UserControl Misused“
55

73. UserControl - Davids Top 3 „UserControl Misused“
#3
UserControl mit vollem Code-Behind per Copy & Paste
vervielfältigen, weil die Visualisierung unterschiedlich ist
(Content = Struktur, Styling?)
55

74. Style Vererbung

75. Style Vererbung
Vererbung über Property BasedOn des Styles möglich
Vererbt werden alle per Setter definierten Properties
Überschreiben eines Setters jeder Zeit möglich
Style Vererbung sollte aktiv genutzt werden!
Tabs, Buttons, DataGrid…
57

76. Style Vererbung - Beispiel an zwei Buttons
58

77. Style Vererbung - Beispiel an zwei Buttons
59

78. Style Vererbung - Beispiel an zwei Buttons
Je mehr TemplateBinding desto
„sauberer“ und flexibler der Style!
60

79. Style Vererbung - Beispiel an zwei Buttons
61

80. Style Vererbung - Beispiel an zwei Buttons
SecondaryButtonStyle erbt von PrimaryButtonStyle
Lediglich überschreiben von Background, Foreground und
IsPressed Trigger (Style Ebene)
Kein Kopieren der Template notwendig, kompakter Source-Code ;-)
61

81. Style Vererbung - Beispiel an zwei Buttons
Wenn immer mögliche Trigger auf Style Ebene
62

82. Basis Style

83. Style Vererbung - Basis Style
Bei Styling ist ein Basis Style für alle UI Elemente empfehlenswert
Wichtige Setter für SnapsToDevicePixels, OverridesDefaults etc.
64

84. Beispiel Segmented RadioButtons

85. Style Vererbung - Beispiel Segmented RadioButtons
66

86. Style Vererbung - Beispiel Segmented RadioButtons
66

87. Style Vererbung - Beispiel Segmented RadioButtons
Drei Teile notwendig
Unterschied BorderThickness, CornerRadius
66

88. Style Vererbung - Beispiel Segmented RadioButtons
Styling von Left SegmentedRadioButton
67

89. Style Vererbung - Beispiel Segmented RadioButtons - Middle
Trotz Vererbung müssen wir die Control Template anpassen & kopieren
CornerRadius bei Border und Lichtkante :-(
68

90. Style Vererbung - Beispiel Segmented RadioButtons - Right
69

91. Style Vererbung - Beispiel Segmented RadioButtons...
70

92. Keine Angst vor Custom Controls!

93. Oh oh Custom Controls
Ableitung von einer konkreten Klasse ≠ UserControl
Styling- und Templating-Möglichkeiten
Visueller Aufbau im ControlTemplate
Default Style möglich (Generic.xaml)
Zusammenfassung in einer Control Library möglich
Element-Referenzierung über OnApplyTemplate()
72

94. Oh oh Custom Controls - Handwerkzeugs...
Loaded /
Unloaded
Blendability Routed
Attribute
Commands
Style, Anatomie
Template + Routed
Template- Custom Events
Binding
Controls
Custom
Control Dependency
Library + Properties
Generic.xaml
OnApply
Template
73

95. Oh oh Custom Controls - Extended RadioButtons
Nur Properties hinzufügen :-)
74

96. Oh oh Custom Controls - Extended RadioButtons
75

97. Oh oh Custom Controls - Extended RadioButtons
TemplateBinding an die neuen
Properties möglich
76

98. Oh oh Custom Controls - Extended RadioButtons
Kein kopieren der Control Template notwendig :-)
Super kompakter XAML Source-Code ohne Redundanzen
Nächste Stufe Enum „SegmentPostion“ + Trigger ... ;-)
77

99. Oh oh Custom Controls - Extended RadioButtons
78

100. Oh oh Custom Controls - Source-Code Schnipsel :-)
Effizienzgewinn
79

101. Leichtgewichtig

102. Oh oh Custom Controls - Leichtgewichtig... :-)
Counter, wird an diversen Stellen im UI verwendet...
81

103. Custom Layout Container

104. Custom Layout Container
Strategie
Layout und Design Patterns als Custom Controls abbilden
Abstraktion und Identifikation der Patterns
Ideen
Formular
Dialog oder Window
Master/Detail
...
83

105. Custom Layout Container
84

106. Custom Layout Container
Problem
Komplexes Layout erhöht die Gefahr von
Inkonsistenzen während der UI Entwicklung
85

107. Custom Layout Container
86

108. Custom Layout Container
87

109. Custom Layout Container
88

110. Custom Layout Container
89

111. Custom Layout Container
90

112. Custom Layout Container - Überschreiben Methoden ItemsControl
Eigene
Item Wrapper
verwenden :-)
91

113. Custom Layout Container
Vorteil
Verhindern, dass Developer UI zerstören ;-)
XAML Code wird kompakter und einfacher
Wiederverwendbarkeit und erhöhte Produktivität
Nachteil
Aufwändigere Implementierung
92

114. Effekte

115. Effekte
Effekte (Basisklasse Effect)
Blur und DropShadow
Performance-hungrig daher sparsam verwenden
Drittanbieter stellen weitere Effekte bereit
Bitmap-Effekte (Basisklasse BitmapEffect)
Bevel, Emboss, Outer Glow, ...
Sollte nicht mehr verwendet werden
Schlechte Performance
94

116. Effekte - Was tun?
Strategie
Effekte mit Custom Controls simulieren
Rectangle, Border & Co. in Kombination mit Gradient Brush
nutzen
95

117. Effekte Beispiel Custom Control

118. Effekte - Beispiel Drop Shadow
97

119. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
Leichtgewichtiges Custom Control
Nur Properties ohne Logik notwendig
Wichtige Properties
XOffset & YOffset
ShadowBrush
Text* (Optionen)
Idee zwei TextBlöcke in Control Template
98

120. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
99

121. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
Nur Properties :-)
100

122. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
Grid mit zwei TextBlöcken
101

123. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
TranslateTransform auf „ShadowText“
Werte über Properties X & YOffset Property
Per TemplateBinding Controls anbinden z.B. Text
102

124. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
103

125. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
104

126. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
105

127. Effekte Beispiel Rectangle

128. Effekte - Beispiel Drop Shadow per Rectangle
Tabs mit Schatten
107

129. Effekte - Beispiel Drop Shadow per Rectangle
Rectangle mit LinearGradientBrush
108

130. Effekte - Beispiel Drop Shadow per Rectangle
109

131. Effekte - Beispiel Drop Shadow per Rectangle
Mit Alpha Wert der Farbe arbeiten
110

132. XAML Konventionen

133. XAML Konventionen - Warum?
Lesbarkeit des Source-Codes erhöhen
Zusammenarbeit erleichtern
Pflege und Wartung ermöglichen
Effizienzgewinn
112

134. XAML Konventionen - XAML!
Allgemein
Jede Stufe der Hierarchie (UI) einrücken
x:Name oder x:Key Attribute als erstes schreiben
Attribute nach Zusammengehörigkeit gruppieren
Width, Height, VerticalAlignment, HorizontalAlignment..-
113

135. Erweiterte Attribut Formatierung

136. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung
Attribute eines Elementes in jeweils einer separaten Zeile
Das erste Attribut steht in der gleichen Zeile wie das Element
Alle nachfolgenden Attribute werden entlang der Vertikalen
untereinander ausgerichtet
115

137. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung
Überblick
Leichtes Scannen für Auge
116

138. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung
Blend...
Formatierung?
Reihenfolge?
117

139. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung
Anwenden bei
Elemente bzw. Controls die als Content einer Template
definiert sind (Control Template, Data Template, ...)
Elemente bzw. Controls die als Content eines Controls mit
Code-Behind definiert sind (UserControl, Window, Page...)
Root-Element eines Dokuments und dessen Attribute
118

140. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung
Ausnahmen
Setter
Trigger
Colors
Brushes...
Nicht für Konstrukte mit wiederholenden Zeichenketten geeignet
Nicht für Konstrukte mit wiederholenden Zeichenketten geeignet
119

141. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung
Failed O_o
Auge bleibt bei jeder Zeile an dem
entsprechenden Value Attribut "hängen"
120

142. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung - VS
Oben im Menü > Tools > Options > Text Editor > XAML
121

143. XAML Namenskonventionen

144. XAML Namenskonventionen
Allgemein
„PascalCase“
Buchstaben und Zahlen
Beispiel: <Individueller Name><Datentyp>
Beispiele
WhiteColor, ButtonBackgroundBrush, MainGrid, LoadButton,
PrimaryButtonStyle, CheckBoxStyle, ...
123

145. Performance Top 10

146. Performance Top 10
Virtualizing
VirtualizingStackPanel bei ItemsControls verwenden + VirtualizingStackPanel.VirtualizationMode="Recycling"
Rendert nur was im ViewPort sichtbar ist, Wrapper z.B. ListBoxItem werden wiederverwendet
Event Handler Leaks
Event Handler immer abmelden, auf jedes += immer -=
Einfrieren
PresentationOptions:Freeze="true" auf Freezable Objekten setzen dadurch kein Overhead durch Change Events
StaticResource über DynamicResource
Wenn keine Änderungen der Ressource zur Laufzeit stattfinden dann immer per StaticResource referenzieren
Ableitung: BindingMode OneTime bei Data Binding
Simples XAML
Einfache Layouts, wenig Elemente, keine tiefen Verschachtelungen in Content oder Templates
125

147. Performance Top 10
Shared Resource Dictionaries verwenden
Schützt vor mehrfachen Allokation der Ressourcen, bei Bedarf „lazy load“ von spezifischen Ressourcen lokal in View
Data Binding optimieren
Ungültige Bindings „System.Windows.Data Error“ aufspüren und entfernen
Bindings immer wieder freigeben BindingOperations.ClearBinding()
Effekte
Sollten vermieden werden, besser faken mit Rectangle, Border & Co. in Kombination mit Brushes
Trigger über VSM
Weniger Overhead da kein Storyboard gestartet werden muss
Main UI Thread nicht blockieren
Arbeiten mit BackgroundWorker, Threads oder async z.B. AsyncDelegateCommand, „responsive UI“
126

148. Wie werde ich ein guter
WPF UI Developer? ;-)

149. Wie werde ich ein guter WPF UI Developer? ;-)
128

150. Wie werde ich ein guter WPF UI Developer? ;-)
Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow
128

151. Wie werde ich ein guter WPF UI Developer? ;-)
Stufe 1 Styles Control Templates Template Binding Animationen Trigger & VSM
XAML Blend Controls & Layout Resource Management Data Binding Basics
Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow
128

152. Wie werde ich ein guter WPF UI Developer? ;-)
Stufe 2 MVVM Application Frameworks .NET Visual Studio Behaviors
Data Binding Advanced Data Templates Attached Properties Adorner
Stufe 1 Styles Control Templates Template Binding Animationen Trigger & VSM
XAML Blend Controls & Layout Resource Management Data Binding Basics
Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow
128

153. Wie werde ich ein guter WPF UI Developer? ;-)
Stufe 3 Custom Control Development Custom Layout Panels Miscellaneous
Stufe 2 MVVM Application Frameworks .NET Visual Studio Behaviors
Data Binding Advanced Data Templates Attached Properties Adorner
Stufe 1 Styles Control Templates Template Binding Animationen Trigger & VSM
XAML Blend Controls & Layout Resource Management Data Binding Basics
Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow
128

154. Fazit

155. Fazit
Denken Sie an einen benutzer-zentrierten Designprozess
Schätzen Sie gutes UI Development
Reizen Sie die Möglichkeiten von WPF aus! (Keine halben Sachen)
Legen Sie Wert auf Struktur und Konsistenz während der Entwicklung
130

156. Fragen?

157. Vielen Dank ;-)