Post on 17-Nov-2014
description
WPF UI DEVELOPMENT UNCHAINEDAndré LanningerUI Developer
lanninger@ergosign.de
Ergosign GmbH
David C. ThömmesSoftware EngineerLead Software Engineering Standards thoemmes@ergosign.de
Ergosign GmbH
www.davidchristian.de
UI DEVELOPMENT?
2
UI DEVELOPMENT? USER CENTERED DESIGN
4
DEVELOP
SPECIFY
VALIDATE
DESIGN
ANALYSE
UI DEVELOPMENT? USER CENTERED DESIGN
4
Kontextuelle Analyse
Beobachtungen und semistrukturierte Interviews bei Endanwendern vor Ort.
Konzeptionelles Design
Ein ganzheitlich optimiertes Bedienkonzept bildet die Eckpfeiler des User Interface.
Visuelles Design
Nach einem gemeinsamen Stilfindungsprozess wird anhand der erarbeiteten Vorgaben ein ansprechendes Visuelles Design entwickelt.
Prototyping
Prototypen sind in verschiedenen Phasen der Gestaltung von Bedeutung, beispielsweise im Rahmen von User- und Task-Analyse, Design, Usability Testing oder zur unterstützenden Dokumentation bei der Spezifikation.
Usability Testing
Ein Usability Test mit repräsentativen Endanwendern liefert entscheidende Hinweise zur Optimierung eines User Interface.
SPECIFY
10
UI DEVELOPMENT? USER CENTERED DESIGN
Spezifikation
11
UI DEVELOPMENT? USER CENTERED DESIGN
Spezifikation
11
wtf? :-D
UI DEVELOPMENT? DEKLARATIVE PROGRAMMIERUNG
Reminder - Deklarative Programmierung mit XAML, Styling, Templates...
12
Designer XAML Developer
Button
UI DEVELOPMENT? MODEL VIEW VIEWMODEL
Reminder - Model View ViewModel - Klare Trennung Visualisierung & Logik
13
Präsentation XAML+
Code Behind
Interaktionslogik Daten & Geschäftslogik
View View Model Model
Data Binding
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
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
UI DEVELOPMENT? WPF UI DEVELOPER
16
Stufenmodell
UI DEVELOPMENT? WPF UI DEVELOPER
16
Design Basics Designer & UI Developer Workflow Usability Engineering BasicsFundament
Stufenmodell
UI DEVELOPMENT? WPF UI DEVELOPER
16
Design Basics Designer & UI Developer Workflow Usability Engineering BasicsFundament
Stufe 1 Styles AnimationenControl Templates
XAML Resource ManagementBlend Controls & Layout
Template Binding Trigger & VSM
Data Binding Basics
Stufenmodell
UI DEVELOPMENT? WPF UI DEVELOPER
16
Design Basics Designer & UI Developer Workflow Usability Engineering BasicsFundament
Stufe 1 Styles AnimationenControl Templates
XAML Resource ManagementBlend Controls & Layout
Template Binding Trigger & VSM
Data Binding Basics
Stufe 2 Behaviors
AdornerData Binding Advanced
MVVM
Data Templates Attached Properties
Visual Studio.NETApplication Frameworks
Stufenmodell
UI DEVELOPMENT? WPF UI DEVELOPER
16
Design Basics Designer & UI Developer Workflow Usability Engineering BasicsFundament
Stufe 1 Styles AnimationenControl Templates
XAML Resource ManagementBlend Controls & Layout
Template Binding Trigger & VSM
Data Binding Basics
Stufe 2 Behaviors
AdornerData Binding Advanced
MVVM
Data Templates Attached Properties
Visual Studio.NETApplication Frameworks
Stufe 3 Custom Control Development Custom Layout Panels Miscellaneous
Stufenmodell
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
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
User Centered Design+ Software Engineering+ UI Development
= Application! ;-)
DESIGN UND DEVELOPMENT IM EINKLANG
18
Eigene Prozesse
Design Development
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
20
Abstraktes Vorgehen UI Developer - Styling und Custom Control Development
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
20
Abstraktes Vorgehen UI Developer - Styling und Custom Control Development
DesignAnforderungen
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
20
Abstraktes Vorgehen UI Developer - Styling und Custom Control Development
DesignAnforderungen
UI DevelopmentAnalyse
Abstraktion
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
20
Identifikation
Standard UI Elemente
Custom Controls
Anforderungsanalyse pro Custom Control
Funktionale Anforderungen, Properties, Events, ....
Views
Abstraktes Vorgehen UI Developer - Styling und Custom Control Development
DesignAnforderungen
UI DevelopmentAnalyse
Abstraktion
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
20
Identifikation
Standard UI Elemente
Custom Controls
Anforderungsanalyse pro Custom Control
Funktionale Anforderungen, Properties, Events, ....
Views
Abstraktes Vorgehen UI Developer - Styling und Custom Control Development
DesignAnforderungen DevelopUI Development
Analyse
Abstraktion
21
Designer und UI Developer Schnittstellen...
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
21
Designer und UI Developer Schnittstellen...
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
21
Designer und UI Developer Schnittstellen...
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
21
Designer und UI Developer Schnittstellen...
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
21
Designer und UI Developer Schnittstellen...
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
21
Designer und UI Developer Schnittstellen...
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT
EIN UI...
22
Styling?
Custom Controls?
DER WEG ZUM CUSTOM CONTROL
24
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
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
26
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
26
WPF Standard Control?
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
26
WPF Standard Control?
WPF Standard Controls gruppieren?
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
26
WPF Standard Control?
WPF Standard Controls gruppieren?
Styling & Templating?
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
26
WPF Standard Control?
WPF Standard Controls gruppieren?
Styling & Templating?
ValueConverter/Markup Extensions?
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
26
WPF Standard Control?
WPF Standard Controls gruppieren?
Styling & Templating?
ValueConverter/Markup Extensions?
Attached Properties/Behaviors?
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
26
WPF Standard Control?
WPF Standard Controls gruppieren?
Styling & Templating?
ValueConverter/Markup Extensions?
Attached Properties/Behaviors?
Drittanbieter?
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
26
WPF Standard Control?
WPF Standard Controls gruppieren?
Styling & Templating?
ValueConverter/Markup Extensions?
Attached Properties/Behaviors?
Drittanbieter?
My Custom Controlvs.
Weitere Faktoren zur Entscheidung Custom Control
Prototyp vs. Produktiv-Code
Wiederverwendbarkeit
Konsistenz im User Interface
27
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE
SearchTextBox,
aber nicht als Custom Control!
SEARCHTEXTBOX
29
ANALYSE
30
SEARCHTEXTBOX ANALYSE
31
View Model
SEARCHTEXTBOX ANALYSE
31
View Model
SEARCHTEXTBOX ANALYSE
31
TextBox
View Model
SEARCHTEXTBOX ANALYSE
31
TextBox
View Model
SEARCHTEXTBOX ANALYSE
31
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
TextBox
View Model
SEARCHTEXTBOX ANALYSE
31
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
TextBox
View Model
SEARCHTEXTBOX ANALYSE
31
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Zurücksetzen des Texts)
TextBox
View Model
SEARCHTEXTBOX ANALYSE
31
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Zurücksetzen des Texts)
TextBox
View Model
SEARCHTEXTBOX ANALYSE
31
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Zurücksetzen des Texts)
TextBox
PropertyBinding
View Model
STYLE & TEMPLATE
32
Style & Template(TextBox.xaml)
ATTACHED PROPERTIES
34
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, ...
SEARCHTEXTBOX ATTACHED PROPERTIES
Attached Properties
35
Attached Properties anlegen 1/4
36
> Zentrale Klasse anlegen
37
> Registrieren über statische Funktion
> Name
> Type
> Zugehörige Klasse
> Metadaten
Attached Properties anlegen 2/4
(AttachedProperties.cs)
38
> Statische Funktionen für den Zugriff
> Verwendung der Methoden GetValue(), SetValue()
Attached Properties anlegen 3/4
(AttachedProperties.cs)
39
Attached Properties anlegen 4/4
(TextBox.xaml)
> Wie DependencyProperties verwendbar
> TemplateBinding möglich
> Klasse.PropertyName
READ-ONLY ATTACHED PROPERTIES
40
Von Außen nur lesbar und nicht schreibbar
Verwaltung über internen Schlüssel
DependencyPropertyKey
Besteht aus Schlüssel & Dependency Property
SEARCHTEXTBOX READ-ONLY ATTACHED PROPERTIES
Read-Only Attached Properties
41
42
Read-Only Attached Properties anlegen 1/2
(AttachedProperties.cs)
> Schlüssel registrieren über statische Funktion
> Anlegen der Property
43
Attached Properties anlegen 2/2
(AttachedProperties.cs)
> Verwendung der Methoden GetValue(), SetValue()
44
CommandAction definieren
(AttachedProperties.cs)
> Referenz über CommandParameter
45
TemplateBinding(TextBox.xaml)
> Setzen der Bindings
> Command
> CommandParameter (Referenz)
46
ViewModel Kommunikation
(MainView.xaml)
> Binding an ViewModel Property
SEARCHTEXTBOX ABSCHLUSS
47
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
ClearCommand
(Zurücksetzen des Texts)
TextBox
PropertyBinding
View Model
WAS FINDEN WIR NOCH... ?
48
Styling?
Custom Controls?
CircularProgressBar
CIRCULAR PROGRESSBAR
51
ANALYSE
52
CIRCULAR PROGRESSBAR ANALYSE
53
View Model
CIRCULAR PROGRESSBAR ANALYSE
53
View Model
CIRCULAR PROGRESSBAR ANALYSE
53
ProgressBar
View Model
CIRCULAR PROGRESSBAR ANALYSE
53
ProgressBar
View Model
CIRCULAR PROGRESSBAR ANALYSE
53
ValueAsAngle
ProgressBar
View Model
CIRCULAR PROGRESSBAR ANALYSE
53
ValueAsAngle
ProgressBar
View Model
CIRCULAR PROGRESSBAR ANALYSE
53
ValueAsAngle
ProgressBar
PropertyBinding
View Model
CIRCULAR PROGRESSBAR ANALYSE
53
ValueAsAngle
ProgressBar
PropertyBinding
View Model
STYLE & TEMPLATE
54
Style & Template(ProgressBar.xaml)
> MultiBinding
> Minimum
> Maximum
> Value
=> ValueAsAngle
CONVERTER
56
Implementieren des entsprechenden Interfaces
IValueConverter
IMultiValueConverter
Konvertieren einen/mehrere Wert/e in das gewünschte Format bzw. den gewünschten Typ
CIRCULAR PROGRESSBAR CONVERTER
Converter
57
CIRCULAR PROGRESSBAR CONVERTER
58
Converter - IValueConverter
CIRCULAR PROGRESSBAR CONVERTER
58
Property Typ/FormatA
Converter - IValueConverter
CIRCULAR PROGRESSBAR CONVERTER
58
Property Typ/FormatA
Property Typ/FormatB
Converter - IValueConverter
CIRCULAR PROGRESSBAR CONVERTER
58
Property Typ/FormatA
Property Typ/FormatB
Converter - IValueConverter
Binding
CIRCULAR PROGRESSBAR CONVERTER
58
Property Typ/FormatA
Property Typ/FormatB
Converter - IValueConverter
Converter
Binding
CIRCULAR PROGRESSBAR CONVERTER
59
Converter - IMultiValueConverter
CIRCULAR PROGRESSBAR CONVERTER
59
PropertyTyp/FormatA
Converter - IMultiValueConverter
CIRCULAR PROGRESSBAR CONVERTER
59
PropertyTyp/FormatA
Converter - IMultiValueConverter
PropertyTyp/FormatB
...
CIRCULAR PROGRESSBAR CONVERTER
59
PropertyTyp/FormatA
PropertyTyp/FormatC
Converter - IMultiValueConverter
PropertyTyp/FormatB
...
CIRCULAR PROGRESSBAR CONVERTER
59
PropertyTyp/FormatA
PropertyTyp/FormatC
Converter - IMultiValueConverter
PropertyTyp/FormatB
...
MultiBinding
CIRCULAR PROGRESSBAR CONVERTER
59
PropertyTyp/FormatA
PropertyTyp/FormatC
Converter - IMultiValueConverter
PropertyTyp/FormatB
...
Converter
MultiBinding
Converter 1/3
60
> Klasse anlegen
61
> Interface implementieren
> Convert(...)
> ConvertBack(...)
Converter 2/3(ValueAsAngleConverter.cs)
Converter 3/3(Converters.xaml, ProgressBar.xaml)
> Anlegen als Resource
> Converter Property setzen
63
ViewModel Kommunikation(DataTemplates.xaml)
> Binding an ViewModel Property
CIRCULAR PROGRESSBAR ANALYSE
64
ValueAsAnge
ProgressBar
PropertyBinding
View Model
LOADING INDICATOR
65
ANALYSE
66
LOADING INDICATOR ADORNER
67
LOADING INDICATOR ADORNER
67
LOADING INDICATOR ADORNER
67
LOADING INDICATOR ANALYSE
68
View Model
LOADING INDICATOR ANALYSE
68
View Model
LOADING INDICATOR ANALYSE
68
Beliebiger Content
View Model
LOADING INDICATOR ANALYSE
68
Beliebiger Content
View Model
LOADING INDICATOR ANALYSE
68
Beliebiger Content
View Model
IsLoading
LoadingContent
LoadingTemplate
LoadingDataContext
LOADING INDICATOR ANALYSE
68
Beliebiger Content
View Model
IsLoading
LoadingContent
LoadingTemplate
LoadingDataContext
LOADING INDICATOR ANALYSE
68
Beliebiger Content
PropertyBinding
View Model
IsLoading
LoadingContent
LoadingTemplate
LoadingDataContext
ADORNER LAYER UND ADORNER
69
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
LOADING INDICATOR ADORNER LAYER UND ADORNER
Überblick
70
Implementieren eines Adorners mit Content
Data Template 1/571
> Klasse anlegen
Implementieren eines Adorners mit Content
Data Template 2/5(LoadingBehaviorAdorner.cs)72
> Ableiten von Adorner
> Abstrakte Klasse
> Basisimplementierung
Implementieren eines Adorners mit Content
Data Template 3/5(LoadingBehaviorAdorner.cs)73
> Member definieren
> Properties definieren
Implementieren eines Adorners mit Content
Data Template 4/5(LoadingBehaviorAdorner.cs)74
> Überschreiben von Methoden zur korrekten Darstellung des Contents
Implementieren eines Adorners mit Content
Data Template 5/5(LoadingBehaviorAdorner.cs)75
> Elemente initialisieren
Adorner manuell verwendet
(MainView.xaml.cs)76
BEHAVIOR
77
Behavior verwenden und den Source-Code zur Adorner-Erzeugung und Verwaltung zentral zu definieren
Per Behavior die Circular ProgressBar innerhalb des Adorner darstellen
Behavior steuert das Verhalten
LOADING INDICATOR BEHAVIOR
Idee
78
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
LOADING INDICATOR BEHAVIOR
Behavior
79
Implementieren einer Behavior 1/6
80
> Klasse anlegen
Implementieren einer Behavior 2/6
(LoadingBehavior.cs)81
> Ableiten von Behavior<T> wobei T den Typ des AssociatedObjects widerspiegelt
> Überschreiben der Methoden OnAttached(), OnDetaching()
Implementieren einer Behavior 3/6
(LoadingBehavior.cs)82
> Anlegen der Properties & Property Changed Callbacks
Implementieren einer Behavior 4/6
(LoadingBehavior.cs)83
> Unser Adorner verwenden
> Get AdornerLayer
> Adorner anlegen
> Parameter = AdorneredElement
Implementieren einer Behavior 5/6
(LoadingBehavior.cs)84
> Hinzufügen/Löschen des Adorners aus dem dazugehörigen AdornerLayer
Implementieren einer Behavior 6/6
(MainView.xaml)85
> LoadingBehavior zum gewünschten Element hinzufügen
86
ViewModel Kommunikation(DataTemplates.xaml)
> Binding an ViewModel Property
LOADING INDICATOR ANALYSE
87
Beliebiger Content
PropertyBinding
View Model
IsLoading
LoadingContent
LoadingTemplate
LoadingDataContext
BEHAVIOR VS. ATTACHED PROPERTIES
88
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
LOADING INDICATOR BEHAVIOR VS. ATTACHED PROPERTIES
AttachedProperties
89
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.
LOADING INDICATOR BEHAVIOR VS. ATTACHED PROPERTIES
Behavior
90
DA WAR DOCH NOCH WAS...
91
PointChart
FAZIT
93
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
FRAGEN?
95
VIELEN DANK.
www.ergosign.decontact@ergosign.de
Ergosign GmbHAdams-Lehmann-Straße 4480797 MünchenGermany
T +49 89 6890607-0F +49 89 6890607-10
T +49 681 988412-0F +49 681 988412-10
Ergosign GmbHEuropaallee 1266113 SaarbrückenGermany
Ergosign GmbHBernhard-Nocht-Straße 10920359 HamburgGermany
T +49 40 3179868-0F +49 40 3179868-10
Ergosign Switzerland AGBadenerstrasse 8088048 ZürichSwitzerland
T +41 44 54293-04F +41 44 54293-07
VIELEN DANK.
Ein benutzerzentrierter Prozess ist Voraussetzung für das Design einer positiven User Experience.