1. WPF UI DEVELOPMENT BEST PRACTICES (EXTENDED EDITION)
David C. Thömmes
Software Engineer
Lead Software Engineering Standards
thoemmes@ergosign.de
Ergosign GmbH
11. ANALYSE
Scoping & Ideation
User Research
Personas & Szenarien
Kontextuelle Analyse
Expert Reviews
Benchmarking
Usability-Vergleich mit Wettbewerbsprodukten
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
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.
23. Design Manual
Ein Design Manual fasst die wichtigsten Design-
Entscheidungen zusammen und verzichtet auf
die Spezifikationen aller einzelnen
Kontrollelemente.
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! ;-)
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
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
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
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
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?)
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…
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 ;-)
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.
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...
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()
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 :-)
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
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
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
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
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
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“
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