XAML UI DEVELOPMENT BEST PRACTICES 2.0

3.622 Aufrufe

Veröffentlicht am

Erfahren Sie neue und spannende Best Practices aus der Welt der WPF und XAML Developer. Lernen Sie u.a. wie man wirklich performant mit modularen Ressource Dictionaries arbeitet und erleben Sie die grenzenlosen Möglichkeiten von Attached Properties. Erfahren Sie den korrekten Umgang mit Icons als Icon Fonts sowie impliziten DataTemplates. WPF bietet für jede Herausforderung bei der Umsetzung eines optimierten UX Designs die passenden Lösungsräume! Aber was ist eigentlich dieses UX Design... ?

Mehr gibt es hier: http://www.davidchristian.de/

Veröffentlicht in: Software
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.622
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.559
Aktionen
Geteilt
0
Downloads
37
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

XAML UI DEVELOPMENT BEST PRACTICES 2.0

  1. 1. XAML UI DEVELOPMENT BEST PRACTICES 2.0 THOEMMES@DAVIDCHRISTIAN.DE SENIOR SOFTWARE & UX ENGINEER DAVID C. THÖMMES UI DEVELOPMENT & CONSULTING IT-BERATUNG UND SOFTWAREENTWICKLUNG
  2. 2. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Reminder UX = User Experience • Beschreibt die Summe aller Erfahrungen die ein Benutzer mit einem Produkt erlebt • Werbung, Website, Verpackung, Bedienung … Usability (Gebrauchstauglichkeit während der Nutzung) • Effektivität zur Lösung einer Aufgabe • Effizienz der Handhabung des Systems • Zufriedenheit der Nutzer einer Software 2
  3. 3. DCT’S UI DEVELOPMENT STAGES! 3
  4. 4. WPF = bessere & schönere UI‘s ?
  5. 5. WPF UI DEVELOPMENT BEST PRACTICES Stage 1 • Alte UI Technologie (WinForms, MFC, WinCC … schlimmer …) • UX Design und Usability finden keinen Beachtung / Nicht Bekannt • Negative UX, Schlechte Usability, Kein ästhetischer Anspruch • „Es läuft und wir haben für jede Funktion einen Button!“ 5
  6. 6. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Stage 2 • Neuere UI Technologie wie WPF oder HTML5 • Kein UX Designer oder UX Engineer involviert (Vielleicht höchstens ein Mediengestalter) • Entwickler entdecken Farben, neue Controls etc. • Negative bis neutrale UX • Schlechte bis leicht verbesserte Usability (Durch Controls) • Kein ästhetischer Anspruch • „Wir haben nun DataGrids mit Filtern und ein Ribbon von Microsoft!“ 6
  7. 7. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Stage 3 • Semi bis professionelles UX Design vorhanden • Nötige Kompetenz in der Rolle des UI Developer fehlt • Positivere UX und verbesserte Usability auf dem Papier, Ästhetik gewinnt an Bedeutung • „Das Konzept ist geil aber zu aufwändig und zu teuer in der Entwicklung!“ 8
  8. 8. 9
  9. 9. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Stage 4 • Semi bis professionelles UX Design vorhanden • Kompetenzen im Bereich UI Development vorhanden • Positive UX • Gute bis sehr gute Usability • Ästhetik und gutes visuelles Design • „Bedient sich echt geil! Die Benutzer lieben es!“ 10
  10. 10. Bäm! Aufgeräumt und klar
  11. 11. WPF ist das Toolkit! User-centered Design der Weg… http://commons.wikimedia.org/wiki/File:Basic_guitar_toolkit_by_TT_Zop.jpg
  12. 12. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Iterativer Prozess mit Rücksprüngen 13
  13. 13. RESOURCE MANAGEMENT: REVISITED 14
  14. 14. WPF UI DEVELOPMENT BEST PRACTICES 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 15
  15. 15. Styling Projekt 16 WPF UI DEVELOPMENT BEST PRACTICES
  16. 16. Styling Projekt 17 WPF UI DEVELOPMENT BEST PRACTICES Feingranulare Struktur
  17. 17. Colors & Brushes 18 WPF UI DEVELOPMENT BEST PRACTICES Auslagern von Colors und Brushes
  18. 18. Farbpalette des UI Designs als Color Objekte anlegen
  19. 19. Aus Colors Brushes erstellen
  20. 20. Settings & Typo 21 WPF UI DEVELOPMENT BEST PRACTICES Konstanten, Pfade, Schriftgrößen, Fonts ...
  21. 21. Settings & Typo 22 WPF UI DEVELOPMENT BEST PRACTICES Definition der Schrift-Layer (Größen)
  22. 22. Styles 23 WPF UI DEVELOPMENT BEST PRACTICES Pro Control-Typ eigenes Resource Dictionary
  23. 23. Fokus auf Style Setter und Control Template
  24. 24. Look and Feel Resource Dictionary 25 WPF UI DEVELOPMENT BEST PRACTICES Ein Resource Dictionary das alle Ressourcen beinhaltet Kann später in App.xaml eingebunden werden
  25. 25. Reihenfolge beachten!
  26. 26. Look and Feel Resource Dictionary 27 WPF UI DEVELOPMENT BEST PRACTICES Einfaches einbinden...
  27. 27. Vorsicht Performance! 28 WPF UI DEVELOPMENT BEST PRACTICES Führt zu Mehrfachanlegung
  28. 28. SHARED RESOURCE DICTIONARY IST OK … 29
  29. 29. ALTERNATIVE RESMERGER! 30
  30. 30. WPF UI DEVELOPMENT BEST PRACTICES 2.0 ResMerger • Tool zum Mergen von verschiedenen Resource Dictionaries zu einem großen Resource Dictionary • App bindet nur noch ein Resource Dictionary ein • Merge wird in Build Prozess integriert • Verhindert exponentieller Anstieg des Arbeitsspeicher • Verhindert Auflösung von verlinkten Resource Dictionaries • Ladezeiten • Kann View-Wechsel / Startup Times dramatisch beschleunigen! 31
  31. 31. Einbindung CLI Tool im Pre Build
  32. 32. FullLookAndFeel Beinhaltet alle Ressourcen in einer Datei!
  33. 33. FullLookAndFeel Beinhaltet alle Ressourcen in einer Datei!
  34. 34. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Experiment • Projekt mit mittlerem Styling Projekt • ca. 10.000 XAML Zeilen • 12 Demo Views in Showcase (Hülle) • Keine reale Datenanbindung 35
  35. 35. WPF UI DEVELOPMENT BEST PRACTICES 2.0 ResMeger - Performance 36
  36. 36. Startup Time MS Startup RAM MB WPF UI DEVELOPMENT BEST PRACTICES 2.0 ResMeger - Performance 36
  37. 37. Startup Time MS Startup RAM MB Ohne ResMerger ~3600 - 4500 ~115 WPF UI DEVELOPMENT BEST PRACTICES 2.0 ResMeger - Performance 36
  38. 38. Startup Time MS Startup RAM MB Ohne ResMerger ~3600 - 4500 ~115 Res Merger ~500 - 600 ~30 WPF UI DEVELOPMENT BEST PRACTICES 2.0 ResMeger - Performance 36
  39. 39. Startup Time MS Startup RAM MB Ohne ResMerger ~3600 - 4500 ~115 Res Merger ~500 - 600 ~30 WPF UI DEVELOPMENT BEST PRACTICES 2.0 ResMeger - Performance Steigerung Performance • Startup Time ca. 85% • RAM ca. 75% • Mehr Performance-Indikatoren möglich… ;-) 36
  40. 40. GitHub https://github.com/dctdct/WPF-ResMerger
  41. 41. ICONS 38
  42. 42. ICON FONTS 39
  43. 43. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Icon Fonts • Schriftart nur mit Icons / Glyphs (Einfarbig) • Einfaches Skalieren der Größe (Vektor) • Farbe kann ohne Probleme angepasst werden (Trigger) • Kombination der Icons kinderleicht (Multiple TextBlöcke) • Extrem einfache Verwendung im Vergleich zu PNGs etc. • Device unabhängig • Pflegeleicht! 40
  44. 44. Segoe UI Symbol Standard Icon Font von Windows
  45. 45. Character Map Anzeige der Char Codes
  46. 46. Character Map Kopieren der Codes
  47. 47. WPF Code auf TextBlock anwenden
  48. 48. Cool! Einfach! :-)
  49. 49. ICON FONTS SYSTEMATISCH VERWENDEN 46
  50. 50. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Icon Fonts systematisch verwenden Idee • Ein Glyph per Datentyp mit weiteren Informationen kapseln (FontIcon) • Schriftfamilie • Char Code • … • Darstellung über implizite DataTemplate • Verwendung über beliebigen ContentPresenter 47
  51. 51. Icon Font einbinden Die .ttf Datei ins Projekt ablegen Build Action Resource
  52. 52. Icon Font als Resource Innerhalb eines RD als Resource anlegen Mit # Name angeben (Systemsteuerung)
  53. 53. FontIcon Datentyp Kapselt Daten eines Glyph…
  54. 54. FontIcons anlegen Name, Family und Char Code!
  55. 55. Ergosign IconFont
  56. 56. Implizite DataTemplate Ohne x:Key und TextBlock mit diversen Bindings
  57. 57. Verwenden Easy!!!!
  58. 58. Free Custom Icon Fonts Fontello, Font Awesome, … !
  59. 59. PNG UND XAML ICONS? 57
  60. 60. WPF UI DEVELOPMENT BEST PRACTICES 2.0 PNG und XAML Icons • Auslagern als Resource in Resource Dictionary • Darstellung über implizite DataTemplate • PNG • Image Control mit ImageSource • XAML Icon • Rectangle oder Path mit DrawingBrush / StreamGeometry • Verwendung über beliebigen ContentPresenter 58
  61. 61. PNG Als ImageSource
  62. 62. DataTemplate Mit Image Control
  63. 63. XAML Icons DrawingBrush und Geometry
  64. 64. DataTemplate Path oder Rectangle
  65. 65. ATTACHED PROPERTIES 63
  66. 66. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Einführung • Gleich wie Dependency Properties • Metadaten und Speicherperformance, Änderungsbenachrichtigungen, Grundlage für Trigger, Data Binding, Animationen etc. • Definition nicht für eine bestimmtes Control sondern global in einer zentralen Klasse für alle Controls • Möglichkeit auf einem beliebigen Control zusetzen • Häufig verwendet bei Layout Panels (Standard WPF) • Grid.Row, Grid.Column, ... 64
  67. 67. Beispiel DIY RegisterAttached call + statischer Getter und Setter
  68. 68. Beispiel DIY Verwendung in Button Style
  69. 69. Beispiel DIY Setzen der Attached Property auf der View
  70. 70. Auch in DataTemplates Binding mit RelativeSource…
  71. 71. Verschachtelung Ohne Problem möglich!
  72. 72. Footer Beispiel Attached für Footer DataTemplate In ControlTemplate ContentPresenter
  73. 73. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Verwendungszwecke • Gut für simple Eigenschaft auch gerne für Styling • CornerRadius, Icon, HighlightBrush, … • ToggleButtonStyle, ScrollBarStyle, … • Placeholder, IsOpen, … • Footer, FooterDataTemplate, GroupHeader, … • oder zur Realisierung überschaubarer Zusatzfunktionalität (Simple Commands) 71
  74. 74. Mehr Beispiele UI Development Unchained Vortrag ;-)
  75. 75. Attached Properties vs. Custom Controls 73 KAPITELTITEL
  76. 76. ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG Attached Properties vs. Custom Controls 73 KAPITELTITEL
  77. 77. ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG FLEXIBILITÄT Sehr hoch durch anheften (Immer möglich) Hoch, wenn Ableitung möglich Attached Properties vs. Custom Controls 73 KAPITELTITEL
  78. 78. ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG FLEXIBILITÄT Sehr hoch durch anheften (Immer möglich) Hoch, wenn Ableitung möglich FUNKTIONALITÄT Beschränkter (Statisch) Frei in Ableitung Attached Properties vs. Custom Controls 73 KAPITELTITEL
  79. 79. ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG FLEXIBILITÄT Sehr hoch durch anheften (Immer möglich) Hoch, wenn Ableitung möglich FUNKTIONALITÄT Beschränkter (Statisch) Frei in Ableitung REDUNDANZ Keine Höher (Icon für Button + CheckBox) Attached Properties vs. Custom Controls 73 KAPITELTITEL
  80. 80. ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG FLEXIBILITÄT Sehr hoch durch anheften (Immer möglich) Hoch, wenn Ableitung möglich FUNKTIONALITÄT Beschränkter (Statisch) Frei in Ableitung REDUNDANZ Keine Höher (Icon für Button + CheckBox) AUFWAND / PFLEGE Geringer (Zentrale Klasse) Aufwändiger (Viele Klassen) Attached Properties vs. Custom Controls 73 KAPITELTITEL
  81. 81. ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG FLEXIBILITÄT Sehr hoch durch anheften (Immer möglich) Hoch, wenn Ableitung möglich FUNKTIONALITÄT Beschränkter (Statisch) Frei in Ableitung REDUNDANZ Keine Höher (Icon für Button + CheckBox) AUFWAND / PFLEGE Geringer (Zentrale Klasse) Aufwändiger (Viele Klassen) ERWEITERBARKEIT Gut Gut Attached Properties vs. Custom Controls 73 KAPITELTITEL
  82. 82. ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG FLEXIBILITÄT Sehr hoch durch anheften (Immer möglich) Hoch, wenn Ableitung möglich FUNKTIONALITÄT Beschränkter (Statisch) Frei in Ableitung REDUNDANZ Keine Höher (Icon für Button + CheckBox) AUFWAND / PFLEGE Geringer (Zentrale Klasse) Aufwändiger (Viele Klassen) ERWEITERBARKEIT Gut Gut VERSTÄNDNIS / WISSEN Unter Umständen schwieriger (Extreme Konstrukte) Einfacherer Attached Properties vs. Custom Controls 73 KAPITELTITEL
  83. 83. ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG FLEXIBILITÄT Sehr hoch durch anheften (Immer möglich) Hoch, wenn Ableitung möglich FUNKTIONALITÄT Beschränkter (Statisch) Frei in Ableitung REDUNDANZ Keine Höher (Icon für Button + CheckBox) AUFWAND / PFLEGE Geringer (Zentrale Klasse) Aufwändiger (Viele Klassen) ERWEITERBARKEIT Gut Gut VERSTÄNDNIS / WISSEN Unter Umständen schwieriger (Extreme Konstrukte) Einfacherer REUSE Gut Gut (Custom Control Library) Attached Properties vs. Custom Controls 73 KAPITELTITEL
  84. 84. BLEND INTERACTIVITY 74
  85. 85. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Einführung • Bietet zahlreiche Actions und Behaviors • Gut für Lösung kleiner MVVM Probleme! • Eigene Behaviors / Actions • Ermöglichen funktionale Erweiterung ohne Ableitung • Werden an Controls angeheftet 75
  86. 86. Blend öffnen Behaviors anschauen
  87. 87. PROPERTY AUS USERCONTROL AUF WINDOW SETZEN? 77
  88. 88. ChangePropertyAction Kombiniert mit FindAncestor Binding!
  89. 89. COMMAND OHNE COMMAND PROPERTY AUSLÖSEN? 79
  90. 90. InvokeCommandAction Beispiel Daten einer ComboBox bei GotFocus
  91. 91. TOOLS 81
  92. 92. XAML STYLER 82
  93. 93. WPF UI DEVELOPMENT BEST PRACTICES 2.0 XAML Styler • Freies Visual Studio Plugin • Erlaubt Formatierung für XAML Source-Code • Erweiterte Attribute Formatierung • http://visualstudiogallery.msdn.microsoft.com/ d6634d0e-38fb-48b6-829f-dadbc5c2fb62 83
  94. 94. Beautify Über Context Menu
  95. 95. Überblick Leichtes Scannen für Auge
  96. 96. SNOOP 86
  97. 97. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Snoop • Mächtiges Open-Source Spy Util • Kompletter Visual Tree einer Applikation anschauen • Properties lesen und setzen • 2D und 3D Darstellung • Control Events auswerten • Sehr nützlich für XAML Debugging • https://snoopwpf.codeplex.com/ 87
  98. 98. Properties Detaillierte Informationen zu Controls
  99. 99. Experiment DataGrid vs. Drittanbieter (Visual Tree)
  100. 100. Experiment DataGrid vs. Drittanbieter (Visual Tree)
  101. 101. 3D Darstellung Nützlich bei komplexen Controls
  102. 102. 3D Darstellung Nützlich bei komplexen Controls
  103. 103. Events Darstellung von Live Events
  104. 104. WPF INSPECTOR 94
  105. 105. WPF UI DEVELOPMENT BEST PRACTICES 2.0 WPF Inspector • Open-Source Spy Util • Visual Tree einer Applikation anschauen • Properties lesen und setzen • Debugging • http://wpfinspector.codeplex.com/ 95
  106. 106. Visual Tree Darstellung der Controls
  107. 107. PERFORATOR 97
  108. 108. WPF UI DEVELOPMENT BEST PRACTICES 2.0 Perforator • Tool zur Überwachung des Render-Verhaltens • Bestandteil WPF Performance Suite • FPS, Dirty Rect, Intermediate Render Targets, ... • http://download.microsoft.com/download/A/6/A/A6AC035D- DA3F-4F0C-ADA4-37C8E5D34E3D/setup/ WinSDKPerformanceToolKit_amd64/wpt_x64.msi • http://msdn.microsoft.com/en-us/library/aa969767(v=vs. 110).aspx 98
  109. 109. Render Verhalten Fake Beispiel mit schlechter Performance... (DropShadow auf Window)
  110. 110. RESMERGER! 100
  111. 111. KONTAKT! 101
  112. 112. http://www.davidchristian.de Better Call WPF DCT!
  113. 113. GitHub Repo https://github.com/dctdct/WPF-UI-Development-Best-Practices
  114. 114. Kuh Leichtes Scannen für Auge
  115. 115. VIELEN DANK. GRAF-JOHANN-STRAßE 19 66121 SAARBRÜCKEN GERMANY WWW.DAVIDCHRISTIAN.DE T +49 681 688 9528 THOEMMES@DAVIDCHRISTIAN.DE UI DEVELOPMENT & CONSULTING IT-BERATUNG UND SOFTWAREENTWICKLUNG DAVID C. THÖMMES

×