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