Follow our Experts: https://twitter.com/TimKlauck - https://twitter.com/ergosign
Eine herausragende User Experience interaktiver Produkte setzt einen benutzer-zentrierten Designprozess voraus. Dies allein ist jedoch nicht hinreichend. Erst eine gekonnte software-technische Umsetzung sorgt dafür, dass ein gutes Design auch beim Anwender "ankommt". Tauchen Sie deshalb in die Welt des WPF UI Developments ein und erfahren Sie mehr darüber, wie ein ausgestaltetes UX Design ohne Kompromisse realisiert werden kann. Lernen Sie neben grundlegenden Techniken auch fortgeschrittene Themen wie beispielsweise Attached Properties sowie Behaviors kennen und lassen Sie sich von der Vielfalt des WPF Custom Control Developments begeistern. Neben der technischen Umsetzung spielen auch die Etablierung des UI Developments sowie dazugehörige Workflows, Rollen und Verantwortlichkeiten eine zentrale Rolle.
1. WPF UI DEVELOPMENT UNCHAINED
David C. Thömmes
Software Engineer
Lead Software Engineering Standards
thoemmes@ergosign.de
André Lanninger
UI Developer
Ergosign GmbH
Ergosign GmbH
www.davidchristian.de
lanninger@ergosign.de
9. Visuelles Design
Nach einem gemeinsamen
Stilfindungsprozess wird anhand der
erarbeiteten Vorgaben ein
ansprechendes Visuelles Design
entwickelt.
10. Prototyping
Prototypen sind in verschiedenen
Phasen der Gestaltung von Bedeutung,
beispielsweise im Rahmen von Userund Task-Analyse, Design, Usability
Testing oder zur unterstützenden
Dokumentation bei der Spezifikation.
11. Usability Testing
Ein Usability Test mit repräsentativen
Endanwendern liefert entscheidende
Hinweise zur Optimierung eines User
Interface.
16. UI DEVELOPMENT? MODEL VIEW VIEWMODEL
Reminder - Model View ViewModel - Klare Trennung
Visualisierung & Logik
View
Präsentation XAML
+
Code Behind
Data Binding
View
Model
Model
Interaktionslogik
Daten & Geschäftslogik
13
17. UI DEVELOPMENT? ABER WAS SIND DIE PROBLEME?
Probleme
Komplexität und Umfang der Dokumente (Style Guide, etc.)
Interpretationsfreiräume des Software Engineers
Know-how zur Realisierung fehlt
Allgemein UI Development unterbewertet
14
18. UI DEVELOPMENT? ABER WAS SIND DIE PROBLEME?
UI Developer als Schlüsselelement
Lösung
Rolle „UI Developer“ mit eigener Wissensbasis forcieren
Fokus UI Development
Zwischen UX Designer und Software Engineer aktiv
angesiedelt
Schicht Präsentation und Interaktion
Styling, Templating, Layouting, Views, ViewModels, Custom
Control Development...
15
23. UI DEVELOPMENT? WPF UI DEVELOPER
Stufenmodell
Stufe 3
Custom Control Development
Stufe 2
MVVM
Application Frameworks
Data Binding Advanced
Stufe 1
Styles
Design Basics
Blend
.NET
Data Templates
Control Templates
XAML
Fundament
Custom Layout Panels
Attached Properties
Template Binding
Controls & Layout
Visual Studio
Animationen
Resource Management
Usability Engineering Basics
Miscellaneous
Behaviors
Adorner
Trigger & VSM
Data Binding Basics
Designer & UI Developer Workflow
16
24. UI DEVELOPMENT? FAZIT
Zusammenfassung
UI Development muss als eigene Disziplin innerhalb des
Software Engineerings verstanden werden!
UX Design ist die Basis für UI Development
Ein benutzer-zentrierter Designprozess ist essentiell!
17
25. UI DEVELOPMENT? FAZIT
Zusammenfassung
UI Development muss als eigene Disziplin innerhalb des
Software Engineerings verstanden werden!
UX Design ist die Basis für UI Development
Ein benutzer-zentrierter Designprozess ist essentiell!
User Centered Design
+ Software Engineering
+ UI Development
= Application! ;-)
17
28. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
Abstraktes Vorgehen UI Developer - Styling und
Custom Control Development
20
29. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
Abstraktes Vorgehen UI Developer - Styling und
Custom Control Development
Design
Anforderungen
20
30. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
Abstraktes Vorgehen UI Developer - Styling und
Custom Control Development
Design
Anforderungen
Abstraktion
UI Development
Analyse
20
31. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
Abstraktes Vorgehen UI Developer - Styling und
Custom Control Development
Design
Anforderungen
Abstraktion
UI Development
Analyse
Identifikation
Standard UI Elemente
Custom Controls
Anforderungsanalyse pro Custom Control
Funktionale Anforderungen, Properties, Events, ....
Views
20
32. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
Abstraktes Vorgehen UI Developer - Styling und
Custom Control Development
Design
Anforderungen
Abstraktion
UI Development
Analyse
Develop
Identifikation
Standard UI Elemente
Custom Controls
Anforderungsanalyse pro Custom Control
Funktionale Anforderungen, Properties, Events, ....
Views
20
33. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
Designer und UI Developer Schnittstellen...
21
34. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
Designer und UI Developer Schnittstellen...
21
35. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
Designer und UI Developer Schnittstellen...
21
36. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
Designer und UI Developer Schnittstellen...
21
37. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
Designer und UI Developer Schnittstellen...
21
38. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
Designer und UI Developer Schnittstellen...
21
42. DER WEG ZUM CUSTOM CONTROL DEFINITION CUSTOM CONTROL
Reminder - Eigentlich “nur”
Ableitung von einer konkreten Klasse != UserControl
Styling- und Template- Möglichkeiten
Visueller Aufbau im Control Template
Default Style möglich Generic.xaml
Zusammenfassung in einer Control Library möglich
25
43. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
26
44. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
WPF Standard Control?
26
45. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
WPF Standard Control?
WPF Standard Controls
gruppieren?
26
46. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?
26
47. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?
ValueConverter/Markup
Extensions?
26
48. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?
ValueConverter/Markup
Extensions?
Attached Properties/Behaviors?
26
49. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?
ValueConverter/Markup
Extensions?
Attached Properties/Behaviors?
Drittanbieter?
26
50. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
WPF Standard Control?
WPF Standard Controls
gruppieren?
Styling & Templating?
vs.
My Custom Control
ValueConverter/Markup
Extensions?
Attached Properties/Behaviors?
Drittanbieter?
26
51. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
Weitere Faktoren zur Entscheidung Custom
Control
Prototyp vs. Produktiv-Code
Wiederverwendbarkeit
Konsistenz im User Interface
27
67. SEARCHTEXTBOX ATTACHED PROPERTIES
Attached Properties
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
Grid.Row, Grid.Column, ...
35
73. SEARCHTEXTBOX READ-ONLY ATTACHED PROPERTIES
Read-Only Attached Properties
Von Außen nur lesbar und nicht schreibbar
Verwaltung über internen Schlüssel
DependencyPropertyKey
Besteht aus Schlüssel & Dependency Property
41
74. > Schlüssel registrieren über statische
Funktion
> Anlegen der Property
Read-Only Attached
Properties anlegen 1/2
(AttachedProperties.cs)
42
126. LOADING INDICATOR ADORNER LAYER UND ADORNER
Überblick
AdornerLayer = zusätzliche Zeichen/Renderebene
Möglichkeit Inhalte über einem Control darzustellen
Adorner repräsentieren die Inhalte in einem AdornerLayer
Adorner werden in den nächst liegenden AdornerDecorator
platziert (Default von Window)
Adorner selbst müssen implementiert werden!
Beispielsweise Darstellung eines Button im Adorner
70
128. > Ableiten von Adorner
> Abstrakte Klasse
> Basisimplementierung
Implementieren eines
Adorners mit Content
Data Template 2/5
(LoadingBehaviorAdorner.cs)
72
129. > Member definieren
> Properties definieren
Implementieren eines
Adorners mit Content
Data Template 3/5
(LoadingBehaviorAdorner.cs)
73
130. > Überschreiben von Methoden
zur korrekten Darstellung des
Contents
Implementieren eines
Adorners mit Content
Data Template 4/5
(LoadingBehaviorAdorner.cs)
74
134. LOADING INDICATOR BEHAVIOR
Idee
Behavior verwenden und den Source-Code zur AdornerErzeugung und Verwaltung zentral zu definieren
Per Behavior die Circular ProgressBar innerhalb des Adorner
darstellen
Behavior steuert das Verhalten
78
135. LOADING INDICATOR BEHAVIOR
Behavior
Kapselt eine gewisse Funktionalität und Logik in eine
wiederverwendbare Klasse
Kann an eine beliebiges Control „angeheftet“ werden
Repräsentiert durch die Klasse Behavior<T>
wobei T = Typ des AssociatedObjects
Override Methoden OnAttached(), OnDetaching() und
Property AssociatedObject bieten dem Entwickler volle
Flexibilität sowie Kontrolle
79
137. > Ableiten von Behavior<T>
wobei T den Typ des
AssociatedObjects
widerspiegelt
> Überschreiben der
Methoden OnAttached(),
OnDetaching()
Implementieren einer
Behavior 2/6
(LoadingBehavior.cs)
81
138. > Anlegen der Properties &
Property Changed
Callbacks
Implementieren einer
Behavior 3/6
(LoadingBehavior.cs)
82
145. LOADING INDICATOR BEHAVIOR VS. ATTACHED PROPERTIES
AttachedProperties
Da AttachedProperties statisch angelegt werden, sollten sie
nur zur:
weiteren Eigenschaftsbeschreibung (Watermark,
CornerRadius usw.)
oder zur Realisierung überschaubarer
Zusatzfunktionalität (ClearCommand) verwendet werden.
Nachteil Referenz Problem
89
146. LOADING INDICATOR BEHAVIOR VS. ATTACHED PROPERTIES
Behavior
Behaviors hingegen bieten die Möglichkeit komplexeren
Code in eine wiederverwendbare Klassen zu kapseln
(LoadingBehavior)
Mittels AssociatedObject, AssociatedType, OnAttached(),
OnDetaching() möglichst große Flexibilität und Komfort.
90
150. FAZIT
Fazit
Denken Sie an einen benutzer-zentrierten Designprozess
Schätzen Sie gutes UI Development
Reizen Sie die Möglichkeiten von WPF aus! (Keine halben
Sachen)
Legen Sie Wert auf Struktur und Konsistenz während der
Entwicklung
94