Follow our Experts: https://twitter.com/davidcthoemmes - https://twitter.com/ergosign Eine der Stärken von WPF besteht in der Möglichkeit, eigene Komponenten schnell und unkompliziert entwickeln zu können. Dies umfasst einfache visuelle Anpassungen bis hin zu komplexen, wirklich eigenständigen Komponenten. Das heißt natürlich nicht, dass dies auch ständig und überall getan werden sollte. Die Entscheidung, ein Custom Control zu entwickeln und einzusetzen, muss wohl überlegt und - am besten mit großen Vorteilen für die User Experience - begründet sein. Ist die Entscheidung für ein Custom Control gefallen, gibt es verschiedene Möglichkeiten, dieses umzusetzen, die wir ebenfalls näher beleuchten und an Beispielen demonstrieren werden.

1. WPF Custom Controls
UX Design und Entwicklung
dotnet Cologne 2012
Björn Busch-Geertsema
UX & UI Development Manager
David C. Thömmes
UI Developer & Software Engineer
www.ergosign.de

2. Ausblick
Was sind Custom Controls?
Warum sind Custom Controls gut?
Was sollte man in Bezug auf Design und
Umsetzung beachten?
WPF Custom Controls: UX Design und Entwicklung 2

3. Custom Controls – Fluch oder Segen?
…kommt drauf an ;)
Unterschiedliche Standpunkte
Designer vs. Entwickler
Unterschiedliche Ausprägungen
Von reinem Styling bis hin zu komplexem Aufbau
und Verhalten
WPF Custom Controls: UX Design und Entwicklung 3

4. Einteilung
Ab welchem Punkt sprechen wir von einem
Custom Control?
WPF Custom Controls: UX Design und Entwicklung 4

5. Einteilung
Ab welchem Punkt sprechen wir von einem
Custom Control?
Button
Standard Button
WPF Custom Controls: UX Design und Entwicklung 4

6. Einteilung
Ab welchem Punkt sprechen wir von einem
Custom Control?
Button
WPF Custom Controls: UX Design und Entwicklung 5

7. Einteilung
Ab welchem Punkt sprechen wir von einem
Custom Control?
Button
Button
Einfach gestylter Button
WPF Custom Controls: UX Design und Entwicklung 5

8. Einteilung
Ab welchem Punkt sprechen wir von einem
Custom Control?
Button Button
WPF Custom Controls: UX Design und Entwicklung 6

9. Einteilung
Ab welchem Punkt sprechen wir von einem
Custom Control?
Button Button
Wetter
Vorhersage laden
Komplex gestylter Button
WPF Custom Controls: UX Design und Entwicklung 6

10. Einteilung
Ab welchem Punkt sprechen wir von einem
Custom Control?
Button Button
Wetter
Vorhersage laden
WPF Custom Controls: UX Design und Entwicklung 7

11. Einteilung
Ab welchem Punkt sprechen wir von einem
Custom Control?
Button Button
Wetter Wetter laden
Vorhersage laden
Komplex gestylter Button
mit zusätzlicher Funktionalität
Kombiniertes Control
WPF Custom Controls: UX Design und Entwicklung 7

12. Einteilung
Ab welchem Punkt sprechen wir von einem
Custom Control?
Button Button
Wetter Wetter laden
Vorhersage laden
WPF Custom Controls: UX Design und Entwicklung 8

13. Einteilung
Ab welchem Punkt sprechen wir von einem
Custom Control?
Button Button
Wetter Wetter laden
Vorhersage laden
Standard Custom
WPF Custom Controls: UX Design und Entwicklung
? 8

14. Eine Frage des Standpunkts: Designer
Button
Button
Wetter
Vorhersage laden
Wetter laden
WPF Custom Controls: UX Design und Entwicklung 9

15. Eine Frage des Standpunkts: Designer
Button
Button
Wetter
Vorhersage laden
Wetter laden
WPF Custom Controls: UX Design und Entwicklung 9

16. Eine Frage des Standpunkts: Designer
Button Standard Control
Button
Wetter
Vorhersage laden
Wetter laden
WPF Custom Controls: UX Design und Entwicklung 9

17. Eine Frage des Standpunkts: Designer
Button Standard Control
Button Lediglich Styling
Wetter
Vorhersage laden
Wetter laden
WPF Custom Controls: UX Design und Entwicklung 9

18. Eine Frage des Standpunkts: Designer
Button Standard Control
Button Lediglich Styling
Wetter
Vorhersage laden Lediglich Styling
Wetter laden
WPF Custom Controls: UX Design und Entwicklung 9

19. Eine Frage des Standpunkts: Designer
Button Standard Control
Button Lediglich Styling
Wetter
Vorhersage laden Lediglich Styling
Wetter laden Kombination verschiedener
existierender Controls um besseres
Feedback zu liefern
WPF Custom Controls: UX Design und Entwicklung 9

20. Ist doch nur ein Button…
Wetter
Vorhersage laden
Wetter laden
WPF Custom Controls: UX Design und Entwicklung 10

21. Ist doch nur ein Button…
Prominenz
Abhebung von anderen,
kleineren Buttons Wetter
Vorhersage laden
Wetter laden
WPF Custom Controls: UX Design und Entwicklung 10

22. Ist doch nur ein Button…
Prominenz
Abhebung von anderen,
kleineren Buttons Wetter
Vorhersage laden
Verständlichkeit
Icon + Label + Zusatzinfo
besser als nur Label Wetter laden
WPF Custom Controls: UX Design und Entwicklung 10

23. Ist doch nur ein Button…
Prominenz
Abhebung von anderen,
kleineren Buttons Wetter
Vorhersage laden
Verständlichkeit
Icon + Label + Zusatzinfo
besser als nur Label Wetter laden
Feedback
Systemstatus kommunizieren
WPF Custom Controls: UX Design und Entwicklung 10

24. Custom Controls = Schlechte Usability?
WPF Custom Controls: UX Design und Entwicklung 11

25. Custom Controls = Schlechte Usability?
Historische Angst vor eigenen Controls:
Custom Controls › Kein Standard-Verhalten!
WPF Custom Controls: UX Design und Entwicklung 11

26. Custom Controls = Schlechte Usability?
Historische Angst vor eigenen Controls:
Custom Controls › Kein Standard-Verhalten!
Besondere Sorgfalt beim Design notwendig!
• Alle Zustände abbilden
Hover, Pressed, usw.
• Sofortige Erkennbarkeit sicherstellen
Ein Button muss ohne Probleme als Button erkennbar
sein
WPF Custom Controls: UX Design und Entwicklung 11

27. Custom Controls = Schlechte Usability?
Historische Angst vor eigenen Controls:
Custom Controls › Kein Standard-Verhalten!
Besondere Sorgfalt beim Design notwendig!
• Alle Zustände abbilden
Hover, Pressed, usw.
• Sofortige Erkennbarkeit sicherstellen
Ein Button muss ohne Probleme als Button erkennbar
sein
WPF ermöglicht dies ohne (zu) großen
Aufwand
WPF Custom Controls: UX Design und Entwicklung 11

28. Entscheidungshilfen
• Ursprungskomponente(n) Button
klar erkennbar
• Verbesserung der Usability des
Standard Controls Wetter
Vorhersage laden
z.B. Erweiterung um Icons, größere
Schrift, inhaltliche Differenzierung,
besseres Feedback u.a.
Wetter laden
• Kombination eines aktiven
Controls mit passiven Controls
WPF Custom Controls: UX Design und Entwicklung 12

29. Vorsicht bei…
WPF Custom Controls: UX Design und Entwicklung 13

30. Vorsicht bei…
Kombination von aktiven Controls
Button auf Button?
WPF Custom Controls: UX Design und Entwicklung 13

31. Vorsicht bei…
Kombination von aktiven Controls
Button auf Button?
Visuelle und kognitive Überforderung des
Anwenders
Zu viele Icons/Labels etc., zu bunt u.ä.
WPF Custom Controls: UX Design und Entwicklung 13

32. Vorsicht bei…
Kombination von aktiven Controls
Button auf Button?
Visuelle und kognitive Überforderung des
Anwenders
Zu viele Icons/Labels etc., zu bunt u.ä.
Komplett neuen Interaktionen
WPF Custom Controls: UX Design und Entwicklung 13

33. Komplett neue Interaktion
WPF Custom Controls: UX Design und Entwicklung 14

34. Komplett neue Interaktion
Indiskutabel, solange eine Umsetzung mit
“normalen” Mitteln ohne große Nachteile
möglich ist.
WPF Custom Controls: UX Design und Entwicklung 14

35. Komplett neue Interaktion
Indiskutabel, solange eine Umsetzung mit
“normalen” Mitteln ohne große Nachteile
möglich ist.
User-Testing absolut notwendig
WPF Custom Controls: UX Design und Entwicklung 14

36. Komplett neue Interaktion
Indiskutabel, solange eine Umsetzung mit
“normalen” Mitteln ohne große Nachteile
möglich ist.
User-Testing absolut notwendig
Nur sinnvoll, wenn Anwender das Control sehr
häufig verwenden und/oder ein sehr großer
Effizienzgewinn erreicht wird
WPF Custom Controls: UX Design und Entwicklung 14

37. Kuchen mag eigentlich jeder…
Pie Menü im 3D Modeler MODO
WPF Custom Controls: UX Design und Entwicklung 15

38. Kuchen mag eigentlich jeder…
Oder?
Pie Menü im 3D Modeler MODO
WPF Custom Controls: UX Design und Entwicklung 15

39. Beispiel: Verbesserung des Tab Controls
Live Demo
WPF Custom Controls: UX Design und Entwicklung 16

40. Aber nun zur Technik
Wir haben da schon mal was vorbereitet…
WPF Custom Controls: UX Design und Entwicklung 17

41. Kurzer Einschub zur Erinnerung
Style
Wertegruppierung für verschiedene Properties
eines Controls (Setter)
Control Template
Strukturbaum, Aufbau eines Controls
Template Binding
Anbindung von Properties zwischen individuellem
Control und Template (z.B. Border-Background › Button-
Background)
WPF Custom Controls: UX Design und Entwicklung 18

42. Eine Frage des Standpunkts: Developer
Button Standard Control
Button
Wetter
Vorhersage laden
Wetter laden
WPF Custom Controls: UX Design und Entwicklung 19

43. Eine Frage des Standpunkts: Developer
Button Standard Control
Button
Wetter
Vorhersage laden
Wetter laden
WPF Custom Controls: UX Design und Entwicklung 19

44. Eine Frage des Standpunkts: Developer
Button Standard Control
Button Lediglich Styling
Wetter
Vorhersage laden
Wetter laden
WPF Custom Controls: UX Design und Entwicklung 19

45. Eine Frage des Standpunkts: Developer
Button Standard Control
Button Lediglich Styling
Wetter
Vorhersage laden Kommt drauf an…
Wetter laden
WPF Custom Controls: UX Design und Entwicklung 19

46. “Custom Control” – eine Definition
Von einer Basisklasse des
Frameworks abgeleitet
Zusätzliche Funktionalität
Methoden, Funktionen, Properties,
Instanz- / Klassenvariablen
WPF Custom Controls: UX Design und Entwicklung 20

47. Welche Basisklasse?
WPF Custom Controls: UX Design und Entwicklung 21

48. Welche Basisklasse?
ListBox TabControl
ButtonBase ScrollViewer ItemsControl
UserControl FrameworkElement ProgressBar
UIElement Slider Control TreeView
TabItem ComboBox Panel
ContentControl
WPF Custom Controls: UX Design und Entwicklung 21

49. Welche Basisklasse?
ListBox TabControl
ButtonBase ScrollViewer ItemsControl
UserControl FrameworkElement ProgressBar
UIElement Slider Control TreeView
TabItem ComboBox Panel
ContentControl
WPF Custom Controls: UX Design und Entwicklung 22

50. UserControl
Leicht zu erstellen und benutzen
Code-Behind (Blend, Visual Studio)
Struktur = Content
Element-Referenzierung mit x:Name
Styling und Templating möglich
Erweiterungen möglich
WPF Custom Controls: UX Design und Entwicklung 23

53. UserControl im MVVM-Kontext
WPF Custom Controls: UX Design und Entwicklung 26

54. UserControl im MVVM-Kontext
Controls
UserControls Views
ViewModels
Models
…
WPF Custom Controls: UX Design und Entwicklung 26

55. UserControl im MVVM-Kontext
UserControls dienen der
Zusammenfassung und Gruppierung
mehrerer Controls und Layout Panels.
WPF Custom Controls: UX Design und Entwicklung 27

56. Custom Control
• Ableitung von einer konkreten
Klasse ≠ UserControl
• Styling- und Templating-Möglichkeiten
• Visueller Aufbau im ControlTemplate
• Default Style möglich (Generic.xaml)
• Zusammenfassung in einer
Control Library möglich
• Element-Referenzierung über
OnApplyTemplate()
WPF Custom Controls: UX Design und Entwicklung 28

63. UserControl vs. Custom Control
UserControl Custom Control
Technik
Logik & Visual
Styling
Aufwand
Reuse
WPF Custom Controls: UX Design und Entwicklung 35

64. UserControl vs. Custom Control
UserControl Custom Control
Technik
Logik & Visual
Styling
Aufwand
Reuse
WPF Custom Controls: UX Design und Entwicklung 35

65. UserControl vs. Custom Control
UserControl Custom Control
Technik XAML + Code Behind Klasse + Style + Template
Logik & Visual
Styling
Aufwand
Reuse
WPF Custom Controls: UX Design und Entwicklung 35

66. UserControl vs. Custom Control
UserControl Custom Control
Technik XAML + Code Behind Klasse + Style + Template
Logik & Visual Harte Verdrahtung Getrennt
Styling
Aufwand
Reuse
WPF Custom Controls: UX Design und Entwicklung 35

67. UserControl vs. Custom Control
UserControl Custom Control
Technik XAML + Code Behind Klasse + Style + Template
Logik & Visual Harte Verdrahtung Getrennt
Styling Hart Flexibel
Aufwand
Reuse
WPF Custom Controls: UX Design und Entwicklung 35

68. UserControl vs. Custom Control
UserControl Custom Control
Technik XAML + Code Behind Klasse + Style + Template
Logik & Visual Harte Verdrahtung Getrennt
Styling Hart Flexibel
Aufwand Wenig Etwas aufwändiger
Reuse
WPF Custom Controls: UX Design und Entwicklung 35

69. UserControl vs. Custom Control
UserControl Custom Control
Technik XAML + Code Behind Klasse + Style + Template
Logik & Visual Harte Verdrahtung Getrennt
Styling Hart Flexibel
Aufwand Wenig Etwas aufwändiger
Reuse Schlecht Gut
WPF Custom Controls: UX Design und Entwicklung 35

70. Wann ist ein Custom Control sinnvoll?
WPF Custom Controls: UX Design und Entwicklung 36

71. Wann ist ein Custom Control sinnvoll?
WPF Standard
Control?
WPF Custom Controls: UX Design und Entwicklung 36

72. Wann ist ein Custom Control sinnvoll?
WPF Standard WPF Standard
Control? Controls gruppieren?
WPF Custom Controls: UX Design und Entwicklung 36

73. Wann ist ein Custom Control sinnvoll?
WPF Standard WPF Standard Styling und
Control? Controls gruppieren? Templating?
WPF Custom Controls: UX Design und Entwicklung 36

74. Wann ist ein Custom Control sinnvoll?
WPF Standard WPF Standard Styling und
Control? Controls gruppieren? Templating?
ValueConverter /
MarkupExtension?
WPF Custom Controls: UX Design und Entwicklung 36

75. Wann ist ein Custom Control sinnvoll?
WPF Standard WPF Standard Styling und
Control? Controls gruppieren? Templating?
ValueConverter / Attached Properties /
MarkupExtension? Behaviors?
WPF Custom Controls: UX Design und Entwicklung 36

76. Wann ist ein Custom Control sinnvoll?
WPF Standard WPF Standard Styling und
Control? Controls gruppieren? Templating?
ValueConverter / Attached Properties /
Drittanbieter?
MarkupExtension? Behaviors?
WPF Custom Controls: UX Design und Entwicklung 36

77. Wann ist ein Custom Control sinnvoll?
WPF Standard WPF Standard Styling und
Control? Controls gruppieren? Templating?
ValueConverter / Attached Properties /
Drittanbieter?
MarkupExtension? Behaviors?
Eigenes Custom Control
WPF Custom Controls: UX Design und Entwicklung 36

78. Weitere Überlegungen
WPF Custom Controls: UX Design und Entwicklung 37

79. Weitere Überlegungen
• Prototyp vs. Produktiv-Code
WPF Custom Controls: UX Design und Entwicklung 37

80. Weitere Überlegungen
• Prototyp vs. Produktiv-Code
• Wiederverwendbarkeit
WPF Custom Controls: UX Design und Entwicklung 37

81. Weitere Überlegungen
• Prototyp vs. Produktiv-Code
• Wiederverwendbarkeit
• Produktivität bei großen Projekten
WPF Custom Controls: UX Design und Entwicklung 37

82. Weitere Überlegungen
• Prototyp vs. Produktiv-Code
• Wiederverwendbarkeit
• Produktivität bei großen Projekten
• Konsistenz im User Interface
WPF Custom Controls: UX Design und Entwicklung 37

83. Konsistenz im User Interface (Beispiel)
WPF Custom Controls: UX Design und Entwicklung 38

91. Unterschiede
Designer Developer
Button Standard Control
Button Lediglich Styling
Wetter
Vorhersage laden Lediglich Styling
Wetter laden Kombination verschiedener
existierender Controls um besseres
Feedback zu liefern
WPF Custom Controls: UX Design und Entwicklung 46

92. Unterschiede
Designer Developer
Button Standard Control
Button Lediglich Styling
Wetter
Vorhersage laden Lediglich Styling
Wetter laden Kombination verschiedener
existierender Controls um besseres
Feedback zu liefern
WPF Custom Controls: UX Design und Entwicklung 46

93. Unterschiede
Designer Developer
Button Standard Control
Button Lediglich Styling
Wetter
Vorhersage laden Lediglich Styling
Wetter laden Kombination verschiedener
existierender Controls um besseres
Feedback zu liefern
WPF Custom Controls: UX Design und Entwicklung 46

94. Unterschiede
Designer Developer
Button Standard Control
Button Lediglich Styling
Wetter
Vorhersage laden Lediglich Styling
Wetter laden Kombination verschiedener
existierender Controls um besseres
Feedback zu liefern
WPF Custom Controls: UX Design und Entwicklung 46

95. Umsetzung
Vorgehensweise + Beispiele
Button Button
Wetter Wetter laden
Vorhersage laden
WPF Custom Controls: UX Design und Entwicklung 47

102. Nicht die
optimale
Lösung!

104. 2. Strategie

117. Live Demo

118. Blendability
• XAML friendly und Blend kompatibel
• Default Property Values, Styles und Templates
• Zusätzliche Ressourcen als Property
• Keine tiefe Verschachtelung der Templates
• Mode Properties für Trigger
• Design Time Features verwenden
• ...
WPF Custom Controls: UX Design und Entwicklung 70

119. Blendability - TemplatePartAttribute
WPF Custom Controls: UX Design und Entwicklung 71

120. Blendability - ContentPropertyAttribute
WPF Custom Controls: UX Design und Entwicklung 72

121. Blendability - AlternateContentProperty
WPF Custom Controls: UX Design und Entwicklung 73

122. Blendability - Description Attribut
WPF Custom Controls: UX Design und Entwicklung 74

123. Blendability - Description Attribut
WPF Custom Controls: UX Design und Entwicklung 75

124. Blendability - StyleTypedPropertyAttribute
WPF Custom Controls: UX Design und Entwicklung 76

125. Fazit
WPF Custom Controls: UX Design und Entwicklung 77

126. Fazit
Custom Controls machen Sinn!
WPF Custom Controls: UX Design und Entwicklung 77

127. Fazit
Custom Controls machen Sinn!
• verbessern die User Experience
WPF Custom Controls: UX Design und Entwicklung 77

128. Fazit
Custom Controls machen Sinn!
• verbessern die User Experience
• sorgen für Konsistenz
WPF Custom Controls: UX Design und Entwicklung 77

129. Fazit
Custom Controls machen Sinn!
• verbessern die User Experience
• sorgen für Konsistenz
• machen uns produktiver (Implementierung,
Blendability)
WPF Custom Controls: UX Design und Entwicklung 77

130. Fazit
Custom Controls machen Sinn!
• verbessern die User Experience
• sorgen für Konsistenz
• machen uns produktiver (Implementierung,
Blendability)
• sind einfach cool ;)
WPF Custom Controls: UX Design und Entwicklung 77

131. Fazit
Custom Controls machen Sinn!
• verbessern die User Experience
• sorgen für Konsistenz
• machen uns produktiver (Implementierung,
Blendability)
• sind einfach cool ;)
WPF Custom Controls: UX Design und Entwicklung 77

132. Fazit
Custom Controls machen Sinn!
• verbessern die User Experience
• sorgen für Konsistenz
• machen uns produktiver (Implementierung,
Blendability)
• sind einfach cool ;)
…aber mit Bedacht einzusetzen.
WPF Custom Controls: UX Design und Entwicklung 77

133. WPF Custom Controls
UX Design und Entwicklung
DISKUSSION
Vielen Dank für Ihre Aufmerksamkeit!
Björn Busch-Geertsema David C. Thömmes
UX & UI Development Manager UI Developer & Software Engineer
buschg@ergosign.de thoemmes@ergosign.de
www.ergosign.de