XAML UI Development Best Practices 2.0

Transkript

1 XAML UI Development Best Practices 2.0 David C. Thömmes Geschäftsführer Senior Software & UX Engineer Shapefield UG (Haftungsbeschränkt) Altenkesseler Str. 17 / C Saarbrücken

2 Weil jeder Nutzer das optimale Erleben digitaler Produkte verdient und wir jeden Tag die Welt etwas verbessern können!

3 User Experience

4 USER EXPERIENCE User Experience? Beschreibt die Summe aller Erfahrungen die ein Benutzer mit einem Produkt erlebt Nutzererlebnis Ein Produkt bietet viele Berührungspunkte Werbung Website Bestellung Verpackung 4

5 Werbung MS Truck!

6

7 Verkauf

8 Produkt

9

10 Usability

11 Gutes Design? Mehr Funktion erhöht die Komplexität

12 Verbesserungen? Hilfe durch Benutzer selbst

13 USABILITY Definition ISO-Norm DIN EN ISO 9241 The effectiveness, efficiency, and satisfaction with which specified users can achieve specified goals in particular environments. Usability ist das Ausmaß, in dem ein Produkt durch bestimmte Nutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen. Gebrauchstauglichkeit 13

14 USABILITY Usability Effektivität zur Lösung einer Aufgabe (Zielführend) Effizienz der Handhabung des Systems (Aufwände) Zufriedenheit der Nutzer einer Software (Positives Erlebnis) Teilaspekt von UX Während der Benutzung relevant 14

15 Und was macht der Markt?

16 Es läuft und wir haben für jede Funktion einen Button!

17 Wir haben nun DataGrids mit Filtern und ein Ribbon von Microsoft!

18 Das Konzept ist geil aber zu aufwändig und zu teuer in der Entwicklung!

19 Klar und aufgeräumt Bedient sich echt geil! Die Benutzer lieben es!

20 Neue Technologien sind das Toolkit! User-centered Design der Weg

21 DESIGNPROZESS (USER-CENTERED DESIGN Iterativer Prozess mit Rücksprüngen 21

22

23 Resource Management: Revisited

24 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Strategie Zentrales Styling Projekt für alle relevanten XAML / WPF Ressourcen Beinhaltet wohldefinierte Struktur aus Resource Dictionaries Pflege, Wartbarkeit und Zusammenarbeit vereinfachen Vermeidung unnötiger Inkonsistenzen und Redundanzen 24

25 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Styling Projekt 25

26 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Styling Projekt Feingranulare Struktur 26

27 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Colors und Brushes Auslagern von Colors und Brushes 27

28 Farbpalette des UI Designs als Color Objekte anlegen (Redundanzfrei)

29 Aus Colors Brushes erstellen

30 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Settings Konstanten, Pfade, Schriftgrößen, Fonts... 30

31 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Settings und Typo Definition der Schrift-Layer (Größen) 31

32 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Styles und Control-Templates für Controls Pro Control-Typ eigenes Resource Dictionary 32

33 Fokus auf Style Setter und Control Template Kompakter XAML Source-Code

34 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Look and Feel Resource Dictionary Ein Resource Dictionary das alle Ressourcen beinhaltet Kann später in App.xaml eingebunden werden 34

35 Reihenfolge beachten!

36 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Look and Feel Resource Dictionary Einfaches einbinden... 36

37 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Vorsicht Performance! Führt zu Mehrfachanlegung 37

38 Shared Resource Dictionary ist ok

39 Alternative ResMerger!

40 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT 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! 40

41 Einbindung CLI Tool im Pre Build

42 FullLookAndFeel Beinhaltet alle Ressourcen in einer Datei!

43

44 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Experiment Projekt mit mittlerem Styling Projekt ca XAML Zeilen 12 Demo Views in Showcase (Hülle) Keine reale Datenanbindung 44

45 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT ResMeger - Performance Startup Time MS Startup RAM MB Ohne ResMerger ~ ~115 Res Merger ~ ~30 45

46 GitHub ResMerger

47 Icons

48 Icon Fonts

49 XAML UI DEVELOPMENT BEST PRACTICES - ICONS 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 (PNG Hell) Pflegeleicht! 49

50 Segoe UI Symbol Standard Icon Font von Windows

51 Character Map Anzeige der Char Codes

52 Character Map Kopieren der Codes

53 WPF Code auf TextBlock anwenden

54 Cool! Einfach! :-)

55 Icon Fonts systematisch verwenden

56 XAML UI DEVELOPMENT BEST PRACTICES - ICONS 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 56

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

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

59 FontIcon Datentyp Kapselt Daten eines Glyph

60 FontIcons anlegen Name, Family und Char Code!

61 Implizite DataTemplate Ohne x:key und TextBlock mit diversen Bindings

62 Verwenden Easy!!!!

63

64 Free Custom Icon Fonts Fontello, Font Awesome,!

65 PNG und XAML Icons?

66 XAML UI DEVELOPMENT BEST PRACTICES - ICONS 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 66

67 PNG Als ImageSource

68 DataTemplate Mit Image Control

69 XAML Icons DrawingBrush und Geometry

70 DataTemplate Path oder Rectangle

71 Attached Properties

72 XAML UI DEVELOPMENT BEST PRACTICES - ATTACHED PROPERTIES 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,... 72

73 Beispiel DIY RegisterAttached call + statischer Getter und Setter

74 Beispiel DIY Verwendung in Button Style

75 Beispiel DIY Setzen der Attached Property auf der View

76 Auch in DataTemplates Binding mit RelativeSource

77 Verschachteln Ohne Problem möglich!

78 Footer Beispiel Attached für Footer DataTemplate In ControlTemplate ContentPresenter

79 XAML UI DEVELOPMENT BEST PRACTICES - ATTACHED PROPERTIES 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) 79

80 Mehr Beispiele

81 XAML UI DEVELOPMENT BEST PRACTICES - ATTACHED PROPERTIES Attached Properties vs. Custom Controls 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) 81

82 Tools

83 Neue Tools in VS 2015

84 Xaml Styler

85 XAML UI DEVELOPMENT BEST PRACTICES - TOOLS XAML Styler Freies Visual Studio Plugin Erlaubt Formatierung für XAML Source-Code Erweiterte Attribute Formatierung d6634d0e-38fb-48b6-829f-dadbc5c2fb62 85

86 Beautify Über Context Menu

87 Überblick Leichtes Scannen für Auge

88 Snoop

89 XAML UI DEVELOPMENT BEST PRACTICES - TOOLS 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 89

90 Properties Detaillierte Informationen zu Controls

91 Experiment DataGrid vs. Drittanbieter (Visual Tree)

92 Experiment DataGrid vs. Drittanbieter (Visual Tree)

93 3D Darstellung Nützlich bei komplexen Controls

94 3D Darstellung Nützlich bei komplexen Controls

95 Events Darstellung von Live Events

96 WPF Inspector

97 XAML UI DEVELOPMENT BEST PRACTICES - TOOLS WPF Inspector Open-Source Spy Util Visual Tree einer Applikation anschauen Properties lesen und setzen Debugging 97

98 Visual Tree Darstellung der Controls

99 Perforator

100 XAML UI DEVELOPMENT BEST PRACTICES - TOOLS Perforator Tool zur Überwachung des Render-Verhaltens Bestandteil WPF Performance Suite FPS, Dirty Rect, Intermediate Render Targets,... A6AC035D-DA3F-4F0C-ADA4-37C8E5D34E3D/setup/ WinSDKPerformanceToolKit_amd64/wpt_x64.msi 110).aspx 100

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

102 ResMerger!

103 Shapefield

104 SHAPEFIELD Shapefield rocks! Gründung Oktober 2015 Geschäftsführung David C. Thömmes Erstes Team in Saarbrücken UX Design und UI Engineering vereint Fokus Microsoft und Qt Wir gestalteten Marktdifferenzierung durch herausragende User Interfaces für kleine und mittelständische Unternehmen. 104

105 SHAPEFIELD User Interface Veredelung Gestaltung eines ästhetischen, visuellen Designs Konzeptionelles Design bleibt unberührt (Navigation etc.) Form, Farbe, Effekte, Proportionen, Aufforderungscharakter 105

106 Kontakt

107 GitHub Repo

108 KONTAKT News Blog über WPF, XAML, Qt, ios UX Design und UI Dev Webinar ab 10:00 Uhr GUI&Design in Berlin am 08. bis 09. Dezember 2015 Vortrag: Beyond XAML and HTML 108

109 Experiment

110

111 Kuh Leichtes Scannen für Auge

112 David C. Thömmes Geschäftsführer Senior Software & UX Engineer Vielen Dank. Shapefield UG (Haftungsbeschränkt) Altenkesseler Str. 17 / C Saarbrücken