WPF UI DEVELOPMENT UNCHAINED
David C. Thömmes
Software Engineer
Lead Software Engineering Standards
thoemmes@ergosign.de

...
UI DEVELOPMENT?

2
UI DEVELOPMENT? USER CENTERED DESIGN

4
UI DEVELOPMENT? USER CENTERED DESIGN

DESIGN

ANALYSE

SPECIFY

VALIDATE

DEVELOP

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 Visuel...
Prototyping
Prototypen sind in verschiedenen
Phasen der Gestaltung von Bedeutung,
beispielsweise im Rahmen von Userund Tas...
Usability Testing
Ein Usability Test mit repräsentativen
Endanwendern liefert entscheidende
Hinweise zur Optimierung eines...
SPECIFY

10
UI DEVELOPMENT? USER CENTERED DESIGN

Spezifikation

11
UI DEVELOPMENT? USER CENTERED DESIGN

Spezifikation

wtf? :-D
11
UI DEVELOPMENT? DEKLARATIVE PROGRAMMIERUNG

Reminder - Deklarative Programmierung mit XAML,
Styling, Templates...

Button
...
UI DEVELOPMENT? MODEL VIEW VIEWMODEL

Reminder - Model View ViewModel - Klare Trennung
Visualisierung & Logik

View

Präse...
UI DEVELOPMENT? ABER WAS SIND DIE PROBLEME?

Probleme
Komplexität und Umfang der Dokumente (Style Guide, etc.)
Interpretat...
UI DEVELOPMENT? ABER WAS SIND DIE PROBLEME?

UI Developer als Schlüsselelement
Lösung
Rolle „UI Developer“ mit eigener Wis...
UI DEVELOPMENT? WPF UI DEVELOPER

Stufenmodell

16
UI DEVELOPMENT? WPF UI DEVELOPER

Stufenmodell

Fundament

Design Basics

Usability Engineering Basics

Designer & UI Deve...
UI DEVELOPMENT? WPF UI DEVELOPER

Stufenmodell

Stufe 1

Styles

Control Templates

XAML

Fundament

Design Basics

Blend
...
UI DEVELOPMENT? WPF UI DEVELOPER

Stufenmodell

Stufe 2

MVVM

Application Frameworks

Data Binding Advanced

Stufe 1

Sty...
UI DEVELOPMENT? WPF UI DEVELOPER

Stufenmodell
Stufe 3

Custom Control Development

Stufe 2

MVVM

Application Frameworks
...
UI DEVELOPMENT? FAZIT

Zusammenfassung
UI Development muss als eigene Disziplin innerhalb des
Software Engineerings versta...
UI DEVELOPMENT? FAZIT

Zusammenfassung
UI Development muss als eigene Disziplin innerhalb des
Software Engineerings versta...
DESIGN UND DEVELOPMENT IM EINKLANG

18
Design

Development

Eigene Prozesse
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Abstraktes Vorgehen UI Developer - Styling und
Custom Control Developme...
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Abstraktes Vorgehen UI Developer - Styling und
Custom Control Developme...
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Abstraktes Vorgehen UI Developer - Styling und
Custom Control Developme...
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Abstraktes Vorgehen UI Developer - Styling und
Custom Control Developme...
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Abstraktes Vorgehen UI Developer - Styling und
Custom Control Developme...
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Designer und UI Developer Schnittstellen...

21
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Designer und UI Developer Schnittstellen...

21
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Designer und UI Developer Schnittstellen...

21
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Designer und UI Developer Schnittstellen...

21
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Designer und UI Developer Schnittstellen...

21
DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT

Designer und UI Developer Schnittstellen...

21
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 != ...
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

26
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

WPF Standard Control?

26
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

WPF Standard Control?

WPF Standard Controls
gruppieren?

26
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

WPF Standard Control?

WPF Standard Controls
gruppieren?

Styling & ...
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

WPF Standard Control?

WPF Standard Controls
gruppieren?

Styling & ...
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

WPF Standard Control?

WPF Standard Controls
gruppieren?

Styling & ...
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

WPF Standard Control?

WPF Standard Controls
gruppieren?

Styling & ...
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

WPF Standard Control?

WPF Standard Controls
gruppieren?

Styling & ...
DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE

Weitere Faktoren zur Entscheidung Custom
Control
Prototyp vs. Produk...
SearchTextBox,
aber nicht als Custom
Control!
SEARCHTEXTBOX

29
ANALYSE

30
SEARCHTEXTBOX ANALYSE

View Model

31
SEARCHTEXTBOX ANALYSE

View Model

31
SEARCHTEXTBOX ANALYSE

View Model

TextBox

31
SEARCHTEXTBOX ANALYSE

View Model

TextBox

31
SEARCHTEXTBOX ANALYSE

View Model

TextBox

Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground

31
SEARCHTEXTBOX ANALYSE

View Model

TextBox

Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground

31
SEARCHTEXTBOX ANALYSE

View Model

TextBox

Watermark
WatermarkFontStyle

ClearCommand

WatermarkFontWeight

(Zurücksetzen...
SEARCHTEXTBOX ANALYSE

View Model

TextBox

Watermark
WatermarkFontStyle

ClearCommand

WatermarkFontWeight

(Zurücksetzen...
SEARCHTEXTBOX ANALYSE

View Model

PropertyBinding

TextBox

Watermark
WatermarkFontStyle

ClearCommand

WatermarkFontWeig...
STYLE & TEMPLATE

32
Style & Template
(TextBox.xaml)
ATTACHED PROPERTIES

34
SEARCHTEXTBOX ATTACHED PROPERTIES

Attached Properties
Gleich wie Dependency Properties
Metadaten und Speicherperformance,...
> Zentrale Klasse anlegen

Attached Properties
anlegen 1/4
36
> Registrieren über statische Funktion
> Name
> Type
> Zugehörige Klasse
> Metadaten

Attached Properties
anlegen 2/4
(Att...
> Statische Funktionen für
den Zugriff
> Verwendung der Methoden
GetValue(), SetValue()

Attached Properties
anlegen 3/4
(...
> Wie DependencyProperties
verwendbar
> TemplateBinding möglich
> Klasse.PropertyName

Attached Properties
anlegen 4/4
(Te...
READ-ONLY ATTACHED PROPERTIES

40
SEARCHTEXTBOX READ-ONLY ATTACHED PROPERTIES

Read-Only Attached Properties
Von Außen nur lesbar und nicht schreibbar

Verw...
> Schlüssel registrieren über statische
Funktion

> Anlegen der Property

Read-Only Attached
Properties anlegen 1/2
(Attac...
> Verwendung der Methoden
GetValue(), SetValue()

Attached Properties
anlegen 2/2
(AttachedProperties.cs)
43
> Referenz über
CommandParameter

CommandAction
definieren
(AttachedProperties.cs)
44
> Setzen der Bindings
> Command
> CommandParameter
(Referenz)

TemplateBinding
(TextBox.xaml)
45
> Binding an ViewModel
Property

ViewModel
Kommunikation
(MainView.xaml)
46
SEARCHTEXTBOX ABSCHLUSS

View Model

PropertyBinding

TextBox

Watermark
WatermarkFontStyle

ClearCommand

WatermarkFontWe...
WAS FINDEN WIR NOCH... ?

48
Styling?
Custom Controls?
CircularProgressBar
CIRCULAR PROGRESSBAR

51
ANALYSE

52
CIRCULAR PROGRESSBAR ANALYSE

View Model

53
CIRCULAR PROGRESSBAR ANALYSE

View Model

53
CIRCULAR PROGRESSBAR ANALYSE

View Model

ProgressBar

53
CIRCULAR PROGRESSBAR ANALYSE

View Model

ProgressBar

53
CIRCULAR PROGRESSBAR ANALYSE

View Model

ProgressBar

ValueAsAngle

53
CIRCULAR PROGRESSBAR ANALYSE

View Model

ProgressBar

ValueAsAngle

53
CIRCULAR PROGRESSBAR ANALYSE

View Model

PropertyBinding

ProgressBar

ValueAsAngle

53
CIRCULAR PROGRESSBAR ANALYSE

View Model

PropertyBinding

ProgressBar

ValueAsAngle

53
STYLE & TEMPLATE

54
> MultiBinding
> Minimum
> Maximum
> Value
=> ValueAsAngle

Style & Template
(ProgressBar.xaml)
CONVERTER

56
CIRCULAR PROGRESSBAR CONVERTER

Converter
Implementieren des entsprechenden Interfaces
IValueConverter
IMultiValueConverte...
CIRCULAR PROGRESSBAR CONVERTER

Converter - IValueConverter

58
CIRCULAR PROGRESSBAR CONVERTER

Converter - IValueConverter

Property
Typ/FormatA

58
CIRCULAR PROGRESSBAR CONVERTER

Converter - IValueConverter

Property
Typ/FormatA

Property
Typ/FormatB

58
CIRCULAR PROGRESSBAR CONVERTER

Converter - IValueConverter

Binding
Property
Typ/FormatA

Property
Typ/FormatB

58
CIRCULAR PROGRESSBAR CONVERTER

Converter - IValueConverter

Binding
Property
Typ/FormatA

Converter

Property
Typ/FormatB...
CIRCULAR PROGRESSBAR CONVERTER

Converter - IMultiValueConverter

59
CIRCULAR PROGRESSBAR CONVERTER

Converter - IMultiValueConverter

Property
Typ/FormatA

59
CIRCULAR PROGRESSBAR CONVERTER

Converter - IMultiValueConverter

Property
Typ/FormatA

Property
Typ/FormatB

...
59
CIRCULAR PROGRESSBAR CONVERTER

Converter - IMultiValueConverter

Property
Typ/FormatA
Property
Typ/FormatC
Property
Typ/F...
CIRCULAR PROGRESSBAR CONVERTER

Converter - IMultiValueConverter

Property
Typ/FormatA

MultiBinding
Property
Typ/FormatC
...
CIRCULAR PROGRESSBAR CONVERTER

Converter - IMultiValueConverter

Property
Typ/FormatA

MultiBinding
Converter

Property
T...
> Klasse anlegen

Converter 1/3
60
> Interface implementieren
> Convert(...)
> ConvertBack(...)

Converter 2/3
(ValueAsAngleConverter.cs)
61
> Anlegen als Resource
> Converter Property
setzen

Converter 3/3
(Converters.xaml,
ProgressBar.xaml)
> Binding an ViewModel
Property

ViewModel
Kommunikation
(DataTemplates.xaml)
63
CIRCULAR PROGRESSBAR ANALYSE

View Model

PropertyBinding

ProgressBar

ValueAsAnge

64
LOADING INDICATOR

65
ANALYSE

66
LOADING INDICATOR ADORNER

67
LOADING INDICATOR ADORNER

67
LOADING INDICATOR ADORNER

67
LOADING INDICATOR ANALYSE

View Model

68
LOADING INDICATOR ANALYSE

View Model

68
LOADING INDICATOR ANALYSE

View Model

Beliebiger Content

68
LOADING INDICATOR ANALYSE

View Model

Beliebiger Content

68
LOADING INDICATOR ANALYSE

View Model

IsLoading

Beliebiger Content

LoadingContent
LoadingTemplate
LoadingDataContext

6...
LOADING INDICATOR ANALYSE

View Model

IsLoading

Beliebiger Content

LoadingContent
LoadingTemplate
LoadingDataContext

6...
LOADING INDICATOR ANALYSE

View Model

PropertyBinding

IsLoading

Beliebiger Content

LoadingContent
LoadingTemplate
Load...
ADORNER LAYER UND ADORNER

69
LOADING INDICATOR ADORNER LAYER UND ADORNER

Überblick
AdornerLayer = zusätzliche Zeichen/Renderebene
Möglichkeit Inhalte ...
> Klasse anlegen

Implementieren eines
Adorners mit Content
Data Template 1/5
71
> Ableiten von Adorner
> Abstrakte Klasse
> Basisimplementierung

Implementieren eines
Adorners mit Content
Data Template ...
> Member definieren

> Properties definieren

Implementieren eines
Adorners mit Content
Data Template 3/5
(LoadingBehavior...
> Überschreiben von Methoden
zur korrekten Darstellung des
Contents

Implementieren eines
Adorners mit Content
Data Templa...
> Elemente initialisieren

Implementieren eines
Adorners mit Content
Data Template 5/5
(LoadingBehaviorAdorner.cs)
75
Adorner manuell
verwendet
(MainView.xaml.cs)
76
BEHAVIOR

77
LOADING INDICATOR BEHAVIOR

Idee
Behavior verwenden und den Source-Code zur AdornerErzeugung und Verwaltung zentral zu def...
LOADING INDICATOR BEHAVIOR

Behavior
Kapselt eine gewisse Funktionalität und Logik in eine
wiederverwendbare Klasse
Kann a...
> Klasse anlegen

Implementieren einer
Behavior 1/6
80
> Ableiten von Behavior<T>
wobei T den Typ des
AssociatedObjects
widerspiegelt

> Überschreiben der
Methoden OnAttached(),...
> Anlegen der Properties &
Property Changed
Callbacks

Implementieren einer
Behavior 3/6
(LoadingBehavior.cs)
82
> Unser Adorner verwenden
> Get AdornerLayer

> Adorner anlegen
> Parameter = AdorneredElement

Implementieren einer
Behav...
> Hinzufügen/Löschen des
Adorners aus dem
dazugehörigen
AdornerLayer

Implementieren einer
Behavior 5/6
(LoadingBehavior.c...
> LoadingBehavior zum
gewünschten Element
hinzufügen

Implementieren einer
Behavior 6/6
(MainView.xaml)
85
> Binding an ViewModel
Property

ViewModel
Kommunikation
(DataTemplates.xaml)
86
LOADING INDICATOR ANALYSE

View Model

PropertyBinding

IsLoading

Beliebiger Content

LoadingContent
LoadingTemplate
Load...
BEHAVIOR VS. ATTACHED PROPERTIES

88
LOADING INDICATOR BEHAVIOR VS. ATTACHED PROPERTIES

AttachedProperties
Da AttachedProperties statisch angelegt werden, sol...
LOADING INDICATOR BEHAVIOR VS. ATTACHED PROPERTIES

Behavior
Behaviors hingegen bieten die Möglichkeit komplexeren
Code in...
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ögli...
FRAGEN?

95
VIELEN DANK.
VIELEN DANK.

www.ergosign.de
contact@ergosign.de

Ergosign GmbH
Europaallee 12
66113 Saarbrücken
Germany

Ergosign GmbH
B...
Ein benutzerzentrierter
Prozess ist Voraussetzung für
das Design einer positiven
User Experience.
WPF UI Development Unchained
WPF UI Development Unchained
WPF UI Development Unchained
Nächste SlideShare
Wird geladen in …5
×

WPF UI Development Unchained

6.024 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

WPF UI Development Unchained

  1. 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
  2. 2. UI DEVELOPMENT? 2
  3. 3. UI DEVELOPMENT? USER CENTERED DESIGN 4
  4. 4. UI DEVELOPMENT? USER CENTERED DESIGN DESIGN ANALYSE SPECIFY VALIDATE DEVELOP 4
  5. 5. Kontextuelle Analyse Beobachtungen und semistrukturierte Interviews bei Endanwendern vor Ort.
  6. 6. Konzeptionelles Design Ein ganzheitlich optimiertes Bedienkonzept bildet die Eckpfeiler des User Interface.
  7. 7. Visuelles Design Nach einem gemeinsamen Stilfindungsprozess wird anhand der erarbeiteten Vorgaben ein ansprechendes Visuelles Design entwickelt.
  8. 8. 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.
  9. 9. Usability Testing Ein Usability Test mit repräsentativen Endanwendern liefert entscheidende Hinweise zur Optimierung eines User Interface.
  10. 10. SPECIFY 10
  11. 11. UI DEVELOPMENT? USER CENTERED DESIGN Spezifikation 11
  12. 12. UI DEVELOPMENT? USER CENTERED DESIGN Spezifikation wtf? :-D 11
  13. 13. UI DEVELOPMENT? DEKLARATIVE PROGRAMMIERUNG Reminder - Deklarative Programmierung mit XAML, Styling, Templates... Button Designer XAML Developer 12
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. UI DEVELOPMENT? WPF UI DEVELOPER Stufenmodell 16
  18. 18. UI DEVELOPMENT? WPF UI DEVELOPER Stufenmodell Fundament Design Basics Usability Engineering Basics Designer & UI Developer Workflow 16
  19. 19. UI DEVELOPMENT? WPF UI DEVELOPER Stufenmodell Stufe 1 Styles Control Templates XAML Fundament Design Basics Blend Template Binding Controls & Layout Animationen Resource Management Usability Engineering Basics Trigger & VSM Data Binding Basics Designer & UI Developer Workflow 16
  20. 20. UI DEVELOPMENT? WPF UI DEVELOPER Stufenmodell Stufe 2 MVVM Application Frameworks Data Binding Advanced Stufe 1 Styles Fundament Data Templates Control Templates XAML Design Basics Blend .NET Attached Properties Template Binding Controls & Layout Visual Studio Animationen Resource Management Usability Engineering Basics Behaviors Adorner Trigger & VSM Data Binding Basics Designer & UI Developer Workflow 16
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. DESIGN UND DEVELOPMENT IM EINKLANG 18
  25. 25. Design Development Eigene Prozesse
  26. 26. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT Abstraktes Vorgehen UI Developer - Styling und Custom Control Development 20
  27. 27. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT Abstraktes Vorgehen UI Developer - Styling und Custom Control Development Design Anforderungen 20
  28. 28. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT Abstraktes Vorgehen UI Developer - Styling und Custom Control Development Design Anforderungen Abstraktion UI Development Analyse 20
  29. 29. 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
  30. 30. 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
  31. 31. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT Designer und UI Developer Schnittstellen... 21
  32. 32. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT Designer und UI Developer Schnittstellen... 21
  33. 33. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT Designer und UI Developer Schnittstellen... 21
  34. 34. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT Designer und UI Developer Schnittstellen... 21
  35. 35. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT Designer und UI Developer Schnittstellen... 21
  36. 36. DESIGN UND DEVELOPMENT IM EINKLANG UI DEVELOPMENT Designer und UI Developer Schnittstellen... 21
  37. 37. EIN UI... 22
  38. 38. Styling? Custom Controls?
  39. 39. DER WEG ZUM CUSTOM CONTROL 24
  40. 40. 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
  41. 41. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE 26
  42. 42. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE WPF Standard Control? 26
  43. 43. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE WPF Standard Control? WPF Standard Controls gruppieren? 26
  44. 44. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? 26
  45. 45. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions? 26
  46. 46. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions? Attached Properties/Behaviors? 26
  47. 47. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE WPF Standard Control? WPF Standard Controls gruppieren? Styling & Templating? ValueConverter/Markup Extensions? Attached Properties/Behaviors? Drittanbieter? 26
  48. 48. 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
  49. 49. DER WEG ZUM CUSTOM CONTROL TECHNISCHE VORGEHENSWEISE Weitere Faktoren zur Entscheidung Custom Control Prototyp vs. Produktiv-Code Wiederverwendbarkeit Konsistenz im User Interface 27
  50. 50. SearchTextBox, aber nicht als Custom Control!
  51. 51. SEARCHTEXTBOX 29
  52. 52. ANALYSE 30
  53. 53. SEARCHTEXTBOX ANALYSE View Model 31
  54. 54. SEARCHTEXTBOX ANALYSE View Model 31
  55. 55. SEARCHTEXTBOX ANALYSE View Model TextBox 31
  56. 56. SEARCHTEXTBOX ANALYSE View Model TextBox 31
  57. 57. SEARCHTEXTBOX ANALYSE View Model TextBox Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground 31
  58. 58. SEARCHTEXTBOX ANALYSE View Model TextBox Watermark WatermarkFontStyle WatermarkFontWeight WatermarkForeground 31
  59. 59. SEARCHTEXTBOX ANALYSE View Model TextBox Watermark WatermarkFontStyle ClearCommand WatermarkFontWeight (Zurücksetzen des Texts) WatermarkForeground 31
  60. 60. SEARCHTEXTBOX ANALYSE View Model TextBox Watermark WatermarkFontStyle ClearCommand WatermarkFontWeight (Zurücksetzen des Texts) WatermarkForeground 31
  61. 61. SEARCHTEXTBOX ANALYSE View Model PropertyBinding TextBox Watermark WatermarkFontStyle ClearCommand WatermarkFontWeight (Zurücksetzen des Texts) WatermarkForeground 31
  62. 62. STYLE & TEMPLATE 32
  63. 63. Style & Template (TextBox.xaml)
  64. 64. ATTACHED PROPERTIES 34
  65. 65. 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
  66. 66. > Zentrale Klasse anlegen Attached Properties anlegen 1/4 36
  67. 67. > Registrieren über statische Funktion > Name > Type > Zugehörige Klasse > Metadaten Attached Properties anlegen 2/4 (AttachedProperties.cs) 37
  68. 68. > Statische Funktionen für den Zugriff > Verwendung der Methoden GetValue(), SetValue() Attached Properties anlegen 3/4 (AttachedProperties.cs) 38
  69. 69. > Wie DependencyProperties verwendbar > TemplateBinding möglich > Klasse.PropertyName Attached Properties anlegen 4/4 (TextBox.xaml) 39
  70. 70. READ-ONLY ATTACHED PROPERTIES 40
  71. 71. 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
  72. 72. > Schlüssel registrieren über statische Funktion > Anlegen der Property Read-Only Attached Properties anlegen 1/2 (AttachedProperties.cs) 42
  73. 73. > Verwendung der Methoden GetValue(), SetValue() Attached Properties anlegen 2/2 (AttachedProperties.cs) 43
  74. 74. > Referenz über CommandParameter CommandAction definieren (AttachedProperties.cs) 44
  75. 75. > Setzen der Bindings > Command > CommandParameter (Referenz) TemplateBinding (TextBox.xaml) 45
  76. 76. > Binding an ViewModel Property ViewModel Kommunikation (MainView.xaml) 46
  77. 77. SEARCHTEXTBOX ABSCHLUSS View Model PropertyBinding TextBox Watermark WatermarkFontStyle ClearCommand WatermarkFontWeight (Zurücksetzen des Texts) WatermarkForeground 47
  78. 78. WAS FINDEN WIR NOCH... ? 48
  79. 79. Styling? Custom Controls?
  80. 80. CircularProgressBar
  81. 81. CIRCULAR PROGRESSBAR 51
  82. 82. ANALYSE 52
  83. 83. CIRCULAR PROGRESSBAR ANALYSE View Model 53
  84. 84. CIRCULAR PROGRESSBAR ANALYSE View Model 53
  85. 85. CIRCULAR PROGRESSBAR ANALYSE View Model ProgressBar 53
  86. 86. CIRCULAR PROGRESSBAR ANALYSE View Model ProgressBar 53
  87. 87. CIRCULAR PROGRESSBAR ANALYSE View Model ProgressBar ValueAsAngle 53
  88. 88. CIRCULAR PROGRESSBAR ANALYSE View Model ProgressBar ValueAsAngle 53
  89. 89. CIRCULAR PROGRESSBAR ANALYSE View Model PropertyBinding ProgressBar ValueAsAngle 53
  90. 90. CIRCULAR PROGRESSBAR ANALYSE View Model PropertyBinding ProgressBar ValueAsAngle 53
  91. 91. STYLE & TEMPLATE 54
  92. 92. > MultiBinding > Minimum > Maximum > Value => ValueAsAngle Style & Template (ProgressBar.xaml)
  93. 93. CONVERTER 56
  94. 94. CIRCULAR PROGRESSBAR CONVERTER Converter Implementieren des entsprechenden Interfaces IValueConverter IMultiValueConverter Konvertieren einen/mehrere Wert/e in das gewünschte Format bzw. den gewünschten Typ 57
  95. 95. CIRCULAR PROGRESSBAR CONVERTER Converter - IValueConverter 58
  96. 96. CIRCULAR PROGRESSBAR CONVERTER Converter - IValueConverter Property Typ/FormatA 58
  97. 97. CIRCULAR PROGRESSBAR CONVERTER Converter - IValueConverter Property Typ/FormatA Property Typ/FormatB 58
  98. 98. CIRCULAR PROGRESSBAR CONVERTER Converter - IValueConverter Binding Property Typ/FormatA Property Typ/FormatB 58
  99. 99. CIRCULAR PROGRESSBAR CONVERTER Converter - IValueConverter Binding Property Typ/FormatA Converter Property Typ/FormatB 58
  100. 100. CIRCULAR PROGRESSBAR CONVERTER Converter - IMultiValueConverter 59
  101. 101. CIRCULAR PROGRESSBAR CONVERTER Converter - IMultiValueConverter Property Typ/FormatA 59
  102. 102. CIRCULAR PROGRESSBAR CONVERTER Converter - IMultiValueConverter Property Typ/FormatA Property Typ/FormatB ... 59
  103. 103. CIRCULAR PROGRESSBAR CONVERTER Converter - IMultiValueConverter Property Typ/FormatA Property Typ/FormatC Property Typ/FormatB ... 59
  104. 104. CIRCULAR PROGRESSBAR CONVERTER Converter - IMultiValueConverter Property Typ/FormatA MultiBinding Property Typ/FormatC Property Typ/FormatB ... 59
  105. 105. CIRCULAR PROGRESSBAR CONVERTER Converter - IMultiValueConverter Property Typ/FormatA MultiBinding Converter Property Typ/FormatC Property Typ/FormatB ... 59
  106. 106. > Klasse anlegen Converter 1/3 60
  107. 107. > Interface implementieren > Convert(...) > ConvertBack(...) Converter 2/3 (ValueAsAngleConverter.cs) 61
  108. 108. > Anlegen als Resource > Converter Property setzen Converter 3/3 (Converters.xaml, ProgressBar.xaml)
  109. 109. > Binding an ViewModel Property ViewModel Kommunikation (DataTemplates.xaml) 63
  110. 110. CIRCULAR PROGRESSBAR ANALYSE View Model PropertyBinding ProgressBar ValueAsAnge 64
  111. 111. LOADING INDICATOR 65
  112. 112. ANALYSE 66
  113. 113. LOADING INDICATOR ADORNER 67
  114. 114. LOADING INDICATOR ADORNER 67
  115. 115. LOADING INDICATOR ADORNER 67
  116. 116. LOADING INDICATOR ANALYSE View Model 68
  117. 117. LOADING INDICATOR ANALYSE View Model 68
  118. 118. LOADING INDICATOR ANALYSE View Model Beliebiger Content 68
  119. 119. LOADING INDICATOR ANALYSE View Model Beliebiger Content 68
  120. 120. LOADING INDICATOR ANALYSE View Model IsLoading Beliebiger Content LoadingContent LoadingTemplate LoadingDataContext 68
  121. 121. LOADING INDICATOR ANALYSE View Model IsLoading Beliebiger Content LoadingContent LoadingTemplate LoadingDataContext 68
  122. 122. LOADING INDICATOR ANALYSE View Model PropertyBinding IsLoading Beliebiger Content LoadingContent LoadingTemplate LoadingDataContext 68
  123. 123. ADORNER LAYER UND ADORNER 69
  124. 124. 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
  125. 125. > Klasse anlegen Implementieren eines Adorners mit Content Data Template 1/5 71
  126. 126. > Ableiten von Adorner > Abstrakte Klasse > Basisimplementierung Implementieren eines Adorners mit Content Data Template 2/5 (LoadingBehaviorAdorner.cs) 72
  127. 127. > Member definieren > Properties definieren Implementieren eines Adorners mit Content Data Template 3/5 (LoadingBehaviorAdorner.cs) 73
  128. 128. > Überschreiben von Methoden zur korrekten Darstellung des Contents Implementieren eines Adorners mit Content Data Template 4/5 (LoadingBehaviorAdorner.cs) 74
  129. 129. > Elemente initialisieren Implementieren eines Adorners mit Content Data Template 5/5 (LoadingBehaviorAdorner.cs) 75
  130. 130. Adorner manuell verwendet (MainView.xaml.cs) 76
  131. 131. BEHAVIOR 77
  132. 132. 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
  133. 133. 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
  134. 134. > Klasse anlegen Implementieren einer Behavior 1/6 80
  135. 135. > Ableiten von Behavior<T> wobei T den Typ des AssociatedObjects widerspiegelt > Überschreiben der Methoden OnAttached(), OnDetaching() Implementieren einer Behavior 2/6 (LoadingBehavior.cs) 81
  136. 136. > Anlegen der Properties & Property Changed Callbacks Implementieren einer Behavior 3/6 (LoadingBehavior.cs) 82
  137. 137. > Unser Adorner verwenden > Get AdornerLayer > Adorner anlegen > Parameter = AdorneredElement Implementieren einer Behavior 4/6 (LoadingBehavior.cs) 83
  138. 138. > Hinzufügen/Löschen des Adorners aus dem dazugehörigen AdornerLayer Implementieren einer Behavior 5/6 (LoadingBehavior.cs) 84
  139. 139. > LoadingBehavior zum gewünschten Element hinzufügen Implementieren einer Behavior 6/6 (MainView.xaml) 85
  140. 140. > Binding an ViewModel Property ViewModel Kommunikation (DataTemplates.xaml) 86
  141. 141. LOADING INDICATOR ANALYSE View Model PropertyBinding IsLoading Beliebiger Content LoadingContent LoadingTemplate LoadingDataContext 87
  142. 142. BEHAVIOR VS. ATTACHED PROPERTIES 88
  143. 143. 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
  144. 144. 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
  145. 145. DA WAR DOCH NOCH WAS... 91
  146. 146. PointChart
  147. 147. FAZIT 93
  148. 148. 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
  149. 149. FRAGEN? 95
  150. 150. VIELEN DANK.
  151. 151. VIELEN DANK. www.ergosign.de contact@ergosign.de Ergosign GmbH Europaallee 12 66113 Saarbrücken Germany Ergosign GmbH Bernhard-Nocht-Straße 109 20359 Hamburg Germany Ergosign GmbH Adams-Lehmann-Straße 44 80797 München Germany Ergosign Switzerland AG Badenerstrasse 808 8048 Zürich Switzerland T +49 681 988412-0 F +49 681 988412-10 T +49 40 3179868-0 F +49 40 3179868-10 T +49 89 6890607-0 F +49 89 6890607-10 T +41 44 54293-04 F +41 44 54293-07
  152. 152. Ein benutzerzentrierter Prozess ist Voraussetzung für das Design einer positiven User Experience.

×