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

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.
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.
Bäm!
Aufgeräumt und klar

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

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

13.
RESOURCE MANAGEMENT: REVISITED
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.
Styling Projekt
16
WPF UI DEVELOPMENT BEST PRACTICES

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

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

18.
Farbpalette des
UI Designs als
Color Objekte
anlegen

19.
Aus Colors
Brushes
erstellen

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

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

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

23.
Fokus auf Style
Setter und
Control
Template

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.
Reihenfolge
beachten!

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

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

28.
SHARED RESOURCE DICTIONARY IST OK …
29

29.
ALTERNATIVE RESMERGER!
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.
Einbindung
CLI Tool im Pre Build

32.
FullLookAndFeel
Beinhaltet alle Ressourcen in einer
Datei!

33.
FullLookAndFeel
Beinhaltet alle Ressourcen in einer
Datei!

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.
WPF UI DEVELOPMENT BEST PRACTICES 2.0
ResMeger - Performance
36

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

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

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.
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.
GitHub
https://github.com/dctdct/WPF-ResMerger

41.
ICONS
38

42.
ICON FONTS
39

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.
Segoe UI Symbol
Standard Icon Font von Windows

45.
Character Map
Anzeige der Char Codes

46.
Character Map
Kopieren der Codes

47.
WPF
Code auf TextBlock anwenden

48.
Cool!
Einfach! :-)

49.
ICON FONTS SYSTEMATISCH VERWENDEN
46

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.
Icon Font
einbinden
Die .ttf Datei ins Projekt ablegen
Build Action Resource

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

53.
FontIcon
Datentyp
Kapselt Daten eines Glyph…

54.
FontIcons anlegen
Name, Family und Char Code!

55.
Ergosign
IconFont

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

57.
Verwenden
Easy!!!!

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

59.
PNG UND XAML ICONS?
57

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.
PNG
Als ImageSource

62.
DataTemplate
Mit Image Control

63.
XAML Icons
DrawingBrush und Geometry

64.
DataTemplate
Path oder Rectangle

65.
ATTACHED PROPERTIES
63

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.
Beispiel DIY
RegisterAttached call + statischer
Getter und Setter

68.
Beispiel DIY
Verwendung in Button Style

69.
Beispiel DIY
Setzen der Attached Property auf der View

70.
Auch in
DataTemplates
Binding mit RelativeSource…

71.
Verschachtelung
Ohne Problem möglich!

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

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.
Mehr Beispiele
UI Development Unchained
Vortrag ;-)

75.
Attached Properties vs. Custom Controls
73
KAPITELTITEL

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

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.
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.
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.
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.
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.
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.
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.
BLEND INTERACTIVITY
74

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.
Blend öffnen
Behaviors anschauen

87.
PROPERTY AUS USERCONTROL AUF WINDOW
SETZEN?
77

88.
ChangePropertyAction
Kombiniert mit FindAncestor Binding!

89.
COMMAND OHNE COMMAND PROPERTY AUSLÖSEN?
79

90.
InvokeCommandAction
Beispiel Daten einer ComboBox bei GotFocus

91.
TOOLS
81

92.
XAML STYLER
82

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.
Beautify
Über Context Menu

95.
Überblick
Leichtes Scannen für Auge

96.
SNOOP
86

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.
Properties
Detaillierte Informationen zu Controls

99.
Experiment
DataGrid vs. Drittanbieter (Visual Tree)

100.
Experiment
DataGrid vs. Drittanbieter (Visual Tree)

101.
3D Darstellung
Nützlich bei komplexen Controls

102.
3D Darstellung
Nützlich bei komplexen Controls

103.
Events
Darstellung von Live Events

104.
WPF INSPECTOR
94

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.
Visual Tree
Darstellung der Controls

107.
PERFORATOR
97

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.
Render
Verhalten
Fake Beispiel mit schlechter
Performance... (DropShadow auf
Window)

110.
RESMERGER!
100

111.
KONTAKT!
101

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

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

114.
Kuh
Leichtes Scannen für Auge

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