WPF UI-Development Best Practices

19,094 views
19,295 views

Published on

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

GUI&Design 2012

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
19,094
On SlideShare
0
From Embeds
0
Number of Embeds
4,444
Actions
Shares
0
Downloads
177
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

WPF UI-Development Best Practices

  1. 1. WPF UI Development Best Practices David C. Thömmes
  2. 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. 3. WPF = bessere & schönere UI‘s
  4. 4. WPF = bessere & schönere UI‘s 4
  5. 5. WPF = bessere & schönere UI‘s 4
  6. 6. WPF = bessere & schönere UI‘s
  7. 7. WPF = bessere & schönere UI‘s F AILED !
  8. 8. Prozesse
  9. 9. Prozesse - User-centered design 7
  10. 10. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  11. 11. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  12. 12. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  13. 13. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  14. 14. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  15. 15. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  16. 16. Prozesse - User-centered design Analysis( Implementation( Design( Specification( Prototype( Evaluation( 7
  17. 17. Prozesse - User-centered design - Spezifikation 8
  18. 18. Prozesse - User-centered design - Spezifikation wtf? :-D 8
  19. 19. Reminder - Deklarative Programmierung mit XAML, Styling, Templates... Button 9
  20. 20. Reminder - Model View ViewModel - Klare Trennung Visualisierung & Logik 10
  21. 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. 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. 23. Prozesse - UI Development in der Anwendungsarchitektur Präsentation Interaktion Geschäftslogik Datenmanagement Daten 13
  24. 24. Prozesse - UI Development in der Anwendungsarchitektur Präsentation Interaktion UI Development Geschäftslogik Datenmanagement Daten 13
  25. 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. 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. 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. 28. WPF UI Development Best PracticesJetzt aber ;-)
  29. 29. Resource Management
  30. 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. 31. Resource Management - Styling Projekt 18
  32. 32. Resource Management - Styling Projekt Feingranulare Struktur 19
  33. 33. Resource Management - Styling Projekt - Colors & Brushes Auslagern von Colors und Brushes 20
  34. 34. Resource Management - Styling Projekt Farbpalette des UI Designs als Color Objekte anlegen (Redundanzfrei) 21
  35. 35. Resource Management - Styling Projekt Aus Colors Brushes bauen 22
  36. 36. Resource Management - Styling Projekt - Settings & Typo Konstanten, Pfade, Schriftgrößen, Fonts ... 23
  37. 37. Resource Management - Styling Projekt - Settings & Typo Definition der Schrift-Layer (Größen) 24
  38. 38. Resource Management - Styling Projekt - Styles Pro Control-Typ eigenes Resource Dictionary 25
  39. 39. Resource Management - Styling Projekt - Styles Fokus auf Style Setter und Control Template Kompakter XAML Source-Code 26
  40. 40. Resource Management - Styling Projekt - Bitmap Graphics Beinhaltet alle Rastergrafiken (PNG, JPEG, ...) 27
  41. 41. Resource Management - Styling Projekt - Bitmap Graphics Verwaltung als ImageSource 28
  42. 42. Resource Management - Styling Projekt - Vector Graphics DrawingBrush 29
  43. 43. Resource Management - Styling Projekt - Data Templates Data Templates ebenfalls auslagern 30
  44. 44. Resource Management - Styling Projekt - All XAML Ein Resource Dictionary das alle Ressourcen beinhaltet Kann später in App.xaml eingebunden werden 31
  45. 45. Resource Management - Styling Projekt - All XAML Reihenfolge beachten 32
  46. 46. Resource Management - Styling Projekt - All XAML Einfaches einbinden... 33
  47. 47. Resource Management - Styling Projekt - All XAML 34
  48. 48. Resource Management - Styling Projekt - All XAML Default Styles anbieten! (Kein x:Key) 35
  49. 49. Shared Resource Dictionary
  50. 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. 51. Resource Management - Shared Resource Dictionary 38
  52. 52. Resource Management - Shared Resource Dictionary 38
  53. 53. Resource Management - Shared Resource Dictionary Führt zu Mehrfachanlegung 38
  54. 54. Resource Management - Shared Resource Dictionary 39
  55. 55. Resource Management - Shared Resource Dictionary Verwendung wie gewohnt, aber... 40
  56. 56. Resource Management - Shared Resource Dictionary 41
  57. 57. Resource Management - Shared Resource Dictionary Preprocessor Symbol zum steuern verwenden :-) 42
  58. 58. Resource Management - Shared Resource Dictionary 43
  59. 59. Resource Management - Shared Resource Dictionary In eigener Assembly auslagern und Namespace Mapping in AssemblyInfo.cs definieren ;-) 44
  60. 60. Modulare Projekte
  61. 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. 62. UserControl
  63. 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. 64. UserControl - Model View ViewModel - Überblick View = UserControl 49
  65. 65. UserControl UserControls dienen der Zusammenfassung und Gruppierung mehrerer Controls und Layout Panels. 50
  66. 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. 67. Davids Top 3 „UserControl Misused“
  68. 68. UserControl - Davids Top 3 „UserControl Misused“ 53
  69. 69. UserControl - Davids Top 3 „UserControl Misused“ #1 Interaktions-, Geschäfts- und Anwendungslogik mit Model- Layer-Zugriffen im Code-Behind des UserControls 53
  70. 70. UserControl - Davids Top 3 „UserControl Misused“ 54
  71. 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. 72. UserControl - Davids Top 3 „UserControl Misused“ 55
  73. 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. 74. Style Vererbung
  75. 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. 76. Style Vererbung - Beispiel an zwei Buttons 58
  77. 77. Style Vererbung - Beispiel an zwei Buttons 59
  78. 78. Style Vererbung - Beispiel an zwei Buttons Je mehr TemplateBinding desto „sauberer“ und flexibler der Style! 60
  79. 79. Style Vererbung - Beispiel an zwei Buttons 61
  80. 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. 81. Style Vererbung - Beispiel an zwei Buttons Wenn immer mögliche Trigger auf Style Ebene 62
  82. 82. Basis Style
  83. 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. 84. Beispiel Segmented RadioButtons
  85. 85. Style Vererbung - Beispiel Segmented RadioButtons 66
  86. 86. Style Vererbung - Beispiel Segmented RadioButtons 66
  87. 87. Style Vererbung - Beispiel Segmented RadioButtons Drei Teile notwendig Unterschied BorderThickness, CornerRadius 66
  88. 88. Style Vererbung - Beispiel Segmented RadioButtons Styling von Left SegmentedRadioButton 67
  89. 89. Style Vererbung - Beispiel Segmented RadioButtons - MiddleTrotz Vererbung müssen wir die Control Template anpassen & kopierenCornerRadius bei Border und Lichtkante :-( 68
  90. 90. Style Vererbung - Beispiel Segmented RadioButtons - Right 69
  91. 91. Style Vererbung - Beispiel Segmented RadioButtons... 70
  92. 92. Keine Angst vor Custom Controls!
  93. 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. 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. 95. Oh oh Custom Controls - Extended RadioButtons Nur Properties hinzufügen :-) 74
  96. 96. Oh oh Custom Controls - Extended RadioButtons 75
  97. 97. Oh oh Custom Controls - Extended RadioButtons TemplateBinding an die neuen Properties möglich 76
  98. 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. 99. Oh oh Custom Controls - Extended RadioButtons 78
  100. 100. Oh oh Custom Controls - Source-Code Schnipsel :-) Effizienzgewinn 79
  101. 101. Leichtgewichtig
  102. 102. Oh oh Custom Controls - Leichtgewichtig... :-) Counter, wird an diversen Stellen im UI verwendet... 81
  103. 103. Custom Layout Container
  104. 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. 105. Custom Layout Container 84
  106. 106. Custom Layout Container Problem Komplexes Layout erhöht die Gefahr von Inkonsistenzen während der UI Entwicklung 85
  107. 107. Custom Layout Container 86
  108. 108. Custom Layout Container 87
  109. 109. Custom Layout Container 88
  110. 110. Custom Layout Container 89
  111. 111. Custom Layout Container 90
  112. 112. Custom Layout Container - Überschreiben Methoden ItemsControl Eigene Item Wrapper verwenden :-) 91
  113. 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. 114. Effekte
  115. 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. 116. Effekte - Was tun? Strategie Effekte mit Custom Controls simulieren Rectangle, Border & Co. in Kombination mit Gradient Brush nutzen 95
  117. 117. Effekte Beispiel Custom Control
  118. 118. Effekte - Beispiel Drop Shadow 97
  119. 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. 120. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ 99
  121. 121. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ Nur Properties :-) 100
  122. 122. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ Grid mit zwei TextBlöcken 101
  123. 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. 124. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ 103
  125. 125. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ 104
  126. 126. Effekte - Beispiel Drop Shadow per Custom Control „ShadowText“ 105
  127. 127. Effekte Beispiel Rectangle
  128. 128. Effekte - Beispiel Drop Shadow per Rectangle Tabs mit Schatten 107
  129. 129. Effekte - Beispiel Drop Shadow per Rectangle Rectangle mit LinearGradientBrush 108
  130. 130. Effekte - Beispiel Drop Shadow per Rectangle 109
  131. 131. Effekte - Beispiel Drop Shadow per Rectangle Mit Alpha Wert der Farbe arbeiten 110
  132. 132. XAML Konventionen
  133. 133. XAML Konventionen - Warum? Lesbarkeit des Source-Codes erhöhen Zusammenarbeit erleichtern Pflege und Wartung ermöglichen Effizienzgewinn 112
  134. 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. 135. Erweiterte Attribut Formatierung
  136. 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. 137. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung Überblick Leichtes Scannen für Auge 116
  138. 138. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung Blend... Formatierung? Reihenfolge? 117
  139. 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. 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. 141. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung Failed O_o Auge bleibt bei jeder Zeile an dem entsprechenden Value Attribut "hängen" 120
  142. 142. XAML Konventionen - XAML! - Erweiterte Attribut Formatierung - VS Oben im Menü > Tools > Options > Text Editor > XAML 121
  143. 143. XAML Namenskonventionen
  144. 144. XAML Namenskonventionen Allgemein „PascalCase“ Buchstaben und Zahlen Beispiel: <Individueller Name><Datentyp> Beispiele WhiteColor, ButtonBackgroundBrush, MainGrid, LoadButton, PrimaryButtonStyle, CheckBoxStyle, ... 123
  145. 145. Performance Top 10
  146. 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. 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. 148. Wie werde ich ein guterWPF UI Developer? ;-)
  149. 149. Wie werde ich ein guter WPF UI Developer? ;-) 128
  150. 150. Wie werde ich ein guter WPF UI Developer? ;-) Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow 128
  151. 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. 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. 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. 154. Fazit
  155. 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. 156. Fragen?
  157. 157. Vielen Dank ;-)

×