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 ;-)