Das Dokument behandelt die Entwicklung von Benutzeroberflächen (UI) im Rahmen der Softwareentwicklung mit Fokus auf einen benutzerzentrierten Designprozess. Es hebt die Bedeutung von Usability-Tests, Prototyping und der Rolle von UI-Entwicklern hervor, während es die Integration von Design und Entwicklung betont. Zudem wird ein Stufenmodell für WPF UI-Entwicklung vorgestellt, das grundlegende Prinzipien und Herausforderungen innerhalb dieser Disziplin thematisiert.

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. UI DEVELOPMENT?
2

5. UI DEVELOPMENT? USER CENTERED DESIGN
4

6. UI DEVELOPMENT? USER CENTERED DESIGN
DESIGN
ANALYSE
SPECIFY
VALIDATE
DEVELOP
4

7. Kontextuelle Analyse
Beobachtungen und semistrukturierte
Interviews bei Endanwendern vor Ort.

8. Konzeptionelles Design
Ein ganzheitlich optimiertes
Bedienkonzept bildet die Eckpfeiler des
User Interface.

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.

12. SPECIFY
10

13. UI DEVELOPMENT? USER CENTERED DESIGN
Spezifikation
11

14. UI DEVELOPMENT? USER CENTERED DESIGN
Spezifikation
wtf? :-D
11

15. UI DEVELOPMENT? DEKLARATIVE PROGRAMMIERUNG
Reminder - Deklarative Programmierung mit XAML,
Styling, Templates...
Button
Designer
XAML
Developer
12

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

19. UI DEVELOPMENT? WPF UI DEVELOPER
Stufenmodell
16

20. UI DEVELOPMENT? WPF UI DEVELOPER
Stufenmodell
Fundament
Design Basics
Usability Engineering Basics
Designer & UI Developer Workflow
16

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

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

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

26. DESIGN UND DEVELOPMENT IM EINKLANG
18

27. Design
Development
Eigene Prozesse

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

39. EIN UI...
22

40. Styling?
Custom Controls?

41. DER WEG ZUM CUSTOM CONTROL
24

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

52. SearchTextBox,
aber nicht als Custom
Control!

53. SEARCHTEXTBOX
29

54. ANALYSE
30

55. SEARCHTEXTBOX ANALYSE
View Model
31

56. SEARCHTEXTBOX ANALYSE
View Model
31

57. SEARCHTEXTBOX ANALYSE
View Model
TextBox
31

58. SEARCHTEXTBOX ANALYSE
View Model
TextBox
31

59. SEARCHTEXTBOX ANALYSE
View Model
TextBox
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
31

60. SEARCHTEXTBOX ANALYSE
View Model
TextBox
Watermark
WatermarkFontStyle
WatermarkFontWeight
WatermarkForeground
31

61. SEARCHTEXTBOX ANALYSE
View Model
TextBox
Watermark
WatermarkFontStyle
ClearCommand
WatermarkFontWeight
(Zurücksetzen des Texts)
WatermarkForeground
31

62. SEARCHTEXTBOX ANALYSE
View Model
TextBox
Watermark
WatermarkFontStyle
ClearCommand
WatermarkFontWeight
(Zurücksetzen des Texts)
WatermarkForeground
31

63. SEARCHTEXTBOX ANALYSE
View Model
PropertyBinding
TextBox
Watermark
WatermarkFontStyle
ClearCommand
WatermarkFontWeight
(Zurücksetzen des Texts)
WatermarkForeground
31

64. STYLE & TEMPLATE
32

65. Style & Template
(TextBox.xaml)

66. ATTACHED PROPERTIES
34

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

68. > Zentrale Klasse anlegen
Attached Properties
anlegen 1/4
36

69. > Registrieren über statische Funktion
> Name
> Type
> Zugehörige Klasse
> Metadaten
Attached Properties
anlegen 2/4
(AttachedProperties.cs)
37

70. > Statische Funktionen für
den Zugriff
> Verwendung der Methoden
GetValue(), SetValue()
Attached Properties
anlegen 3/4
(AttachedProperties.cs)
38

71. > Wie DependencyProperties
verwendbar
> TemplateBinding möglich
> Klasse.PropertyName
Attached Properties
anlegen 4/4
(TextBox.xaml)
39

72. READ-ONLY ATTACHED PROPERTIES
40

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

75. > Verwendung der Methoden
GetValue(), SetValue()
Attached Properties
anlegen 2/2
(AttachedProperties.cs)
43

76. > Referenz über
CommandParameter
CommandAction
definieren
(AttachedProperties.cs)
44

77. > Setzen der Bindings
> Command
> CommandParameter
(Referenz)
TemplateBinding
(TextBox.xaml)
45

78. > Binding an ViewModel
Property
ViewModel
Kommunikation
(MainView.xaml)
46

79. SEARCHTEXTBOX ABSCHLUSS
View Model
PropertyBinding
TextBox
Watermark
WatermarkFontStyle
ClearCommand
WatermarkFontWeight
(Zurücksetzen des Texts)
WatermarkForeground
47

80. WAS FINDEN WIR NOCH... ?
48

81. Styling?
Custom Controls?

82. CircularProgressBar

83. CIRCULAR PROGRESSBAR
51

84. ANALYSE
52

85. CIRCULAR PROGRESSBAR ANALYSE
View Model
53

86. CIRCULAR PROGRESSBAR ANALYSE
View Model
53

87. CIRCULAR PROGRESSBAR ANALYSE
View Model
ProgressBar
53

88. CIRCULAR PROGRESSBAR ANALYSE
View Model
ProgressBar
53

89. CIRCULAR PROGRESSBAR ANALYSE
View Model
ProgressBar
ValueAsAngle
53

90. CIRCULAR PROGRESSBAR ANALYSE
View Model
ProgressBar
ValueAsAngle
53

91. CIRCULAR PROGRESSBAR ANALYSE
View Model
PropertyBinding
ProgressBar
ValueAsAngle
53

92. CIRCULAR PROGRESSBAR ANALYSE
View Model
PropertyBinding
ProgressBar
ValueAsAngle
53

93. STYLE & TEMPLATE
54

94. > MultiBinding
> Minimum
> Maximum
> Value
=> ValueAsAngle
Style & Template
(ProgressBar.xaml)

95. CONVERTER
56

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

97. CIRCULAR PROGRESSBAR CONVERTER
Converter - IValueConverter
58

98. CIRCULAR PROGRESSBAR CONVERTER
Converter - IValueConverter
Property
Typ/FormatA
58

99. CIRCULAR PROGRESSBAR CONVERTER
Converter - IValueConverter
Property
Typ/FormatA
Property
Typ/FormatB
58

100. CIRCULAR PROGRESSBAR CONVERTER
Converter - IValueConverter
Binding
Property
Typ/FormatA
Property
Typ/FormatB
58

101. CIRCULAR PROGRESSBAR CONVERTER
Converter - IValueConverter
Binding
Property
Typ/FormatA
Converter
Property
Typ/FormatB
58

102. CIRCULAR PROGRESSBAR CONVERTER
Converter - IMultiValueConverter
59

103. CIRCULAR PROGRESSBAR CONVERTER
Converter - IMultiValueConverter
Property
Typ/FormatA
59

104. CIRCULAR PROGRESSBAR CONVERTER
Converter - IMultiValueConverter
Property
Typ/FormatA
Property
Typ/FormatB
...
59

105. CIRCULAR PROGRESSBAR CONVERTER
Converter - IMultiValueConverter
Property
Typ/FormatA
Property
Typ/FormatC
Property
Typ/FormatB
...
59

106. CIRCULAR PROGRESSBAR CONVERTER
Converter - IMultiValueConverter
Property
Typ/FormatA
MultiBinding
Property
Typ/FormatC
Property
Typ/FormatB
...
59

107. CIRCULAR PROGRESSBAR CONVERTER
Converter - IMultiValueConverter
Property
Typ/FormatA
MultiBinding
Converter
Property
Typ/FormatC
Property
Typ/FormatB
...
59

108. > Klasse anlegen
Converter 1/3
60

109. > Interface implementieren
> Convert(...)
> ConvertBack(...)
Converter 2/3
(ValueAsAngleConverter.cs)
61

110. > Anlegen als Resource
> Converter Property
setzen
Converter 3/3
(Converters.xaml,
ProgressBar.xaml)

111. > Binding an ViewModel
Property
ViewModel
Kommunikation
(DataTemplates.xaml)
63

112. CIRCULAR PROGRESSBAR ANALYSE
View Model
PropertyBinding
ProgressBar
ValueAsAnge
64

113. LOADING INDICATOR
65

114. ANALYSE
66

115. LOADING INDICATOR ADORNER
67

116. LOADING INDICATOR ADORNER
67

117. LOADING INDICATOR ADORNER
67

118. LOADING INDICATOR ANALYSE
View Model
68

119. LOADING INDICATOR ANALYSE
View Model
68

120. LOADING INDICATOR ANALYSE
View Model
Beliebiger Content
68

121. LOADING INDICATOR ANALYSE
View Model
Beliebiger Content
68

122. LOADING INDICATOR ANALYSE
View Model
IsLoading
Beliebiger Content
LoadingContent
LoadingTemplate
LoadingDataContext
68

123. LOADING INDICATOR ANALYSE
View Model
IsLoading
Beliebiger Content
LoadingContent
LoadingTemplate
LoadingDataContext
68

124. LOADING INDICATOR ANALYSE
View Model
PropertyBinding
IsLoading
Beliebiger Content
LoadingContent
LoadingTemplate
LoadingDataContext
68

125. ADORNER LAYER UND ADORNER
69

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

127. > Klasse anlegen
Implementieren eines
Adorners mit Content
Data Template 1/5
71

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

131. > Elemente initialisieren
Implementieren eines
Adorners mit Content
Data Template 5/5
(LoadingBehaviorAdorner.cs)
75

132. Adorner manuell
verwendet
(MainView.xaml.cs)
76

133. BEHAVIOR
77

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

136. > Klasse anlegen
Implementieren einer
Behavior 1/6
80

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

139. > Unser Adorner verwenden
> Get AdornerLayer
> Adorner anlegen
> Parameter = AdorneredElement
Implementieren einer
Behavior 4/6
(LoadingBehavior.cs)
83

140. > Hinzufügen/Löschen des
Adorners aus dem
dazugehörigen
AdornerLayer
Implementieren einer
Behavior 5/6
(LoadingBehavior.cs)
84

141. > LoadingBehavior zum
gewünschten Element
hinzufügen
Implementieren einer
Behavior 6/6
(MainView.xaml)
85

142. > Binding an ViewModel
Property
ViewModel
Kommunikation
(DataTemplates.xaml)
86

143. LOADING INDICATOR ANALYSE
View Model
PropertyBinding
IsLoading
Beliebiger Content
LoadingContent
LoadingTemplate
LoadingDataContext
87

144. BEHAVIOR VS. ATTACHED PROPERTIES
88

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

147. DA WAR DOCH NOCH WAS...
91

148. PointChart

149. FAZIT
93

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

151. FRAGEN?
95

152. VIELEN DANK.

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

155. Ein benutzerzentrierter
Prozess ist Voraussetzung für
das Design einer positiven
User Experience.