XAML UI DEVELOPMENT BEST PRACTICES 2.0

XAML UI DEVELOPMENT BEST

PRACTICES 2.0THOEMMES@DAVIDCHRISTIAN.DE

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

DCT’S UI DEVELOPMENT STAGES!

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!“

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!“

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!“

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!“

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

Iterativer Prozess mit Rücksprüngen

RESOURCE MANAGEMENT: REVISITED

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

Styling Projekt

Feingranulare Struktur

Colors & Brushes

Auslagern von Colors und

Brushes

Farbpalette des UI Designs als Color Objekte anlegen

Aus Colors

Brushes erstellen

Settings & Typo

Konstanten, Pfade,

Schriftgrößen,

Fonts ...

Settings & Typo

Definition der Schrift-Layer (Größen)

Styles

Pro Control-Typ eigenes

Resource Dictionary

Fokus auf Style Setter und Control Template

Look and Feel Resource Dictionary

Ein Resource Dictionary das alle

Ressourcen beinhaltet

Kann später in App.xaml

eingebunden werden

Reihenfolge beachten!

Look and Feel Resource Dictionary

Einfaches einbinden...

Vorsicht Performance!

Führt zu Mehrfachanlegung

SHARED RESOURCE DICTIONARY IST OK …

ALTERNATIVE RESMERGER!

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!

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

ResMeger - Performance

Startup Time MS Startup RAM MB

Ohne ResMerger ~3600 - 4500 ~115

Res Merger ~500 - 600 ~30

Steigerung Performance

• Startup Time ca. 85%

• RAM ca. 75%

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

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

ICON FONTS

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!

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

Icon Fonts systematisch verwenden

• Ein Glyph per Datentyp mit weiteren Informationen kapseln (FontIcon)

• Schriftfamilie

• Char Code

• …

• Darstellung über implizite DataTemplate

• Verwendung über beliebigen ContentPresenter

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?

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

PNG Als ImageSource

DataTemplate Mit Image Control

XAML Icons DrawingBrush und Geometry

DataTemplate Path oder Rectangle

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, ...

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)

Mehr Beispiele UI Development Unchained Vortrag ;-)

Attached Properties vs. Custom Controls

KAPITELTITEL

ATTACHED PROPERTIES CUSTOM CONTROL ABLEITUNG

KAPITELTITEL

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

Hoch, wenn Ableitung möglich

KAPITELTITEL

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

KAPITELTITEL

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

KAPITELTITEL

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

KAPITELTITEL

ERWEITERBARKEIT Gut Gut

KAPITELTITEL

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

Einfacherer

KAPITELTITEL

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

Einfacherer

REUSE Gut Gut (Custom Control Library)

KAPITELTITEL

BLEND INTERACTIVITY

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

Blend öffnen Behaviors anschauen

PROPERTY AUS USERCONTROL AUF WINDOW SETZEN?

ChangePropertyAction Kombiniert mit FindAncestor Binding!

COMMAND OHNE COMMAND PROPERTY AUSLÖSEN?

InvokeCommandAction Beispiel Daten einer ComboBox bei GotFocus

XAML STYLER

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

Beautify Über Context Menu

Überblick Leichtes Scannen für Auge

• 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/

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

WPF Inspector

• Open-Source Spy Util

• Visual Tree einer Applikation anschauen

• Properties lesen und setzen

• Debugging

• http://wpfinspector.codeplex.com/

Visual Tree Darstellung der Controls

PERFORATOR

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

Render Verhalten

Fake Beispiel mit schlechter Performance... (DropShadow auf

Window)

RESMERGER!

KONTAKT!

http://www.davidchristian.de

Better Call WPF DCT!

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 THOEMMES@DAVIDCHRISTIAN.DE

UI DEVELOPMENT & CONSULTING IT-BERATUNG UND SOFTWAREENTWICKLUNG

DAVID C. THÖMMES

XAML UI DEVELOPMENT BEST PRACTICES 2.0

Software

Transcript of XAML UI DEVELOPMENT BEST PRACTICES 2.0

New Minimalism in UI Design

ui Ausgabe 83 / 08.11

WPF 4.5 und XAML - files.hanser.defiles.hanser.de/Files/Article/ARTK_STV_9783446434677_0001.pdf · Stichwortverzeichnis Jörg Wegener WPF 4.5 und XAML Grafische Benutzeroberflächen

Tutoriat - UI Prototyping | Strukturprototypen

Aktuelle BPM Best Practices

Datenblatt DB DE MINI MCR-2-UI-UI · MINI MCR-2-UI-UI 106006_de_00 PHOENIX CONTACT 6 Allgemeine Daten Grenzfrequenz (3 dB) 30 Hz (über DIP-Schalter) 5 kHz (über DIP-Schalter) Übertragungsfehler

ui 85 / 10.11

Grundlagen des UI Designs

ui 92 / 05.12

Frontend Best Practices

CSS Best Practices

ui 79 / 04.11

Descompensación Cetoacidótica en el Enfermo Diabéticoredgdps.org/gestor/upload/file/IX Curso residentes... · bolus ev 0,15 UI/kg (10 UI) mantenimiento 0,10 UI/kg/h (6-8 UI/h)

ui 77 / 02.11

StarCapital Bondvalue UI - fondsvermittlung24.de€¦ · StarCapital Bondvalue UI Seite 1 Der Kauf und Verkauf von Anteilen an dem Sondervermögen StarCapital Bondvalue UI er-folgt

ui 97 / 10.12

ui 102 / 04.13

WPF UI-Development Best Practices

ui 76 / 01.11

ui 95 / 08.12