Download - WPF UI-Development Best Practices
David C. Thömmes WPF UI Development Best Practices
David C. Thömmes
2
Software Engineer & UI Developer @ ERGOSIGN
Bachelor of Science, Medieninformatik, FH KL
Aktuelle SchwerpunkteUI & Application Development
.NET, WPF, Qt, iOSLehrbeauftragter FH KL „UI Development“
WPF = bessere & schönere UI‘s
WPF = bessere & schönere UI‘s
4
WPF = bessere & schönere UI‘s
4
WPF = bessere & schönere UI‘s
WPF = bessere & schönere UI‘sFAILED!
Prozesse
Prozesse - User-centered design
7
Prozesse - User-centered design
7
Analysis(
Design(
Prototype(
Evaluation(
Specification(
Implementation(
Prozesse - User-centered design
7
Analysis(
Design(
Prototype(
Evaluation(
Specification(
Implementation(
Prozesse - User-centered design
7
Analysis(
Design(
Prototype(
Evaluation(
Specification(
Implementation(
Prozesse - User-centered design
7
Analysis(
Design(
Prototype(
Evaluation(
Specification(
Implementation(
Prozesse - User-centered design
7
Analysis(
Design(
Prototype(
Evaluation(
Specification(
Implementation(
Prozesse - User-centered design
7
Analysis(
Design(
Prototype(
Evaluation(
Specification(
Implementation(
Prozesse - User-centered design
7
Analysis(
Design(
Prototype(
Evaluation(
Specification(
Implementation(
Prozesse - User-centered design - Spezifikation
8
Prozesse - User-centered design - Spezifikation
8wtf? :-D
Reminder - Deklarative Programmierung mit XAML, Styling, Templates...
9
Button
Reminder - Model View ViewModel - Klare Trennung Visualisierung & Logik
10
Probleme
Komplexität und Umfang der Dokumente (Style Guide, etc.)Interpretationsfreiräume des Software Engineers
Know-how zur Realisierung fehltAllgemein UI Development unterbewertet
Prozesse - Aber was sind die Probleme?
11
Prozesse - UI Developer als Schlüsselelement
12
Lösung
Rolle „UI Developer“ mit eigener Wissensbasis forcieren
Fokus UI DevelopmentZwischen UX Designer und Software Engineer aktiv angesiedelt
Schicht Präsentation und InteraktionStyling, Templating, Layouting, Views, ViewModels, Custom
Control Development...
Prozesse - UI Development in der Anwendungsarchitektur
13
Präsentation
Daten
Interaktion
Datenmanagement
Geschäftslogik
Prozesse - UI Development in der Anwendungsarchitektur
13
Präsentation
Daten
Interaktion
Datenmanagement
UI Development
Geschäftslogik
Prozesse
14
UI Development muss als eigene Disziplin innerhalb des
Software Engineerings verstanden werden!
UX Design ist die Basis für UI Development
Prozesse
14
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!
Prozesse
14
User-centered design+ Software Engineering+ UI Development= Application! ;-)
WPF UI Development Best PracticesJetzt aber ;-)
Resource Management
Strategie
Zentrales „Styling Projekt“ für alle relevanten WPF RessourcenBeinhaltet wohldefinierte Struktur aus Resource Dictionaries
Pflege, Wartbarkeit und Zusammenarbeit vereinfachenVermeidung unnötiger Inkonsistenzen und Redundanzen
Resource Management
17
Resource Management - Styling Projekt
18
Resource Management - Styling Projekt
19
Feingranulare Struktur
Resource Management - Styling Projekt - Colors & Brushes
20
Auslagern von Colors und Brushes
Resource Management - Styling Projekt
21
Farbpalette des UI Designs als Color Objekte anlegen(Redundanzfrei)
Resource Management - Styling Projekt
22
Aus Colors Brushes bauen
Resource Management - Styling Projekt - Settings & Typo
23
Konstanten, Pfade, Schriftgrößen,Fonts ...
Resource Management - Styling Projekt - Settings & Typo
24
Definition der Schrift-Layer (Größen)
Resource Management - Styling Projekt - Styles
25
Pro Control-Typ eigenes Resource Dictionary
Resource Management - Styling Projekt - Styles
26
Fokus auf Style Setter und Control TemplateKompakter XAML Source-Code
Resource Management - Styling Projekt - Bitmap Graphics
27
Beinhaltet alle Rastergrafiken (PNG, JPEG, ...)
Resource Management - Styling Projekt - Bitmap Graphics
28
Verwaltung als ImageSource
Resource Management - Styling Projekt - Vector Graphics
29
DrawingBrush
Resource Management - Styling Projekt - Data Templates
30
Data Templates ebenfalls auslagern
Resource Management - Styling Projekt - All XAML
31
Ein Resource Dictionary das alle Ressourcen beinhaltet
Kann später in App.xaml eingebunden werden
Resource Management - Styling Projekt - All XAML
32
Reihenfolge beachten
Resource Management - Styling Projekt - All XAML
33
Einfaches einbinden...
Resource Management - Styling Projekt - All XAML
34
Resource Management - Styling Projekt - All XAML
35
Default Styles anbieten!(Kein x:Key)
Shared Resource Dictionary
Resource Management - Shared Resource Dictionary
37
Vorsicht
bei MergedDictionaries (Speicherfresser)Bewirkt mehrfache Allokation der Ressourcen!
Kritisch bei modularen Projekten mit Ressourcen „Verlinkung“
LösungShared Resource Dictionary
Resource Management - Shared Resource Dictionary
38
Resource Management - Shared Resource Dictionary
38
Resource Management - Shared Resource Dictionary
38
Führt zu Mehrfachanlegung
Resource Management - Shared Resource Dictionary
39
Resource Management - Shared Resource Dictionary
40
Verwendung wie gewohnt, aber...
Resource Management - Shared Resource Dictionary
41
Resource Management - Shared Resource Dictionary
42
Preprocessor Symbol zum steuern verwenden :-)
Resource Management - Shared Resource Dictionary
43
Resource Management - Shared Resource Dictionary
44
In eigener Assembly auslagern und Namespace Mapping in AssemblyInfo.cs definieren ;-)
Modulare Projekte
Resource Management - Modulare Projekte
46
Strategie
„Common Styling“ Projekt für allgemeine RessourcenPro Module spezifisches „Styling Projekt“
„Lazy load“ spezifischer Ressourcen lokal in View
UserControl
UserControl
48
Leicht zu erstellen und benutzen
Struktur = ContentElement-Referenzierung mit x:Name
Styling und Templating möglichCode-Behind (Blend, Visual Studio)
UserControl - Model View ViewModel - Überblick
49
View = UserControl
UserControl
50
UserControls dienen der Zusammenfassung und Gruppierung
mehrerer Controls und Layout Panels.
UserControl vs. Custom Control - Gegenüberstellung
51
Custom ControlUserControl
Technik
Logik & Visual
Styling
Aufwand*
Reuse
XAML + Code Behind Klasse + Style + Template
Harte Verdrahtung
Hart
Wenig
Schlecht
Getrennt
Flexibel
Etwas aufwändiger
Gut
Davids Top 3 „UserControl Misused“
UserControl - Davids Top 3 „UserControl Misused“
53
UserControl - Davids Top 3 „UserControl Misused“
53
#1
Interaktions-, Geschäfts- und Anwendungslogik mit Model-Layer-Zugriffen im Code-Behind des UserControls
UserControl - Davids Top 3 „UserControl Misused“
54
UserControl - Davids Top 3 „UserControl Misused“
54
#2
Atomare Controls (Button, CheckBox, ...) in UserControls einzeln kapseln nur um Code-Behind verwenden zu können
UserControl - Davids Top 3 „UserControl Misused“
55
UserControl - Davids Top 3 „UserControl Misused“
55
#3
UserControl mit vollem Code-Behind per Copy & Paste vervielfältigen, weil die Visualisierung unterschiedlich ist
(Content = Struktur, Styling?)
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…
Style Vererbung
57
Style Vererbung - Beispiel an zwei Buttons
58
Style Vererbung - Beispiel an zwei Buttons
59
Style Vererbung - Beispiel an zwei Buttons
60
Je mehr TemplateBinding desto
„sauberer“ und flexibler der Style!
Style Vererbung - Beispiel an zwei Buttons
61
Style Vererbung - Beispiel an zwei Buttons
61
SecondaryButtonStyle erbt von PrimaryButtonStyle
Lediglich überschreiben von Background, Foreground und IsPressed Trigger (Style Ebene)
Kein Kopieren der Template notwendig, kompakter Source-Code ;-)
Style Vererbung - Beispiel an zwei Buttons
62
Wenn immer mögliche Trigger auf Style Ebene
Basis Style
Style Vererbung - Basis Style
64
Bei Styling ist ein Basis Style für alle UI Elemente empfehlenswertWichtige Setter für SnapsToDevicePixels, OverridesDefaults etc.
Beispiel Segmented RadioButtons
Style Vererbung - Beispiel Segmented RadioButtons
66
Style Vererbung - Beispiel Segmented RadioButtons
66
Style Vererbung - Beispiel Segmented RadioButtons
66
Drei Teile notwendig
Unterschied BorderThickness, CornerRadius
Style Vererbung - Beispiel Segmented RadioButtons
67
Styling von Left SegmentedRadioButton
Style Vererbung - Beispiel Segmented RadioButtons - Middle
68
Trotz Vererbung müssen wir die Control Template anpassen & kopierenCornerRadius bei Border und Lichtkante :-(
Style Vererbung - Beispiel Segmented RadioButtons - Right
69
Style Vererbung - Beispiel Segmented RadioButtons...
70
Keine Angst vor Custom Controls!
Oh oh Custom Controls
72
Ableitung von einer konkreten Klasse ≠ UserControl
Styling- und Templating-Möglichkeiten
Visueller Aufbau im ControlTemplateDefault Style möglich (Generic.xaml)
Zusammenfassung in einer Control Library möglichElement-Referenzierung über OnApplyTemplate()
Oh oh Custom Controls - Handwerkzeugs...
73
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 - Extended RadioButtons
74
Nur Properties hinzufügen :-)
Oh oh Custom Controls - Extended RadioButtons
75
Oh oh Custom Controls - Extended RadioButtons
76
TemplateBinding an die neuen Properties möglich
Oh oh Custom Controls - Extended RadioButtons
77
Kein kopieren der Control Template notwendig :-)Super kompakter XAML Source-Code ohne Redundanzen
Nächste Stufe Enum „SegmentPostion“ + Trigger ... ;-)
Oh oh Custom Controls - Extended RadioButtons
78
Oh oh Custom Controls - Source-Code Schnipsel :-)
79
Effizienzgewinn
Leichtgewichtig
Oh oh Custom Controls - Leichtgewichtig... :-)
81
Counter, wird an diversen Stellen im UI verwendet...
Custom Layout Container
Strategie
Layout und Design Patterns als Custom Controls abbilden
Abstraktion und Identifikation der Patterns
IdeenFormularDialog oder WindowMaster/Detail...
Custom Layout Container
83
Custom Layout Container
84
Custom Layout Container
85
ProblemKomplexes Layout erhöht die Gefahr von Inkonsistenzen während der UI Entwicklung
Custom Layout Container
86
Custom Layout Container
87
Custom Layout Container
88
Custom Layout Container
89
Custom Layout Container
90
Custom Layout Container - Überschreiben Methoden ItemsControl
91
Eigene Item Wrapper verwenden :-)
VorteilVerhindern, dass Developer UI zerstören ;-)XAML Code wird kompakter und einfacherWiederverwendbarkeit und erhöhte Produktivität
NachteilAufwändigere Implementierung
Custom Layout Container
92
Effekte
Effekte (Basisklasse Effect)
Blur und DropShadowPerformance-hungrig daher sparsam verwenden
Drittanbieter stellen weitere Effekte bereit
Bitmap-Effekte (Basisklasse BitmapEffect)Bevel, Emboss, Outer Glow, ...
Sollte nicht mehr verwendet werdenSchlechte Performance
Effekte
94
Strategie
Effekte mit Custom Controls simulierenRectangle, Border & Co. in Kombination mit Gradient Brush
nutzen
Effekte - Was tun?
95
Effekte Beispiel Custom Control
Effekte - Beispiel Drop Shadow
97
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
98
Leichtgewichtiges Custom ControlNur Properties ohne Logik notwendig
Wichtige PropertiesXOffset & YOffsetShadowBrushText* (Optionen)
Idee zwei TextBlöcke in Control Template
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
99
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
100
Nur Properties :-)
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
101
Grid mit zwei TextBlöcken
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
102
TranslateTransform auf „ShadowText“ Werte über Properties X & YOffset Property
Per TemplateBinding Controls anbinden z.B. Text
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
103
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
104
Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“
105
Effekte Beispiel Rectangle
Effekte - Beispiel Drop Shadow per Rectangle
107
Tabs mit Schatten
Effekte - Beispiel Drop Shadow per Rectangle
108
Rectangle mit LinearGradientBrush
Effekte - Beispiel Drop Shadow per Rectangle
109
Effekte - Beispiel Drop Shadow per Rectangle
110
Mit Alpha Wert der Farbe arbeiten
XAML Konventionen
XAML Konventionen - Warum?
112
Lesbarkeit des Source-Codes erhöhen
Zusammenarbeit erleichternPflege und Wartung ermöglichen
Effizienzgewinn
XAML Konventionen - XAML!
113
Allgemein
Jede Stufe der Hierarchie (UI) einrückenx:Name oder x:Key Attribute als erstes schreiben
Attribute nach Zusammengehörigkeit gruppierenWidth, Height, VerticalAlignment, HorizontalAlignment..-
Erweiterte Attribut Formatierung
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung
115
Attribute eines Elementes in jeweils einer separaten Zeile
Das erste Attribut steht in der gleichen Zeile wie das ElementAlle nachfolgenden Attribute werden entlang der Vertikalen
untereinander ausgerichtet
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung
116
Überblick
Leichtes Scannen für Auge
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung
117
Blend...
Formatierung? Reihenfolge?
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung
118
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
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung
119
Ausnahmen
SetterTrigger
ColorsBrushes...
Nicht für Konstrukte mit wiederholenden Zeichenketten geeignet
Nicht für Konstrukte mit wiederholenden Zeichenketten geeignet
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung
120
Failed O_o
Auge bleibt bei jeder Zeile an dem entsprechenden Value Attribut "hängen"
XAML Konventionen - XAML! - Erweiterte Attribut Formatierung - VS
121
Oben im Menü > Tools > Options > Text Editor > XAML
XAML Namenskonventionen
XAML Namenskonventionen
123
Allgemein
„PascalCase“Buchstaben und Zahlen
Beispiel: <Individueller Name><Datentyp>
BeispieleWhiteColor, ButtonBackgroundBrush, MainGrid, LoadButton,
PrimaryButtonStyle, CheckBoxStyle, ...
Performance Top 10
Performance Top 10
125
VirtualizingVirtualizingStackPanel bei ItemsControls verwenden + VirtualizingStackPanel.VirtualizationMode="Recycling"Rendert nur was im ViewPort sichtbar ist, Wrapper z.B. ListBoxItem werden wiederverwendet
Event Handler LeaksEvent Handler immer abmelden, auf jedes += immer -=
EinfrierenPresentationOptions:Freeze="true" auf Freezable Objekten setzen dadurch kein Overhead durch Change Events
StaticResource über DynamicResourceWenn keine Änderungen der Ressource zur Laufzeit stattfinden dann immer per StaticResource referenzierenAbleitung: BindingMode OneTime bei Data Binding
Simples XAML
Einfache Layouts, wenig Elemente, keine tiefen Verschachtelungen in Content oder Templates
Performance Top 10
126
Shared Resource Dictionaries verwendenSchützt vor mehrfachen Allokation der Ressourcen, bei Bedarf „lazy load“ von spezifischen Ressourcen lokal in View
Data Binding optimierenUngültige Bindings „System.Windows.Data Error“ aufspüren und entfernenBindings immer wieder freigeben BindingOperations.ClearBinding()
EffekteSollten vermieden werden, besser faken mit Rectangle, Border & Co. in Kombination mit Brushes
Trigger über VSMWeniger Overhead da kein Storyboard gestartet werden muss
Main UI Thread nicht blockierenArbeiten mit BackgroundWorker, Threads oder async z.B. AsyncDelegateCommand, „responsive UI“
Wie werde ich ein guter WPF UI Developer? ;-)
Wie werde ich ein guter WPF UI Developer? ;-)
128
Wie werde ich ein guter WPF UI Developer? ;-)
128
Design Basics Designer & UI Developer Workflow Usability Engineering BasicsFundament
Wie werde ich ein guter WPF UI Developer? ;-)
128
Design Basics Designer & UI Developer Workflow Usability Engineering BasicsFundament
Stufe 1 Styles AnimationenControl Templates
XAML Resource ManagementBlend Controls & Layout
Template Binding Trigger & VSM
Data Binding Basics
Wie werde ich ein guter WPF UI Developer? ;-)
128
Design Basics Designer & UI Developer Workflow Usability 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
Wie werde ich ein guter WPF UI Developer? ;-)
128
Design Basics Designer & UI Developer Workflow Usability 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
Fazit
Fazit
130
Denken Sie an einen benutzer-zentrierten Designprozess
Schätzen Sie gutes UI DevelopmentReizen Sie die Möglichkeiten von WPF aus! (Keine halben Sachen)
Legen Sie Wert auf Struktur und Konsistenz während der Entwicklung
Fragen?
Vielen Dank ;-)