xaml ui development best practices 2.0
TRANSCRIPT
XAML UI DEVELOPMENT BEST
PRACTICES [email protected]
SENIOR SOFTWARE & UX ENGINEER
DAVID C. THÖMMES
UI DEVELOPMENT & CONSULTING IT-BERATUNG UND SOFTWAREENTWICKLUNG
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
DCT’S UI DEVELOPMENT STAGES!
3
WPF = bessere & schönere UI‘s ?
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
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
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
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
Bäm! Aufgeräumt und klar
WPF ist das Toolkit! User-centered Design der Weg…
http://commons.wikimedia.org/wiki/File:Basic_guitar_toolkit_by_TT_Zop.jpg
WPF UI DEVELOPMENT BEST PRACTICES 2.0
Iterativer Prozess mit Rücksprüngen
13
RESOURCE MANAGEMENT: REVISITED
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
Styling Projekt
16
WPF UI DEVELOPMENT BEST PRACTICES
Styling Projekt
17
WPF UI DEVELOPMENT BEST PRACTICES
Feingranulare Struktur
Colors & Brushes
18
WPF UI DEVELOPMENT BEST PRACTICES
Auslagern von Colors und
Brushes
Farbpalette des UI Designs als Color Objekte anlegen
Aus Colors
Brushes erstellen
Settings & Typo
21
WPF UI DEVELOPMENT BEST PRACTICES
Konstanten, Pfade,
Schriftgrößen,
Fonts ...
Settings & Typo
22
WPF UI DEVELOPMENT BEST PRACTICES
Definition der Schrift-Layer (Größen)
Styles
23
WPF UI DEVELOPMENT BEST PRACTICES
Pro Control-Typ eigenes
Resource Dictionary
Fokus auf Style Setter und Control Template
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
Reihenfolge beachten!
Look and Feel Resource Dictionary
27
WPF UI DEVELOPMENT BEST PRACTICES
Einfaches einbinden...
Vorsicht Performance!
28
WPF UI DEVELOPMENT BEST PRACTICES
Führt zu Mehrfachanlegung
SHARED RESOURCE DICTIONARY IST OK …
29
ALTERNATIVE RESMERGER!
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
Einbindung CLI Tool im Pre Build
FullLookAndFeel Beinhaltet alle Ressourcen in einer Datei!
FullLookAndFeel Beinhaltet alle Ressourcen in einer Datei!
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
WPF UI DEVELOPMENT BEST PRACTICES 2.0
ResMeger - Performance
36
Startup Time MS Startup RAM MB
WPF UI DEVELOPMENT BEST PRACTICES 2.0
ResMeger - Performance
36
Startup Time MS Startup RAM MB
Ohne ResMerger ~3600 - 4500 ~115
WPF UI DEVELOPMENT BEST PRACTICES 2.0
ResMeger - Performance
36
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
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
GitHub https://github.com/dctdct/WPF-ResMerger
ICONS
38
ICON FONTS
39
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
Segoe UI Symbol Standard Icon Font von Windows
Character Map Anzeige der Char Codes
Character Map Kopieren der Codes
WPF Code auf TextBlock anwenden
Cool! Einfach! :-)
ICON FONTS SYSTEMATISCH VERWENDEN
46
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
Icon Font einbinden Die .ttf Datei ins Projekt ablegen
Build Action Resource
Icon Font als Resource Innerhalb eines RD als Resource anlegen
Mit # Name angeben (Systemsteuerung)
FontIcon Datentyp Kapselt Daten eines Glyph…
FontIcons anlegen Name, Family und Char Code!
Ergosign IconFont
Implizite DataTemplate Ohne x:Key und TextBlock mit diversen Bindings
Verwenden Easy!!!!
Free Custom Icon Fonts Fontello, Font Awesome, … !
PNG UND XAML ICONS?
57
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
PNG Als ImageSource
DataTemplate Mit Image Control
XAML Icons DrawingBrush und Geometry
DataTemplate Path oder Rectangle
ATTACHED PROPERTIES
63
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
Beispiel DIY RegisterAttached call + statischer Getter und Setter
Beispiel DIY Verwendung in Button Style
Beispiel DIY Setzen der Attached Property auf der View
Auch in DataTemplates Binding mit RelativeSource…
Verschachtelung Ohne Problem möglich!
Footer Beispiel Attached für Footer DataTemplate
In ControlTemplate ContentPresenter
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
Mehr Beispiele UI Development Unchained Vortrag ;-)
Attached Properties vs. Custom Controls
73
KAPITELTITEL
ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG
Attached Properties vs. Custom Controls
73
KAPITELTITEL
ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG
FLEXIBILITÄTSehr hoch durch anheften (Immer möglich)
Hoch, wenn Ableitung möglich
Attached Properties vs. Custom Controls
73
KAPITELTITEL
ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG
FLEXIBILITÄTSehr 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
ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG
FLEXIBILITÄTSehr 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
ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG
FLEXIBILITÄTSehr 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
ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG
FLEXIBILITÄTSehr 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
ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG
FLEXIBILITÄTSehr 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 / WISSENUnter Umständen schwieriger (Extreme Konstrukte)
Einfacherer
Attached Properties vs. Custom Controls
73
KAPITELTITEL
ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG
FLEXIBILITÄTSehr 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 / WISSENUnter Umständen schwieriger (Extreme Konstrukte)
Einfacherer
REUSE Gut Gut (Custom Control Library)
Attached Properties vs. Custom Controls
73
KAPITELTITEL
BLEND INTERACTIVITY
74
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
Blend öffnen Behaviors anschauen
PROPERTY AUS USERCONTROL AUF WINDOW SETZEN?
77
ChangePropertyAction Kombiniert mit FindAncestor Binding!
COMMAND OHNE COMMAND PROPERTY AUSLÖSEN?
79
InvokeCommandAction Beispiel Daten einer ComboBox bei GotFocus
TOOLS
81
XAML STYLER
82
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
Beautify Über Context Menu
Überblick Leichtes Scannen für Auge
SNOOP
86
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
Properties Detaillierte Informationen zu Controls
Experiment DataGrid vs. Drittanbieter (Visual Tree)
Experiment DataGrid vs. Drittanbieter (Visual Tree)
3D Darstellung Nützlich bei komplexen Controls
3D Darstellung Nützlich bei komplexen Controls
Events Darstellung von Live Events
WPF INSPECTOR
94
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
Visual Tree Darstellung der Controls
PERFORATOR
97
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
Render Verhalten
Fake Beispiel mit schlechter Performance... (DropShadow auf
Window)
RESMERGER!
100
KONTAKT!
101
GitHub Repo https://github.com/dctdct/WPF-UI-Development-Best-Practices
Kuh Leichtes Scannen für Auge
VIELEN DANK.GRAF-JOHANN-STRAßE 19
66121 SAARBRÜCKEN
GERMANY
WWW.DAVIDCHRISTIAN.DE
T +49 681 688 9528 [email protected]
UI DEVELOPMENT & CONSULTING IT-BERATUNG UND SOFTWAREENTWICKLUNG
DAVID C. THÖMMES