XAML UI DEVELOPMENT BEST PRACTICES 2.0

XAML UI DEVELOPMENT BEST

PRACTICES [email protected]

SENIOR SOFTWARE & UX ENGINEER

DAVID C. THÖMMES

UI DEVELOPMENT & CONSULTING IT-BERATUNG UND SOFTWAREENTWICKLUNG

mailto:[email protected]?subject=

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


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


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


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

http://commons.wikimedia.org/wiki/File:Basic_guitar_toolkit_by_TT_Zop.jpg


Iterativer Prozess mit Rücksprüngen

13

RESOURCE MANAGEMENT: REVISITED

14


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


Styling Projekt

17


Feingranulare Struktur

Colors & Brushes

18


Auslagern von Colors und

Brushes

Farbpalette des UI Designs als Color Objekte anlegen

Aus Colors

Brushes erstellen

Settings & Typo

21


Konstanten, Pfade,

Schriftgrößen,

Fonts ...

Settings & Typo

22


Definition der Schrift-Layer (Größen)

Styles

23


Pro Control-Typ eigenes

Resource Dictionary

Fokus auf Style Setter und Control Template

Look and Feel Resource Dictionary

25


Ein Resource Dictionary das alle

Ressourcen beinhaltet

Kann später in App.xaml

eingebunden werden

Reihenfolge beachten!

Look and Feel Resource Dictionary

27


Einfaches einbinden...

Vorsicht Performance!

28


Führt zu Mehrfachanlegung

SHARED RESOURCE DICTIONARY IST OK …

29

ALTERNATIVE RESMERGER!

30


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!


Experiment

• Projekt mit mittlerem Styling Projekt

• ca. 10.000 XAML Zeilen

• 12 Demo Views in Showcase (Hülle)

• Keine reale Datenanbindung

35


ResMeger - Performance

36

Startup Time MS Startup RAM MB



36


Ohne ResMerger ~3600 - 4500 ~115



36



Res Merger ~500 - 600 ~30



36



Res Merger ~500 - 600 ~30



Steigerung Performance

• Startup Time ca. 85%

• RAM ca. 75%

• Mehr Performance-Indikatoren möglich… ;-)

36

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

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

ICONS

38

ICON FONTS

39


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


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


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


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


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


73

KAPITELTITEL


FLEXIBILITÄTSehr hoch durch anheften (Immer möglich)

Hoch, wenn Ableitung möglich


73

KAPITELTITEL




FUNKTIONALITÄT Beschränkter (Statisch) Frei in Ableitung


73

KAPITELTITEL





REDUNDANZ Keine Höher (Icon für Button + CheckBox)


73

KAPITELTITEL






AUFWAND / PFLEGE Geringer (Zentrale Klasse) Aufwändiger (Viele Klassen)


73

KAPITELTITEL







ERWEITERBARKEIT Gut Gut


73

KAPITELTITEL








VERSTÄNDNIS / WISSENUnter Umständen schwieriger (Extreme Konstrukte)

Einfacherer


73

KAPITELTITEL








VERSTÄNDNIS / WISSENUnter Umständen schwieriger (Extreme Konstrukte)

Einfacherer

REUSE Gut Gut (Custom Control Library)


73

KAPITELTITEL

BLEND INTERACTIVITY

74


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


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

http://visualstudiogallery.msdn.microsoft.com/d6634d0e-38fb-48b6-829f-dadbc5c2fb62

Beautify Über Context Menu

Überblick Leichtes Scannen für Auge

SNOOP

86


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

https://snoopwpf.codeplex.com/

Properties Detaillierte Informationen zu Controls

Experiment DataGrid vs. Drittanbieter (Visual Tree)

3D Darstellung Nützlich bei komplexen Controls

Events Darstellung von Live Events

WPF INSPECTOR

94


WPF Inspector

• Open-Source Spy Util

• Visual Tree einer Applikation anschauen

• Properties lesen und setzen

• Debugging

• http://wpfinspector.codeplex.com/

95

http://wpfinspector.codeplex.com/

Visual Tree Darstellung der Controls

PERFORATOR

97


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

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

Render Verhalten

Fake Beispiel mit schlechter Performance... (DropShadow auf

Window)

RESMERGER!

100

KONTAKT!

101

http://www.davidchristian.de

Better Call WPF DCT!


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

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


mailto:[email protected]?subject=

XAML UI DEVELOPMENT BEST PRACTICES 2.0

Software

Transcript of XAML UI DEVELOPMENT BEST PRACTICES 2.0