Follow our Experts: https://twitter.com/davidcthoemmes - https://twitter.com/ergosign

1. WPF UI DEVELOPMENT BEST PRACTICES (EXTENDED EDITION)
David C. Thömmes
Software Engineer
Lead Software Engineering Standards
thoemmes@ergosign.de
Ergosign GmbH

2. WPF = BESSERE & SCHÖNERE UI‘S
2

5. WPF = BESSERE & SCHÖNERE UI‘S
4

6. WPF = BESSERE & SCHÖNERE UI‘S
4
FAILED

7. PROZESSE
5

8. PROZESSE USER CENTERED DESIGN
6

9. DEVELOP
SPECIFY
VALIDATE
DESIGN
ANALYSE
PROZESSE USER CENTERED DESIGN
6

11. ANALYSE
Scoping & Ideation
User Research
Personas & Szenarien
Kontextuelle Analyse
Expert Reviews
Benchmarking
Usability-Vergleich mit Wettbewerbsprodukten

12. Kontextuelle Analyse
Beobachtungen und semistrukturierte
Interviews bei Endanwendern vor Ort.

14. DESIGN
Konzeptionelles Design
Grundlayout und Navigationskonzept anhand von
Wireframes
Visuelles Design
Überführung der Wireframes in ein Visuelles Design
Icon Design
Prototyping
Von Click Dummies bis hin zu High-Fidelity-
Prototypen

15. Konzeptionelles Design
Ein ganzheitlich optimiertes
Bedienkonzept bildet die Eckpfeiler des
User Interface.

16. Visuelles Design
Nach einem Stilfindungsprozess wird
anhand der erarbeiteten Vorgaben ein
ansprechendes Visuelles Design
entwickelt.

17. Prototyping
Prototypen sind in verschiedenen
Phasen der Gestaltung von Bedeutung,
beispielsweise im Rahmen von User-
und Task-Analyse, Design, Usability
Testing oder zur unterstützenden
Dokumentation bei der Spezifikation.

19. VALIDATE
Usability Testing
Usability Labor
Informelles Testing
Expert Reviews
Modellbasierte Analysen

20. Usability Testing
Ein Usability Test mit repräsentativen
Endanwendern liefert entscheidende
Hinweise zur Optimierung eines User
Interface.

22. SPECIFY
Design Manual
Style Guide
UI Toolbox
Interaktiver Styleguide

23. Design Manual
Ein Design Manual fasst die wichtigsten Design-
Entscheidungen zusammen und verzichtet auf
die Spezifikationen aller einzelnen
Kontrollelemente.

24. PROZESSE USER CENTERED DESIGN
Spezifikation
17

25. PROZESSE USER CENTERED DESIGN
Spezifikation
17
wtf? :-D

26. PROZESSE DEKLARATIVE PROGRAMMIERUNG
Reminder - Deklarative Programmierung mit XAML,
Styling, Templates...
18
Designer XAML
Developer
Button

27. PROZESSE MODEL VIEW VIEWMODEL
Reminder - Model View ViewModel - Klare Trennung
Visualisierung & Logik
19
Präsentation XAML
+
Code Behind
Interaktionslogik
Daten & Geschäftslogik
View
View
Model
Model
Data Binding

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

29. PROZESSE ABER WAS SIND DIE PROBLEME?
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...
21

30. PROZESSE UI DEVELOPMENT IN DER ANWENDUNGSARCHITEKTUR
22
Präsentation
Daten
Interaktion
Datenmanagement
Geschäftslogik

31. PROZESSE UI DEVELOPMENT IN DER ANWENDUNGSARCHITEKTUR
22
Präsentation
Daten
Interaktion
Datenmanagement
UI Development
Präsentation
Interaktion
Geschäftslogik

32. PROZESSE FAZIT
Zusammenfassung
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!
23

33. PROZESSE FAZIT
Zusammenfassung
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!
23
User Centered Design
+ Software Engineering
+ UI Development
= Application! ;-)

34. WPF UI DEVELOPMENT BEST PRACTICES
24

35. WPF UI DEVELOPMENT BEST PRACTICES
24
JETZT ABER ;-)

36. RESOURCE MANAGEMENT
25

37. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
Strategie
26
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

38. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
27
Styling Projekt

39. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
28
Feingranulare Struktur
Styling Projekt

40. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
29
Auslagern von Colors und
Brushes
Colors & Brushes

41. Farbpalette des
UI Designs als
Color Objekte
anlegen
(Redundanzfrei)

42. Aus Colors
Brushes erstellen

43. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
32
Konstanten, Pfade,
Schriftgrößen,
Fonts ...
Settings & Typo

44. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
33
Definition der Schrift-Layer (Größen)
Settings & Typo

45. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
34
Pro Control-Typ eigenes
Resource Dictionary
Styles

46. Fokus auf Style
Setter und
Control Template
Kompakter XAML
Source-Code

47. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
36
Beinhaltet alle Rastergrafiken
(PNG, JPEG, ...)
Bitmap Graphics

48. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
37
Verwaltung als ImageSource
Bitmap Graphics

49. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
38
DrawingBrush
Vector Graphics

50. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
39
Data Templates ebenfalls auslagern
Data Templates

51. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
40
Ein Resource Dictionary das alle
Ressourcen beinhaltet
Kann später in App.xaml
eingebunden werden
Look and Feel Resource Dictionary

52. Reihenfolge
beachten!

53. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
42
Einfaches einbinden...
Look and Feel Resource Dictionary

54. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
43
Look and Feel Resource Dictionary

55. Default Styles
anbieten!
(Kein x:Key)

56. SHARED RESOURCE DICTIONARY
45

57. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
46
Shared Resource Dictionary
Vorsicht
Bei MergedDictionaries (Speicherfresser)
Bewirkt mehrfache Allokation der Ressourcen!
Kritisch bei modularen Projekten mit Ressourcen
„Verlinkung“
Lösung
Shared Resource Dictionary

58. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
47
Shared Resource Dictionary

59. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
47
Shared Resource Dictionary
Führt zu Mehrfachanlegung

60. Shared Resource
Dictionary

61. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
49
Verwendung wie gewohnt, aber...
Shared Resource Dictionary

63. Preprocessor
Symbol zum
steuern
verwenden :-)

65. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
53
In eigener Assembly auslagern und Namespace Mapping
in AssemblyInfo.cs definieren ;-)
Shared Resource Dictionary

66. MODULARE PROJEKTE
54

67. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
Modulare Projekte
55

68. WPF UI DEVELOPMENT RESOURCE MANAGEMENT
Modulare Projekte
55
Strategie
„Common Styling“ Projekt
für allgemeine Ressourcen
Pro Module spezifisches
„Styling Projekt“
„Lazy load“ spezifischer
Ressourcen lokal in View

69. USERCONTROL
56

70. Leicht zu erstellen und benutzen
Struktur = Content
Element-Referenzierung mit x:Name
Styling und Templating möglich
Code-Behind (Blend, Visual Studio)
WPF UI DEVELOPMENT USER CONTROL
57
UserControl

71. WPF UI DEVELOPMENT USER CONTROL
58
View = UserControl
Model View ViewModel im Überblick

72. UserControls dienen der Zusammenfassung und
Gruppierung mehrerer Controls und Layout Panels.
WPF UI DEVELOPMENT USER CONTROL
59
UserControl

73. WPF UI DEVELOPMENT USER CONTROL
60
UserControl vs. Custom Control - Gegenüberstellung

74. USER CONTROL CUSTOM CONTROL
TECHNIK
LOGIK & VISUAL
STYLING
AUFWAND*
REUSE
XAML + Code Behind Klasse + Style + Template
Harte Verdrahtung Getrennt
Hart Flexibel
Wenig Etwas aufwändiger
Schlecht Gut
WPF UI DEVELOPMENT USER CONTROL
60
UserControl vs. Custom Control - Gegenüberstellung

75. USER CONTROL CUSTOM CONTROL
TECHNIK
LOGIK & VISUAL
STYLING
AUFWAND*
REUSE
XAML + Code Behind Klasse + Style + Template
Harte Verdrahtung Getrennt
Hart Flexibel
Wenig Etwas aufwändiger
Schlecht Gut
WPF UI DEVELOPMENT USER CONTROL
60
UserControl vs. Custom Control - Gegenüberstellung

76. USER CONTROL CUSTOM CONTROL
TECHNIK
LOGIK & VISUAL
STYLING
AUFWAND*
REUSE
XAML + Code Behind Klasse + Style + Template
Harte Verdrahtung Getrennt
Hart Flexibel
Wenig Etwas aufwändiger
Schlecht Gut
WPF UI DEVELOPMENT USER CONTROL
60
UserControl vs. Custom Control - Gegenüberstellung

77. USER CONTROL CUSTOM CONTROL
TECHNIK
LOGIK & VISUAL
STYLING
AUFWAND*
REUSE
XAML + Code Behind Klasse + Style + Template
Harte Verdrahtung Getrennt
Hart Flexibel
Wenig Etwas aufwändiger
Schlecht Gut
WPF UI DEVELOPMENT USER CONTROL
60
UserControl vs. Custom Control - Gegenüberstellung

78. USER CONTROL CUSTOM CONTROL
TECHNIK
LOGIK & VISUAL
STYLING
AUFWAND*
REUSE
XAML + Code Behind Klasse + Style + Template
Harte Verdrahtung Getrennt
Hart Flexibel
Wenig Etwas aufwändiger
Schlecht Gut
WPF UI DEVELOPMENT USER CONTROL
60
UserControl vs. Custom Control - Gegenüberstellung

79. USER CONTROL CUSTOM CONTROL
TECHNIK
LOGIK & VISUAL
STYLING
AUFWAND*
REUSE
XAML + Code Behind Klasse + Style + Template
Harte Verdrahtung Getrennt
Hart Flexibel
Wenig Etwas aufwändiger
Schlecht Gut
WPF UI DEVELOPMENT USER CONTROL
60
UserControl vs. Custom Control - Gegenüberstellung

80. DAVIDS TOP 3 „USERCONTROL MISUSED“
61

81. WPF UI DEVELOPMENT USER CONTROL
62
UserControl - Davids Top 3 „UserControl
#1
Interaktions-, Geschäfts- und Anwendungslogik mit Model-
Layer-Zugriffen im Code-Behind des UserControls

82. WPF UI DEVELOPMENT USER CONTROL
63
UserControl - Davids Top 3 „UserControl
#2
Atomare Controls (Button, CheckBox, ...) in UserControls
einzeln kapseln nur um Code-Behind verwenden zu können

83. WPF UI DEVELOPMENT USER CONTROL
64
UserControl - Davids Top 3 „UserControl
#3
UserControl mit vollem Code-Behind per Copy & Paste
vervielfältigen, weil die Visualisierung unterschiedlich ist
(Content = Struktur, Styling?)

84. STYLE VERERBUNG
65

85. WPF UI DEVELOPMENT STYLE VERERBUNG
66
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…

86. WPF UI DEVELOPMENT STYLE VERERBUNG
67
Beispiel an zwei Buttons

87. WPF UI DEVELOPMENT STYLE VERERBUNG
68
Beispiel an zwei Buttons

88. Je mehr
TemplateBinding
desto „sauberer“
und flexibler der
Style!

89. WPF UI DEVELOPMENT STYLE VERERBUNG
70
Beispiel an zwei Buttons

90. WPF UI DEVELOPMENT STYLE VERERBUNG
70
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 ;-)

91. Wann immer
mögliche Trigger
auf Style Ebene

92. BASIS STYLE
72

93. WPF UI DEVELOPMENT STYLE VERERBUNG
73
Basis Style

94. WPF UI DEVELOPMENT STYLE VERERBUNG
73
Basis Style
Bei Styling ist ein Basis Style für alle UI Elemente empfehlenswert
Wichtige Setter für SnapsToDevicePixels, OverridesDefaults etc.

95. BEISPIEL SEGMENTED RADIOBUTTONS
74

96. WPF UI DEVELOPMENT STYLE VERERBUNG
75
Beispiel Segmented RadioButtons

97. Drei Teile notwendig
Unterschied BorderThickness, CornerRadius
WPF UI DEVELOPMENT STYLE VERERBUNG
75
Beispiel Segmented RadioButtons

98. Styling des Left
Segmented
RadioButton

99. WPF UI DEVELOPMENT STYLE VERERBUNG
77
Beispiel Segmented RadioButtons - Middle

100. WPF UI DEVELOPMENT STYLE VERERBUNG
77
Beispiel Segmented RadioButtons - Middle
Trotz Vererbung müssen wir die Control Template anpassen & kopieren
CornerRadius bei Border und Lichtkante :-(

101. WPF UI DEVELOPMENT STYLE VERERBUNG
78
Beispiel Segmented RadioButtons - Right

102. WPF UI DEVELOPMENT STYLE VERERBUNG
79
Beispiel Segmented RadioButtons...

103. KEINE ANGST VOR CUSTOM CONTROLS!
80

104. WPF UI DEVELOPMENT CUSTOM CONTROLS
81
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()

105. WPF UI DEVELOPMENT CUSTOM CONTROLS
82
Anatomie
Custom
Controls
Loaded /
Unloaded
Routed
Commands
Routed
Events
Dependency
Properties
OnApply
Template
Custom
Control
Library +
Generic.xaml
Style,
Template +
Template-
Binding
Blendability
Attribute
Oh oh Custom Controls - Handwerkzeugs...

106. Nur Properties
hinzufügen :-)

108. TemplateBinding
an die neuen
Properties
möglich

109. WPF UI DEVELOPMENT CUSTOM CONTROLS
86
Das Beispiel mit den Extended Radio Buttons

110. WPF UI DEVELOPMENT CUSTOM CONTROLS
86
Das Beispiel mit den Extended Radio Buttons
Kein kopieren der Control Template notwendig :-)
Super kompakter XAML Source-Code ohne Redundanzen
Nächste Stufe Enum „SegmentPostion“ + Trigger ... ;-)

111. WPF UI DEVELOPMENT CUSTOM CONTROLS
87
Das Beispiel mit den Extended Radio Buttons

112. WPF UI DEVELOPMENT CUSTOM CONTROLS
88
Effizienzgewinn
Source-Code Schnipsel für Properties :-)

113. LEICHTGEWICHTIG
89

114. WPF UI DEVELOPMENT CUSTOM CONTROLS
90
Counter, wird an diversen Stellen im UI verwendet...
Leichtgewichtig... :-)

115. CUSTOM LAYOUT CONTAINER
91

116. WPF UI DEVELOPMENT CUSTOM CONTROLS
92
Custom Layout Container
Strategie
Layout und Design Patterns als Custom Controls abbilden
Abstraktion und Identifikation der Patterns
Ideen
Formular
Dialog oder Window
Master/Detail
...

117. WPF UI DEVELOPMENT CUSTOM CONTROLS
93
Custom Layout Container

118. Problem
Komplexes Layout erhöht die Gefahr von
Inkonsistenzen während der UI Entwicklung

124. WPF UI DEVELOPMENT CUSTOM CONTROLS
100
Eigene
Item Wrapper
verwenden :-)
Custom Layout Container - Überschreiben Methoden
ItemsControl

125. WPF UI DEVELOPMENT CUSTOM CONTROLS
101
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

126. EFFEKTE
102

127. WPF UI DEVELOPMENT EFFEKTE
103
Die Wahrheit über 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

128. WPF UI DEVELOPMENT EFFEKTE
104
Was tun?
Strategie
Effekte mit Custom Controls simulieren
Rectangle, Border & Co. in Kombination mit Gradient Brush
nutzen

129. EFFEKTE BEISPIEL CUSTOM CONTROL
105

130. WPF UI DEVELOPMENT EFFEKTE
106
Beispiel Drop Shadow per Custom Control

131. WPF UI DEVELOPMENT EFFEKTE
Beispiel Drop Shadow per Custom Control
107

132. WPF UI DEVELOPMENT EFFEKTE
Beispiel Drop Shadow per Custom Control
107
Leichtgewichtiges Custom
Control
Nur Properties ohne Logik
notwendig
Wichtige Properties
XOffset & YOffset
ShadowBrush
Text* (Optionen)
Idee zwei TextBlöcke in
Control Template

134. Nur
Properties :-)

135. Grid mit zwei
TextBlöcken

136. WPF UI DEVELOPMENT EFFEKTE
111
Beispiel Drop Shadow per Custom Control
TranslateTransform auf „ShadowText“
Werte über Properties X & YOffset Property
Per TemplateBinding Controls anbinden z.B. Text

137. WPF UI DEVELOPMENT EFFEKTE
112
Beispiel Drop Shadow per Custom Control

138. WPF UI DEVELOPMENT EFFEKTE
113
Beispiel Drop Shadow per Custom Control

139. WPF UI DEVELOPMENT EFFEKTE
114
Beispiel Drop Shadow per Custom Control

140. EFFEKTE BEISPIEL RECTANGLE
115

141. WPF UI DEVELOPMENT EFFEKTE
116
Tabs mit Schatten
Beispiel Drop Shadow per Rectangle

142. WPF UI DEVELOPMENT EFFEKTE
117
Rectangle mit LinearGradientBrush
Beispiel Drop Shadow per Rectangle

143. WPF UI DEVELOPMENT EFFEKTE
118
Beispiel Drop Shadow per Rectangle

144. WPF UI DEVELOPMENT EFFEKTE
119
Mit Alpha Wert der Farbe arbeiten
Beispiel Drop Shadow per Rectangle

145. XAML KONVENTIONEN
120

146. WPF UI DEVELOPMENT XAML KONVENTIONEN
121
Warum?
Lesbarkeit des Source-Codes erhöhen
Zusammenarbeit erleichtern
Pflege und Wartung ermöglichen
Effizienzgewinn

147. WPF UI DEVELOPMENT XAML KONVENTIONEN
122
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..-

148. ERWEITERTE ATTRIBUT FORMATIERUNG
123

149. WPF UI DEVELOPMENT XAML KONVENTIONEN
124
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

150. Überblick
Leichtes Scannen für Auge

151. Blend...
Formatierung?
Reihenfolge?

152. WPF UI DEVELOPMENT XAML KONVENTIONEN
127
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

153. WPF UI DEVELOPMENT XAML KONVENTIONEN
128
Erweiterte Attribut Formatierung
Ausnahmen
Setter
Trigger
Colors
Brushes...
Nicht für Konstrukte mit wiederholenden Zeichenketten
geeignet
Nicht für Konstrukte mit wiederholenden Zeichenketten
geeignet

154. Failed O_o
Auge bleibt bei jeder Zeile an dem
entsprechenden Value Attribut "hängen"

155. XAML NAMENSKONVENTIONEN
130

156. WPF UI DEVELOPMENT XAML KONVENTIONEN
131
XAML Namenskonventionen
Allgemein
„PascalCase“
Buchstaben und Zahlen
Beispiel: <Individueller Name><Datentyp>
Beispiele
WhiteColor, ButtonBackgroundBrush, MainGrid, LoadButton,
PrimaryButtonStyle, CheckBoxStyle, ...

157. PERFORMANCE TOP 10
132

158. WPF UI DEVELOPMENT PERFORMANCE TOP 10
133
5/10
Virtualizing
VirtualizingStackPanel bei ItemsControls verwenden + 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

159. WPF UI DEVELOPMENT PERFORMANCE TOP 10
134
10/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“

160. WIE WERDE ICH EIN GUTER
WPF UI DEVELOPER? ;-)
135

161. WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)
136
Stufenmodell

162. WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)
136
Design Basics Designer & UI Developer WorkflowUsability Engineering BasicsFundament
Stufenmodell

163. WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)
136
Design Basics Designer & UI Developer WorkflowUsability Engineering BasicsFundament
Stufe 1 Styles AnimationenControl Templates
XAML Resource ManagementBlend Controls & Layout
Template Binding Trigger & VSM
Data Binding Basics
Stufenmodell

164. WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)
136
Design Basics Designer & UI Developer WorkflowUsability Engineering BasicsFundament
Stufe 1 Styles AnimationenControl Templates
XAML Resource ManagementBlend Controls & Layout
Template Binding Trigger & VSM
Data Binding Basics
Stufe 2 Behaviors
AdornerData Binding Advanced
MVVM
Data Templates Attached Properties
Visual Studio.NETApplication Frameworks
Stufenmodell

165. WPF UI DEVELOPMENT WIE WERDE ICH EIN GUTER WPF UI DEVELOPER? ;-)
136
Design Basics Designer & UI Developer WorkflowUsability Engineering BasicsFundament
Stufe 1 Styles AnimationenControl Templates
XAML Resource ManagementBlend Controls & Layout
Template Binding Trigger & VSM
Data Binding Basics
Stufe 2 Behaviors
AdornerData Binding Advanced
MVVM
Data Templates Attached Properties
Visual Studio.NETApplication Frameworks
Stufe 3 Custom Control Development Custom Layout Panels Miscellaneous
Stufenmodell

166. FAZIT
137

167. FAZIT
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
138

168. FRAGEN? :-)
139

169. VIELEN DANK!
140

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