WPF UI-Development Best Practices

157
David C. Thömmes WPF UI Development Best Practices

description

Follow our Experts: https://twitter.com/davidcthoemmes - https://twitter.com/ergosign GUI&Design 2012

Transcript of WPF UI-Development Best Practices

Page 1: WPF UI-Development Best Practices

David C. Thömmes WPF UI Development Best Practices

Page 2: 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“

Page 3: WPF UI-Development Best Practices

WPF = bessere & schönere UI‘s

Page 4: WPF UI-Development Best Practices

WPF = bessere & schönere UI‘s

4

Page 5: WPF UI-Development Best Practices

WPF = bessere & schönere UI‘s

4

Page 6: WPF UI-Development Best Practices

WPF = bessere & schönere UI‘s

Page 7: WPF UI-Development Best Practices

WPF = bessere & schönere UI‘sFAILED!

Page 8: WPF UI-Development Best Practices

Prozesse

Page 9: WPF UI-Development Best Practices

Prozesse - User-centered design

7

Page 10: WPF UI-Development Best Practices

Prozesse - User-centered design

7

Analysis(

Design(

Prototype(

Evaluation(

Specification(

Implementation(

Page 11: WPF UI-Development Best Practices

Prozesse - User-centered design

7

Analysis(

Design(

Prototype(

Evaluation(

Specification(

Implementation(

Page 12: WPF UI-Development Best Practices

Prozesse - User-centered design

7

Analysis(

Design(

Prototype(

Evaluation(

Specification(

Implementation(

Page 13: WPF UI-Development Best Practices

Prozesse - User-centered design

7

Analysis(

Design(

Prototype(

Evaluation(

Specification(

Implementation(

Page 14: WPF UI-Development Best Practices

Prozesse - User-centered design

7

Analysis(

Design(

Prototype(

Evaluation(

Specification(

Implementation(

Page 15: WPF UI-Development Best Practices

Prozesse - User-centered design

7

Analysis(

Design(

Prototype(

Evaluation(

Specification(

Implementation(

Page 16: WPF UI-Development Best Practices

Prozesse - User-centered design

7

Analysis(

Design(

Prototype(

Evaluation(

Specification(

Implementation(

Page 17: WPF UI-Development Best Practices

Prozesse - User-centered design - Spezifikation

8

Page 18: WPF UI-Development Best Practices

Prozesse - User-centered design - Spezifikation

8wtf? :-D

Page 19: WPF UI-Development Best Practices

Reminder - Deklarative Programmierung mit XAML, Styling, Templates...

9

Button

Page 20: WPF UI-Development Best Practices

Reminder - Model View ViewModel - Klare Trennung Visualisierung & Logik

10

Page 21: WPF UI-Development Best Practices

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

Page 22: WPF UI-Development Best Practices

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

Page 23: WPF UI-Development Best Practices

Prozesse - UI Development in der Anwendungsarchitektur

13

Präsentation

Daten

Interaktion

Datenmanagement

Geschäftslogik

Page 24: WPF UI-Development Best Practices

Prozesse - UI Development in der Anwendungsarchitektur

13

Präsentation

Daten

Interaktion

Datenmanagement

UI Development

Geschäftslogik

Page 25: WPF UI-Development Best Practices

Prozesse

14

UI Development muss als eigene Disziplin innerhalb des

Software Engineerings verstanden werden!

UX Design ist die Basis für UI Development

Page 26: WPF UI-Development Best Practices

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!

Page 27: WPF UI-Development Best Practices

Prozesse

14

User-centered design+ Software Engineering+ UI Development= Application! ;-)

Page 28: WPF UI-Development Best Practices

WPF UI Development Best PracticesJetzt aber ;-)

Page 29: WPF UI-Development Best Practices

Resource Management

Page 30: WPF UI-Development Best Practices

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

Page 31: WPF UI-Development Best Practices

Resource Management - Styling Projekt

18

Page 32: WPF UI-Development Best Practices

Resource Management - Styling Projekt

19

Feingranulare Struktur

Page 33: WPF UI-Development Best Practices

Resource Management - Styling Projekt - Colors & Brushes

20

Auslagern von Colors und Brushes

Page 34: WPF UI-Development Best Practices

Resource Management - Styling Projekt

21

Farbpalette des UI Designs als Color Objekte anlegen(Redundanzfrei)

Page 35: WPF UI-Development Best Practices

Resource Management - Styling Projekt

22

Aus Colors Brushes bauen

Page 36: WPF UI-Development Best Practices

Resource Management - Styling Projekt - Settings & Typo

23

Konstanten, Pfade, Schriftgrößen,Fonts ...

Page 37: WPF UI-Development Best Practices

Resource Management - Styling Projekt - Settings & Typo

24

Definition der Schrift-Layer (Größen)

Page 38: WPF UI-Development Best Practices

Resource Management - Styling Projekt - Styles

25

Pro Control-Typ eigenes Resource Dictionary

Page 39: WPF UI-Development Best Practices

Resource Management - Styling Projekt - Styles

26

Fokus auf Style Setter und Control TemplateKompakter XAML Source-Code

Page 40: WPF UI-Development Best Practices

Resource Management - Styling Projekt - Bitmap Graphics

27

Beinhaltet alle Rastergrafiken (PNG, JPEG, ...)

Page 41: WPF UI-Development Best Practices

Resource Management - Styling Projekt - Bitmap Graphics

28

Verwaltung als ImageSource

Page 42: WPF UI-Development Best Practices

Resource Management - Styling Projekt - Vector Graphics

29

DrawingBrush

Page 43: WPF UI-Development Best Practices

Resource Management - Styling Projekt - Data Templates

30

Data Templates ebenfalls auslagern

Page 44: WPF UI-Development Best Practices

Resource Management - Styling Projekt - All XAML

31

Ein Resource Dictionary das alle Ressourcen beinhaltet

Kann später in App.xaml eingebunden werden

Page 45: WPF UI-Development Best Practices

Resource Management - Styling Projekt - All XAML

32

Reihenfolge beachten

Page 46: WPF UI-Development Best Practices

Resource Management - Styling Projekt - All XAML

33

Einfaches einbinden...

Page 47: WPF UI-Development Best Practices

Resource Management - Styling Projekt - All XAML

34

Page 48: WPF UI-Development Best Practices

Resource Management - Styling Projekt - All XAML

35

Default Styles anbieten!(Kein x:Key)

Page 49: WPF UI-Development Best Practices

Shared Resource Dictionary

Page 50: WPF UI-Development Best Practices

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

Page 51: WPF UI-Development Best Practices

Resource Management - Shared Resource Dictionary

38

Page 52: WPF UI-Development Best Practices

Resource Management - Shared Resource Dictionary

38

Page 53: WPF UI-Development Best Practices

Resource Management - Shared Resource Dictionary

38

Führt zu Mehrfachanlegung

Page 54: WPF UI-Development Best Practices

Resource Management - Shared Resource Dictionary

39

Page 55: WPF UI-Development Best Practices

Resource Management - Shared Resource Dictionary

40

Verwendung wie gewohnt, aber...

Page 56: WPF UI-Development Best Practices

Resource Management - Shared Resource Dictionary

41

Page 57: WPF UI-Development Best Practices

Resource Management - Shared Resource Dictionary

42

Preprocessor Symbol zum steuern verwenden :-)

Page 58: WPF UI-Development Best Practices

Resource Management - Shared Resource Dictionary

43

Page 59: WPF UI-Development Best Practices

Resource Management - Shared Resource Dictionary

44

In eigener Assembly auslagern und Namespace Mapping in AssemblyInfo.cs definieren ;-)

Page 60: WPF UI-Development Best Practices

Modulare Projekte

Page 61: WPF UI-Development Best Practices

Resource Management - Modulare Projekte

46

Strategie

„Common Styling“ Projekt für allgemeine RessourcenPro Module spezifisches „Styling Projekt“

„Lazy load“ spezifischer Ressourcen lokal in View

Page 62: WPF UI-Development Best Practices

UserControl

Page 63: WPF UI-Development Best Practices

UserControl

48

Leicht zu erstellen und benutzen

Struktur = ContentElement-Referenzierung mit x:Name

Styling und Templating möglichCode-Behind (Blend, Visual Studio)

Page 64: WPF UI-Development Best Practices

UserControl - Model View ViewModel - Überblick

49

View = UserControl

Page 65: WPF UI-Development Best Practices

UserControl

50

UserControls dienen der Zusammenfassung und Gruppierung

mehrerer Controls und Layout Panels.

Page 66: WPF UI-Development Best Practices

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

Page 67: WPF UI-Development Best Practices

Davids Top 3 „UserControl Misused“

Page 68: WPF UI-Development Best Practices

UserControl - Davids Top 3 „UserControl Misused“

53

Page 69: WPF UI-Development Best Practices

UserControl - Davids Top 3 „UserControl Misused“

53

#1

Interaktions-, Geschäfts- und Anwendungslogik mit Model-Layer-Zugriffen im Code-Behind des UserControls

Page 70: WPF UI-Development Best Practices

UserControl - Davids Top 3 „UserControl Misused“

54

Page 71: WPF UI-Development Best Practices

UserControl - Davids Top 3 „UserControl Misused“

54

#2

Atomare Controls (Button, CheckBox, ...) in UserControls einzeln kapseln nur um Code-Behind verwenden zu können

Page 72: WPF UI-Development Best Practices

UserControl - Davids Top 3 „UserControl Misused“

55

Page 73: WPF UI-Development Best Practices

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

Page 74: WPF UI-Development Best Practices

Style Vererbung

Page 75: WPF UI-Development Best Practices

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

Page 76: WPF UI-Development Best Practices

Style Vererbung - Beispiel an zwei Buttons

58

Page 77: WPF UI-Development Best Practices

Style Vererbung - Beispiel an zwei Buttons

59

Page 78: WPF UI-Development Best Practices

Style Vererbung - Beispiel an zwei Buttons

60

Je mehr TemplateBinding desto

„sauberer“ und flexibler der Style!

Page 79: WPF UI-Development Best Practices

Style Vererbung - Beispiel an zwei Buttons

61

Page 80: WPF UI-Development Best Practices

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

Page 81: WPF UI-Development Best Practices

Style Vererbung - Beispiel an zwei Buttons

62

Wenn immer mögliche Trigger auf Style Ebene

Page 82: WPF UI-Development Best Practices

Basis Style

Page 83: WPF UI-Development Best Practices

Style Vererbung - Basis Style

64

Bei Styling ist ein Basis Style für alle UI Elemente empfehlenswertWichtige Setter für SnapsToDevicePixels, OverridesDefaults etc.

Page 84: WPF UI-Development Best Practices

Beispiel Segmented RadioButtons

Page 85: WPF UI-Development Best Practices

Style Vererbung - Beispiel Segmented RadioButtons

66

Page 86: WPF UI-Development Best Practices

Style Vererbung - Beispiel Segmented RadioButtons

66

Page 87: WPF UI-Development Best Practices

Style Vererbung - Beispiel Segmented RadioButtons

66

Drei Teile notwendig

Unterschied BorderThickness, CornerRadius

Page 88: WPF UI-Development Best Practices

Style Vererbung - Beispiel Segmented RadioButtons

67

Styling von Left SegmentedRadioButton

Page 89: WPF UI-Development Best Practices

Style Vererbung - Beispiel Segmented RadioButtons - Middle

68

Trotz Vererbung müssen wir die Control Template anpassen & kopierenCornerRadius bei Border und Lichtkante :-(

Page 90: WPF UI-Development Best Practices

Style Vererbung - Beispiel Segmented RadioButtons - Right

69

Page 91: WPF UI-Development Best Practices

Style Vererbung - Beispiel Segmented RadioButtons...

70

Page 92: WPF UI-Development Best Practices

Keine Angst vor Custom Controls!

Page 93: WPF UI-Development Best Practices

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

Page 94: WPF UI-Development Best Practices

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

Page 95: WPF UI-Development Best Practices

Oh oh Custom Controls - Extended RadioButtons

74

Nur Properties hinzufügen :-)

Page 96: WPF UI-Development Best Practices

Oh oh Custom Controls - Extended RadioButtons

75

Page 97: WPF UI-Development Best Practices

Oh oh Custom Controls - Extended RadioButtons

76

TemplateBinding an die neuen Properties möglich

Page 98: WPF UI-Development Best Practices

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

Page 99: WPF UI-Development Best Practices

Oh oh Custom Controls - Extended RadioButtons

78

Page 100: WPF UI-Development Best Practices

Oh oh Custom Controls - Source-Code Schnipsel :-)

79

Effizienzgewinn

Page 101: WPF UI-Development Best Practices

Leichtgewichtig

Page 102: WPF UI-Development Best Practices

Oh oh Custom Controls - Leichtgewichtig... :-)

81

Counter, wird an diversen Stellen im UI verwendet...

Page 103: WPF UI-Development Best Practices

Custom Layout Container

Page 104: WPF UI-Development Best Practices

Strategie

Layout und Design Patterns als Custom Controls abbilden

Abstraktion und Identifikation der Patterns

IdeenFormularDialog oder WindowMaster/Detail...

Custom Layout Container

83

Page 105: WPF UI-Development Best Practices

Custom Layout Container

84

Page 106: WPF UI-Development Best Practices

Custom Layout Container

85

ProblemKomplexes Layout erhöht die Gefahr von Inkonsistenzen während der UI Entwicklung

Page 107: WPF UI-Development Best Practices

Custom Layout Container

86

Page 108: WPF UI-Development Best Practices

Custom Layout Container

87

Page 109: WPF UI-Development Best Practices

Custom Layout Container

88

Page 110: WPF UI-Development Best Practices

Custom Layout Container

89

Page 111: WPF UI-Development Best Practices

Custom Layout Container

90

Page 112: WPF UI-Development Best Practices

Custom Layout Container - Überschreiben Methoden ItemsControl

91

Eigene Item Wrapper verwenden :-)

Page 113: WPF UI-Development Best Practices

VorteilVerhindern, dass Developer UI zerstören ;-)XAML Code wird kompakter und einfacherWiederverwendbarkeit und erhöhte Produktivität

NachteilAufwändigere Implementierung

Custom Layout Container

92

Page 114: WPF UI-Development Best Practices

Effekte

Page 115: WPF UI-Development Best Practices

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

Page 116: WPF UI-Development Best Practices

Strategie

Effekte mit Custom Controls simulierenRectangle, Border & Co. in Kombination mit Gradient Brush

nutzen

Effekte - Was tun?

95

Page 117: WPF UI-Development Best Practices

Effekte Beispiel Custom Control

Page 118: WPF UI-Development Best Practices

Effekte - Beispiel Drop Shadow

97

Page 119: WPF UI-Development Best Practices

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

Page 120: WPF UI-Development Best Practices

Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“

99

Page 121: WPF UI-Development Best Practices

Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“

100

Nur Properties :-)

Page 122: WPF UI-Development Best Practices

Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“

101

Grid mit zwei TextBlöcken

Page 123: WPF UI-Development Best Practices

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

Page 124: WPF UI-Development Best Practices

Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“

103

Page 125: WPF UI-Development Best Practices

Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“

104

Page 126: WPF UI-Development Best Practices

Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“

105

Page 127: WPF UI-Development Best Practices

Effekte Beispiel Rectangle

Page 128: WPF UI-Development Best Practices

Effekte - Beispiel Drop Shadow per Rectangle

107

Tabs mit Schatten

Page 129: WPF UI-Development Best Practices

Effekte - Beispiel Drop Shadow per Rectangle

108

Rectangle mit LinearGradientBrush

Page 130: WPF UI-Development Best Practices

Effekte - Beispiel Drop Shadow per Rectangle

109

Page 131: WPF UI-Development Best Practices

Effekte - Beispiel Drop Shadow per Rectangle

110

Mit Alpha Wert der Farbe arbeiten

Page 132: WPF UI-Development Best Practices

XAML Konventionen

Page 133: WPF UI-Development Best Practices

XAML Konventionen - Warum?

112

Lesbarkeit des Source-Codes erhöhen

Zusammenarbeit erleichternPflege und Wartung ermöglichen

Effizienzgewinn

Page 134: WPF UI-Development Best Practices

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

Page 135: WPF UI-Development Best Practices

Erweiterte Attribut Formatierung

Page 136: WPF UI-Development Best Practices

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

Page 137: WPF UI-Development Best Practices

XAML Konventionen - XAML! - Erweiterte Attribut Formatierung

116

Überblick

Leichtes Scannen für Auge

Page 138: WPF UI-Development Best Practices

XAML Konventionen - XAML! - Erweiterte Attribut Formatierung

117

Blend...

Formatierung? Reihenfolge?

Page 139: WPF UI-Development Best Practices

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

Page 140: WPF UI-Development Best Practices

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

Page 141: WPF UI-Development Best Practices

XAML Konventionen - XAML! - Erweiterte Attribut Formatierung

120

Failed O_o

Auge bleibt bei jeder Zeile an dem entsprechenden Value Attribut "hängen"

Page 142: WPF UI-Development Best Practices

XAML Konventionen - XAML! - Erweiterte Attribut Formatierung - VS

121

Oben im Menü > Tools > Options > Text Editor > XAML

Page 143: WPF UI-Development Best Practices

XAML Namenskonventionen

Page 144: WPF UI-Development Best Practices

XAML Namenskonventionen

123

Allgemein

„PascalCase“Buchstaben und Zahlen

Beispiel: <Individueller Name><Datentyp>

BeispieleWhiteColor, ButtonBackgroundBrush, MainGrid, LoadButton,

PrimaryButtonStyle, CheckBoxStyle, ...

Page 145: WPF UI-Development Best Practices

Performance Top 10

Page 146: WPF UI-Development Best Practices

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

Page 147: WPF UI-Development Best Practices

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“

Page 148: WPF UI-Development Best Practices

Wie werde ich ein guter WPF UI Developer? ;-)

Page 149: WPF UI-Development Best Practices

Wie werde ich ein guter WPF UI Developer? ;-)

128

Page 150: WPF UI-Development Best Practices

Wie werde ich ein guter WPF UI Developer? ;-)

128

Design Basics Designer & UI Developer Workflow Usability Engineering BasicsFundament

Page 151: WPF UI-Development Best Practices

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

Page 152: WPF UI-Development Best Practices

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

Page 153: WPF UI-Development Best Practices

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

Page 154: WPF UI-Development Best Practices

Fazit

Page 155: WPF UI-Development Best Practices

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

Page 156: WPF UI-Development Best Practices

Fragen?

Page 157: WPF UI-Development Best Practices

Vielen Dank ;-)