WPF UI-Development Best Practices

  • 12,829 views
Uploaded on

Follow our Experts: https://twitter.com/davidcthoemmes - https://twitter.com/ergosign …

Follow our Experts: https://twitter.com/davidcthoemmes - https://twitter.com/ergosign

GUI&Design 2012

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
12,829
On Slideshare
0
From Embeds
0
Number of Embeds
36

Actions

Shares
Downloads
124
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. WPF UI Development Best Practices David C. Thömmes
  • 2. David C. Thömmes Software Engineer & UI Developer @ ERGOSIGN Bachelor of Science, Medieninformatik, FH KL Aktuelle Schwerpunkte UI & Application Development .NET, WPF, Qt, iOS Lehrbeauftragter FH KL „UI Development“ 2
  • 3. WPF = bessere & schönere UI‘s
  • 4. WPF = bessere & schönere UI‘s 4
  • 5. WPF = bessere & schönere UI‘s 4
  • 6. WPF = bessere & schönere UI‘s
  • 7. WPF = bessere & schönere UI‘s F AILED !
  • 8. Prozesse
  • 9. Prozesse - User-centered design 7
  • 10. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 11. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 12. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 13. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 14. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 15. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 16. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  • 17. Prozesse - User-centered design - Spezifikation 8
  • 18. Prozesse - User-centered design - Spezifikation wtf? :-D 8
  • 19. Reminder - Deklarative Programmierung mit XAML, Styling, Templates... Button 9
  • 20. Reminder - Model View ViewModel - Klare Trennung Visualisierung & Logik 10
  • 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
  • 28. WPF UI Development Best PracticesJetzt aber ;-)
  • 29. Resource Management
  • 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
  • 31. Resource Management - Styling Projekt 18
  • 32. Resource Management - Styling Projekt Feingranulare Struktur 19
  • 33. Resource Management - Styling Projekt - Colors & Brushes Auslagern von Colors und Brushes 20
  • 34. Resource Management - Styling Projekt Farbpalette des UI Designs als Color Objekte anlegen (Redundanzfrei) 21
  • 35. Resource Management - Styling Projekt Aus Colors Brushes bauen 22
  • 36. Resource Management - Styling Projekt - Settings & Typo Konstanten, Pfade, Schriftgrößen, Fonts ... 23
  • 37. Resource Management - Styling Projekt - Settings & Typo Definition der Schrift-Layer (Größen) 24
  • 38. Resource Management - Styling Projekt - Styles Pro Control-Typ eigenes Resource Dictionary 25
  • 39. Resource Management - Styling Projekt - Styles Fokus auf Style Setter und Control Template Kompakter XAML Source-Code 26
  • 40. Resource Management - Styling Projekt - Bitmap Graphics Beinhaltet alle Rastergrafiken (PNG, JPEG, ...) 27
  • 41. Resource Management - Styling Projekt - Bitmap Graphics Verwaltung als ImageSource 28
  • 42. Resource Management - Styling Projekt - Vector Graphics DrawingBrush 29
  • 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
  • 45. Resource Management - Styling Projekt - All XAML Reihenfolge beachten 32
  • 46. Resource Management - Styling Projekt - All XAML Einfaches einbinden... 33
  • 47. Resource Management - Styling Projekt - All XAML 34
  • 48. Resource Management - Styling Projekt - All XAML Default Styles anbieten! (Kein x:Key) 35
  • 49. Shared Resource Dictionary
  • 50. Resource Management - Shared Resource Dictionary Vorsicht bei MergedDictionaries (Speicherfresser) Bewirkt mehrfache Allokation der Ressourcen! Kritisch bei modularen Projekten mit Ressourcen „Verlinkung“ Lösung Shared Resource Dictionary 37
  • 51. Resource Management - Shared Resource Dictionary 38
  • 52. Resource Management - Shared Resource Dictionary 38
  • 53. Resource Management - Shared Resource Dictionary Führt zu Mehrfachanlegung 38
  • 54. Resource Management - Shared Resource Dictionary 39
  • 55. Resource Management - Shared Resource Dictionary Verwendung wie gewohnt, aber... 40
  • 56. Resource Management - Shared Resource Dictionary 41
  • 57. Resource Management - Shared Resource Dictionary Preprocessor Symbol zum steuern verwenden :-) 42
  • 58. Resource Management - Shared Resource Dictionary 43
  • 59. Resource Management - Shared Resource Dictionary In eigener Assembly auslagern und Namespace Mapping in AssemblyInfo.cs definieren ;-) 44
  • 60. Modulare Projekte
  • 61. Resource Management - Modulare Projekte Strategie „Common Styling“ Projekt für allgemeine Ressourcen Pro Module spezifisches „Styling Projekt“ „Lazy load“ spezifischer Ressourcen lokal in View 46
  • 62. UserControl
  • 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
  • 64. UserControl - Model View ViewModel - Überblick View = UserControl 49
  • 65. UserControl UserControls dienen der Zusammenfassung und Gruppierung mehrerer Controls und Layout Panels. 50
  • 66. UserControl vs. Custom Control - Gegenüberstellung UserControl Custom Control Technik XAML + Code Behind Klasse + Style + Template Logik & Visual Harte Verdrahtung Getrennt Styling Hart Flexibel Aufwand* Wenig Etwas aufwändiger Reuse Schlecht Gut 51
  • 67. Davids Top 3 „UserControl Misused“
  • 68. UserControl - Davids Top 3 „UserControl Misused“ 53
  • 69. UserControl - Davids Top 3 „UserControl Misused“ #1 Interaktions-, Geschäfts- und Anwendungslogik mit Model- Layer-Zugriffen im Code-Behind des UserControls 53
  • 70. UserControl - Davids Top 3 „UserControl Misused“ 54
  • 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
  • 72. UserControl - Davids Top 3 „UserControl Misused“ 55
  • 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
  • 74. Style Vererbung
  • 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
  • 76. Style Vererbung - Beispiel an zwei Buttons 58
  • 77. Style Vererbung - Beispiel an zwei Buttons 59
  • 78. Style Vererbung - Beispiel an zwei Buttons Je mehr TemplateBinding desto „sauberer“ und flexibler der Style! 60
  • 79. Style Vererbung - Beispiel an zwei Buttons 61
  • 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
  • 82. Basis Style
  • 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
  • 84. Beispiel Segmented RadioButtons
  • 85. Style Vererbung - Beispiel Segmented RadioButtons 66
  • 86. Style Vererbung - Beispiel Segmented RadioButtons 66
  • 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 - MiddleTrotz Vererbung müssen wir die Control Template anpassen & kopierenCornerRadius bei Border und Lichtkante :-( 68
  • 90. Style Vererbung - Beispiel Segmented RadioButtons - Right 69
  • 91. Style Vererbung - Beispiel Segmented RadioButtons... 70
  • 92. Keine Angst vor Custom Controls!
  • 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
  • 94. Oh oh Custom Controls - Handwerkzeugs... Loaded / Unloaded Blendability Routed Attribute Commands Style, Anatomie Template + Routed Template- Custom Events Binding Controls Custom Control Dependency Library + Properties Generic.xaml OnApply Template 73
  • 95. Oh oh Custom Controls - Extended RadioButtons Nur Properties hinzufügen :-) 74
  • 96. Oh oh Custom Controls - Extended RadioButtons 75
  • 97. Oh oh Custom Controls - Extended RadioButtons TemplateBinding an die neuen Properties möglich 76
  • 98. Oh oh Custom Controls - Extended RadioButtonsKein kopieren der Control Template notwendig :-)Super kompakter XAML Source-Code ohne RedundanzenNächste Stufe Enum „SegmentPostion“ + Trigger ... ;-) 77
  • 99. Oh oh Custom Controls - Extended RadioButtons 78
  • 100. Oh oh Custom Controls - Source-Code Schnipsel :-) Effizienzgewinn 79
  • 101. Leichtgewichtig
  • 102. Oh oh Custom Controls - Leichtgewichtig... :-) Counter, wird an diversen Stellen im UI verwendet... 81
  • 103. Custom Layout Container
  • 104. Custom Layout Container Strategie Layout und Design Patterns als Custom Controls abbilden Abstraktion und Identifikation der Patterns Ideen Formular Dialog oder Window Master/Detail ... 83
  • 105. Custom Layout Container 84
  • 106. Custom Layout Container Problem Komplexes Layout erhöht die Gefahr von Inkonsistenzen während der UI Entwicklung 85
  • 107. Custom Layout Container 86
  • 108. Custom Layout Container 87
  • 109. Custom Layout Container 88
  • 110. Custom Layout Container 89
  • 111. Custom Layout Container 90
  • 112. Custom Layout Container - Überschreiben Methoden ItemsControl Eigene Item Wrapper verwenden :-) 91
  • 113. Custom Layout Container Vorteil Verhindern, dass Developer UI zerstören ;-) XAML Code wird kompakter und einfacher Wiederverwendbarkeit und erhöhte Produktivität Nachteil Aufwändigere Implementierung 92
  • 114. Effekte
  • 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
  • 117. Effekte Beispiel Custom Control
  • 118. Effekte - Beispiel Drop Shadow 97
  • 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
  • 120. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ 99
  • 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
  • 124. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ 103
  • 125. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ 104
  • 126. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ 105
  • 127. Effekte Beispiel Rectangle
  • 128. Effekte - Beispiel Drop Shadow per Rectangle Tabs mit Schatten 107
  • 129. Effekte - Beispiel Drop Shadow per Rectangle Rectangle mit LinearGradientBrush 108
  • 130. Effekte - Beispiel Drop Shadow per Rectangle 109
  • 131. Effekte - Beispiel Drop Shadow per Rectangle Mit Alpha Wert der Farbe arbeiten 110
  • 132. XAML Konventionen
  • 133. XAML Konventionen - Warum? Lesbarkeit des Source-Codes erhöhen Zusammenarbeit erleichtern Pflege und Wartung ermöglichen Effizienzgewinn 112
  • 134. XAML Konventionen - XAML! Allgemein Jede Stufe der Hierarchie (UI) einrücken x:Name oder x:Key Attribute als erstes schreiben Attribute nach Zusammengehörigkeit gruppieren Width, Height, VerticalAlignment, HorizontalAlignment..- 113
  • 135. Erweiterte Attribut Formatierung
  • 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
  • 137. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung Überblick Leichtes Scannen für Auge 116
  • 138. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung Blend... Formatierung? Reihenfolge? 117
  • 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
  • 143. XAML Namenskonventionen
  • 144. XAML Namenskonventionen Allgemein „PascalCase“ Buchstaben und Zahlen Beispiel: <Individueller Name><Datentyp> Beispiele WhiteColor, ButtonBackgroundBrush, MainGrid, LoadButton, PrimaryButtonStyle, CheckBoxStyle, ... 123
  • 145. Performance Top 10
  • 146. Performance Top 10Virtualizing VirtualizingStackPanel bei ItemsControls verwenden + VirtualizingStackPanel.VirtualizationMode="Recycling" Rendert nur was im ViewPort sichtbar ist, Wrapper z.B. ListBoxItem werden wiederverwendetEvent Handler Leaks Event Handler immer abmelden, auf jedes += immer -=Einfrieren PresentationOptions:Freeze="true" auf Freezable Objekten setzen dadurch kein Overhead durch Change EventsStaticResource über DynamicResource Wenn keine Änderungen der Ressource zur Laufzeit stattfinden dann immer per StaticResource referenzieren Ableitung: BindingMode OneTime bei Data BindingSimples XAML Einfache Layouts, wenig Elemente, keine tiefen Verschachtelungen in Content oder Templates 125
  • 147. Performance Top 10Shared Resource Dictionaries verwenden Schützt vor mehrfachen Allokation der Ressourcen, bei Bedarf „lazy load“ von spezifischen Ressourcen lokal in ViewData 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 BrushesTrigger über VSM Weniger Overhead da kein Storyboard gestartet werden mussMain UI Thread nicht blockieren Arbeiten mit BackgroundWorker, Threads oder async z.B. AsyncDelegateCommand, „responsive UI“ 126
  • 148. Wie werde ich ein guterWPF UI Developer? ;-)
  • 149. Wie werde ich ein guter WPF UI Developer? ;-) 128
  • 150. Wie werde ich ein guter WPF UI Developer? ;-) Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow 128
  • 151. Wie werde ich ein guter WPF UI Developer? ;-) Stufe 1 Styles Control Templates Template Binding Animationen Trigger & VSM XAML Blend Controls & Layout Resource Management Data Binding Basics Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow 128
  • 152. Wie werde ich ein guter WPF UI Developer? ;-) Stufe 2 MVVM Application Frameworks .NET Visual Studio Behaviors Data Binding Advanced Data Templates Attached Properties Adorner Stufe 1 Styles Control Templates Template Binding Animationen Trigger & VSM XAML Blend Controls & Layout Resource Management Data Binding Basics Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow 128
  • 153. Wie werde ich ein guter WPF UI Developer? ;-) Stufe 3 Custom Control Development Custom Layout Panels Miscellaneous Stufe 2 MVVM Application Frameworks .NET Visual Studio Behaviors Data Binding Advanced Data Templates Attached Properties Adorner Stufe 1 Styles Control Templates Template Binding Animationen Trigger & VSM XAML Blend Controls & Layout Resource Management Data Binding Basics Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow 128
  • 154. Fazit
  • 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
  • 156. Fragen?
  • 157. Vielen Dank ;-)