XAML UI Development Best Practices 2.0 David C. Thömmes Geschäftsführer Senior Software & UX Engineer [email protected] Shapefield UG (Haftungsbeschränkt) Altenkesseler Str. 17 / C1 66115 Saarbrücken www.shapefield.de „Weil jeder Nutzer das optimale Erleben digitaler Produkte verdient und wir jeden Tag die Welt etwas verbessern können!“ User Experience 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 Werbung MS Truck! Verkauf Produkt Usability Gutes Design? Mehr Funktion erhöht die Komplexität… Verbesserungen? Hilfe durch Benutzer selbst… 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 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 Und was macht der Markt? „Es läuft und wir haben für jede Funktion einen Button!“ „Wir haben nun DataGrids mit Filtern und ein Ribbon von Microsoft!“ „Das Konzept ist geil aber zu aufwändig und zu teuer in der Entwicklung!“ Klar und aufgeräumt „Bedient sich echt geil! Die Benutzer lieben es!“ Neue Technologien sind das Toolkit! User-centered Design der Weg… DESIGNPROZESS (USER-CENTERED DESIGN Iterativer Prozess mit Rücksprüngen 21 Resource Management: Revisited 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 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Styling Projekt 25 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Styling Projekt Feingranulare Struktur 26 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Colors und Brushes Auslagern von Colors und Brushes 27 Farbpalette des UI Designs als Color Objekte anlegen (Redundanzfrei) Aus Colors Brushes erstellen XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Settings Konstanten, Pfade, Schriftgrößen, Fonts ... 30 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Settings und Typo Definition der Schrift-Layer (Größen) 31 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Styles und Control-Templates für Controls Pro Control-Typ eigenes Resource Dictionary 32 Fokus auf Style Setter und Control Template Kompakter XAML Source-Code 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 Reihenfolge beachten! XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Look and Feel Resource Dictionary Einfaches einbinden... 36 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Vorsicht Performance! Führt zu Mehrfachanlegung 37 Shared Resource Dictionary ist ok … Alternative ResMerger! 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 Einbindung CLI Tool im Pre Build FullLookAndFeel Beinhaltet alle Ressourcen in einer Datei! XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT Experiment • Projekt mit mittlerem Styling Projekt • ca. 10.000 XAML Zeilen • 12 Demo Views in Showcase (Hülle) • Keine reale Datenanbindung 44 XAML UI DEVELOPMENT BEST PRACTICES - RESOURCE MANAGEMENT ResMeger - Performance Startup Time MS Startup RAM MB Ohne ResMerger ~3600 - 4500 ~115 Res Merger ~500 - 600 ~30 45 GitHub https://github.com/dctdct/WPFResMerger Icons Icon Fonts 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 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 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 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! Implizite DataTemplate Ohne x:Key und TextBlock mit diversen Bindings Verwenden Easy!!!! Free Custom Icon Fonts Fontello, Font Awesome, … ! PNG und XAML Icons? 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 PNG Als ImageSource DataTemplate Mit Image Control XAML Icons DrawingBrush und Geometry DataTemplate Path oder Rectangle Attached Properties 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 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… Verschachteln Ohne Problem möglich! Footer Beispiel Attached für Footer DataTemplate In ControlTemplate ContentPresenter 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 Mehr Beispiele… 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 Tools Neue Tools in VS 2015 Xaml Styler XAML UI DEVELOPMENT BEST PRACTICES - TOOLS 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 85 Beautify Über Context Menu Überblick Leichtes Scannen für Auge Snoop 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 • https://snoopwpf.codeplex.com/ 89 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 XAML UI DEVELOPMENT BEST PRACTICES - TOOLS WPF Inspector • Open-Source Spy Util • Visual Tree einer Applikation anschauen • Properties lesen und setzen • Debugging • http://wpfinspector.codeplex.com/ 97 Visual Tree Darstellung der Controls Perforator XAML UI DEVELOPMENT BEST PRACTICES - TOOLS 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 100 Render Verhalten Fake Beispiel mit schlechter Performance... (DropShadow auf Window) ResMerger! Shapefield 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 SHAPEFIELD User Interface Veredelung • Gestaltung eines ästhetischen, visuellen Designs • Konzeptionelles Design bleibt unberührt (Navigation etc.) • Form, Farbe, Effekte, Proportionen, Aufforderungscharakter… 105 Kontakt GitHub Repo https://github.com/dctdct/WPF-UI-Development-Best-Practices KONTAKT News • Blog über WPF, XAML, Qt, iOS … • http://www.davidchristian.de • https://twitter.com/dctdev • UX Design und UI Dev Webinar • 27.11.2015 ab 10:00 Uhr • GUI&Design in Berlin am 08. bis 09. Dezember 2015 • Vortrag: Beyond XAML and HTML 108 Experiment Kuh Leichtes Scannen für Auge David C. Thömmes Geschäftsführer Senior Software & UX Engineer [email protected] Vielen Dank. Shapefield UG (Haftungsbeschränkt) Altenkesseler Str. 17 / C1 66115 Saarbrücken www.shapefield.de
© Copyright 2024 ExpyDoc
