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/

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. 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. DCT’S UI DEVELOPMENT STAGES!
3

4. WPF = bessere
& schönere
UI‘s ?

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

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

9. 9

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

11. Bäm!
Aufgeräumt und klar

12. WPF ist das
Toolkit!
User-centered Design der Weg…
http://commons.wikimedia.org/wiki/File:Basic_guitar_toolkit_by_TT_Zop.jpg

13. WPF UI DEVELOPMENT BEST PRACTICES 2.0
Iterativer Prozess mit Rücksprüngen
13

14. RESOURCE MANAGEMENT: REVISITED
14

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

16. Styling Projekt
16
WPF UI DEVELOPMENT BEST PRACTICES

17. Styling Projekt
17
WPF UI DEVELOPMENT BEST PRACTICES
Feingranulare Struktur

18. Colors & Brushes
18
WPF UI DEVELOPMENT BEST PRACTICES
Auslagern von Colors und
Brushes

19. Farbpalette des
UI Designs als
Color Objekte
anlegen

20. Aus Colors
Brushes
erstellen

21. Settings & Typo
21
WPF UI DEVELOPMENT BEST PRACTICES
Konstanten, Pfade,
Schriftgrößen,
Fonts ...

22. Settings & Typo
22
WPF UI DEVELOPMENT BEST PRACTICES
Definition der Schrift-Layer (Größen)

23. Styles
23
WPF UI DEVELOPMENT BEST PRACTICES
Pro Control-Typ eigenes
Resource Dictionary

24. Fokus auf Style
Setter und
Control
Template

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

26. Reihenfolge
beachten!

27. Look and Feel Resource Dictionary
27
WPF UI DEVELOPMENT BEST PRACTICES
Einfaches einbinden...

28. Vorsicht Performance!
28
WPF UI DEVELOPMENT BEST PRACTICES
Führt zu Mehrfachanlegung

29. SHARED RESOURCE DICTIONARY IST OK …
29

30. ALTERNATIVE RESMERGER!
30

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

32. Einbindung
CLI Tool im Pre Build

33. FullLookAndFeel
Beinhaltet alle Ressourcen in einer
Datei!

34. FullLookAndFeel
Beinhaltet alle Ressourcen in einer
Datei!

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

36. WPF UI DEVELOPMENT BEST PRACTICES 2.0
ResMeger - Performance
36

37. Startup Time MS Startup RAM MB
WPF UI DEVELOPMENT BEST PRACTICES 2.0
ResMeger - Performance
36

38. Startup Time MS Startup RAM MB
Ohne ResMerger ~3600 - 4500 ~115
WPF UI DEVELOPMENT BEST PRACTICES 2.0
ResMeger - Performance
36

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
36

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

41. GitHub
https://github.com/dctdct/WPF-ResMerger

42. ICONS
38

43. ICON FONTS
39

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

45. Segoe UI Symbol
Standard Icon Font von Windows

46. Character Map
Anzeige der Char Codes

47. Character Map
Kopieren der Codes

48. WPF
Code auf TextBlock anwenden

49. Cool!
Einfach! :-)

50. ICON FONTS SYSTEMATISCH VERWENDEN
46

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

52. Icon Font
einbinden
Die .ttf Datei ins Projekt ablegen
Build Action Resource

53. Icon Font als Resource
Innerhalb eines RD als Resource anlegen
Mit # Name angeben (Systemsteuerung)

54. FontIcon
Datentyp
Kapselt Daten eines Glyph…

55. FontIcons anlegen
Name, Family und Char Code!

56. Ergosign
IconFont

57. Implizite DataTemplate
Ohne x:Key und TextBlock mit diversen Bindings

58. Verwenden
Easy!!!!

60. Free Custom
Icon Fonts
Fontello, Font Awesome, … !

61. PNG UND XAML ICONS?
57

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

63. PNG
Als ImageSource

64. DataTemplate
Mit Image Control

65. XAML Icons
DrawingBrush und Geometry

66. DataTemplate
Path oder Rectangle

67. ATTACHED PROPERTIES
63

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

69. Beispiel DIY
RegisterAttached call + statischer
Getter und Setter

70. Beispiel DIY
Verwendung in Button Style

71. Beispiel DIY
Setzen der Attached Property auf der View

72. Auch in
DataTemplates
Binding mit RelativeSource…

73. Verschachtelung
Ohne Problem möglich!

74. Footer Beispiel
Attached für Footer DataTemplate
In ControlTemplate ContentPresenter

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

76. Mehr Beispiele
UI Development Unchained
Vortrag ;-)

77. Attached Properties vs. Custom Controls
73
KAPITELTITEL

78. ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG
Attached Properties vs. Custom Controls
73
KAPITELTITEL

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

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
Attached Properties vs. Custom Controls
73
KAPITELTITEL

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)
Attached Properties vs. Custom Controls
73
KAPITELTITEL

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)
Attached Properties vs. Custom Controls
73
KAPITELTITEL

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
Attached Properties vs. Custom Controls
73
KAPITELTITEL

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

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

86. BLEND INTERACTIVITY
74

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

88. Blend öffnen
Behaviors anschauen

89. PROPERTY AUS USERCONTROL AUF WINDOW
SETZEN?
77

90. ChangePropertyAction
Kombiniert mit FindAncestor Binding!

91. COMMAND OHNE COMMAND PROPERTY AUSLÖSEN?
79

92. InvokeCommandAction
Beispiel Daten einer ComboBox bei GotFocus

93. TOOLS
81

94. XAML STYLER
82

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

96. Beautify
Über Context Menu

97. Überblick
Leichtes Scannen für Auge

98. SNOOP
86

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

100. Properties
Detaillierte Informationen zu Controls

101. Experiment
DataGrid vs. Drittanbieter (Visual Tree)

102. Experiment
DataGrid vs. Drittanbieter (Visual Tree)

103. 3D Darstellung
Nützlich bei komplexen Controls

104. 3D Darstellung
Nützlich bei komplexen Controls

105. Events
Darstellung von Live Events

106. WPF INSPECTOR
94

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

108. Visual Tree
Darstellung der Controls

109. PERFORATOR
97

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

111. Render
Verhalten
Fake Beispiel mit schlechter
Performance... (DropShadow auf
Window)

112. RESMERGER!
100

113. KONTAKT!
101

114. http://www.davidchristian.de
Better Call WPF DCT!

115. GitHub Repo
https://github.com/dctdct/WPF-UI-Development-Best-Practices

116. Kuh
Leichtes Scannen für Auge

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