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. THE CONFERENCE
FOR BETTER USER INTERFACES

WPF Custom Controls
UX#Design#und#,Entwicklung
Björn#Busch,Geertsema David#C.#Thömmes
User#Interface#Designer#& User#Interface#
Head#of#UI#Development Developer

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

2. THE CONFERENCE
FOR BETTER USER INTERFACES

Ausblick
Was+sind+Custom+Controls?
Warum+sind+Custom+Controls+gut?
Was+sollte+man+in+Bezug+auf+Design+und+
Umsetzung+beachten?

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

3. THE CONFERENCE
FOR BETTER USER INTERFACES

Custom+Controls+–+Fluch+oder+Segen?
…kommt&drauf&an&;)
Unterschiedliche+Standpunkte
Designer(vs.(Entwickler
Unterschiedliche+Ausprägungen
Von(reinem(Styling(bis(hin(zu(komplexem(Au=au(und(
Verhalten

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

4. THE CONFERENCE
FOR BETTER USER INTERFACES

Einteilung
Ab+welchem+Punkt+sprechen+wir+von+einem+
Custom+Control?
Button
Standard'Bu*on

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

5. THE CONFERENCE
FOR BETTER USER INTERFACES

Einteilung
Ab+welchem+Punkt+sprechen+wir+von+einem+
Custom+Control?
Button
Button
Einfach'gestylter'Bu*on

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

6. THE CONFERENCE
FOR BETTER USER INTERFACES

Einteilung
Ab+welchem+Punkt+sprechen+wir+von+einem+
Custom+Control?
Button Button
Wetter
Vorhersage laden
Komplex'gestylter'Bu*on

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

7. THE CONFERENCE
FOR BETTER USER INTERFACES

Einteilung
Ab+welchem+Punkt+sprechen+wir+von+einem+
Custom+Control?
Button Button
Wetter Wetter laden
Vorhersage laden
Komplex'gestylter'Bu*on
mit'zusätzlicher'Funk>onalität
Kombiniertes&Control

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

8. THE CONFERENCE
FOR BETTER USER INTERFACES

Einteilung
Ab+welchem+Punkt+sprechen+wir+von+einem+
Custom+Control?
Wetter Wetter laden
Button Button
Vorhersage laden …
Standard
? Custom

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

9. THE CONFERENCE
FOR BETTER USER INTERFACES

Eine(Frage(des(Standpunkts:+Designer
Button Standard#Control
Button Lediglich#Styling
Wetter
Vorhersage laden Lediglich#Styling
Wetter laden KombinaJon#verschiedener#exisJerender
Controls#um#besseres#Feedback#zu#liefern

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

10. THE CONFERENCE
FOR BETTER USER INTERFACES

Ist+doch+nur+ein+BuGon…
Prominenz
Abhebung(von(anderen,(
Wetter
kleineren(BuDons
Vorhersage laden
Verständlichkeit
Icon(+(Label(+(Zusatzinfo
besser(als(nur(Label Wetter laden
Feedback
Systemstatus(kommunizieren

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

11. THE CONFERENCE
FOR BETTER USER INTERFACES

Custom+Controls+=+Schlechte+Usability?
Historische+Angst+vor+eigenen+Controls:
Custom(Controls((›((Kein(StandardMVerhalten!
Besondere+Sorgfalt+beim+Design+notwendig!
• Alle(Zustände(abbilden
Hover,#Pressed,#usw.
• SoforPge(Erkennbarkeit(sicherstellen
Ein#BuPon#muss#ohne#Probleme#als#BuPon#erkennbar#sein
WPF+ermöglicht+dies+ohne+(zu)+großen+Aufwand

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

12. THE CONFERENCE
FOR BETTER USER INTERFACES

Entscheidungshilfen
• Ursprungskomponente(n)(
Button
klar(erkennbar
• Verbesserung(der(Usability(des(
Standard(Controls Wetter
z.B.#Erweiterung#um#Icons,#größere# Vorhersage laden
SchriR,#inhaltliche#Differenzierung,#
besseres#Feedback#u.a.
• KombinaPon(eines(akPven(
Wetter laden
Controls(mit(passiven(Controls

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

13. THE CONFERENCE
FOR BETTER USER INTERFACES

Vorsicht+bei
KombinaSon+von+akSven+Controls
BuDon(auf(BuDon?
Visuelle+und+kogniSve+Überforderung+des+
Anwenders
Zu(viele(Icons/Labels(etc.,(zu(bunt(u.ä.
KompleG+neuen+InterakSonen

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

14. THE CONFERENCE
FOR BETTER USER INTERFACES

KompleG+neue+InterakSon
Indiskutabel,+solange+eine+Umsetzung+mit+
“normalen”+MiGeln+ohne+große+Nachteile+
möglich+ist.
User[TesSng+absolut+notwendig
Nur+sinnvoll,+wenn+Anwender+das+Control+sehr+
häufig+verwenden+und/oder+ein+sehr+großer+
Effizienzgewinn+erreicht+wird

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

15. THE CONFERENCE
FOR BETTER USER INTERFACES

Kuchen+mag+eigentlich+jeder…
Oder?
Pie'Menü'im'3D'Modeler'MODO

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

16. THE CONFERENCE
FOR BETTER USER INTERFACES

Beispiel:+Verbesserung+des+Tab+Controls
Live+Demo

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

17. THE CONFERENCE
FOR BETTER USER INTERFACES

Aber+nun+zur+Technik
Wir+haben+da+schon+mal+was+vorbereitet…

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

18. THE CONFERENCE
FOR BETTER USER INTERFACES

Kurzer+Einschub+zur+Erinnerung
Style
Wertegruppierung#für#verschiedene#ProperJes#
eines#Controls#(Se*er)
Control+Template
Strukturbaum,#AuYau#eines#Controls
Template+Binding
Anbindung#von#ProperJes#zwischen#individuellem#Control#und#
Template#(z.B.#Border,Background#›#BuPon,Background)

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

19. THE CONFERENCE
FOR BETTER USER INTERFACES

Eine(Frage(des(Standpunkts:+Developer
Button Standard#Control
Button Lediglich#Styling
Wetter
Vorhersage laden Kommt+drauf+an…
Wetter laden

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

20. THE CONFERENCE
FOR BETTER USER INTERFACES

“Custom+Control”+–+eine+DefiniSon
Von+einer+Basisklasse+des+Frameworks+
abgeleitet
Zusätzliche+FunkSonalität+
Methoden,(FunkPonen,(ProperPes,(InstanzM(/(
Klassenvariablen

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

21. THE CONFERENCE
FOR BETTER USER INTERFACES

Welche+Basisklasse?
ListBox TabControl
BuPonBase ScrollViewer ItemsControl
UserControl FrameworkElement ProgressBar
UIElement Slider
TabItem ComboBox
Control TreeView
Panel
ContentControl

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

22. THE CONFERENCE
FOR BETTER USER INTERFACES

Welche+Basisklasse?
ListBox TabControl
BuPonBase ScrollViewer ItemsControl
UserControl? FrameworkElement ProgressBar
UIElement Slider
TabItem ComboBox
Control TreeView
Panel
ContentControl

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

23. THE CONFERENCE
FOR BETTER USER INTERFACES

UserControl
• Leicht+zu+erstellen+und+benutzen
• Code[Behind+(Blend,+Visual+Studio)
• Struktur+=+Content
• Element[Referenzierung+mit+x:Name
• Styling+und+TemplaSng+möglich
• Erweiterungen+möglich

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

24. THE CONFERENCE
FOR BETTER USER INTERFACES

UserControl

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

25. THE CONFERENCE
FOR BETTER USER INTERFACES

UserControl

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

26. THE CONFERENCE
FOR BETTER USER INTERFACES

UserControl+im+MVVM[Kontext
Controls
UserControls+›+Views
ViewModels
Models
…

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

27. THE CONFERENCE
FOR BETTER USER INTERFACES

UserControl+im+MVVM[Kontext
UserControls'dienen'der'
Zusammenfassung'und'Gruppierung'
mehrerer'Controls'und'Layout'Panels.

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

28. THE CONFERENCE
FOR BETTER USER INTERFACES

Custom+Control
• Ableitung(von(einer(konkreten(Klasse(≠(UserControl
• StylingM(und(TemplaPngMMöglichkeiten
• Visueller(Au=au(im(ControlTemplate
• Default(Style(möglich((Generic.xaml)
• Zusammenfassung(in(einer(Control(Library(möglich
• ElementMReferenzierung(über(OnApplyTemplate()

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

29. THE CONFERENCE
FOR BETTER USER INTERFACES

Custom+Control

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

30. THE CONFERENCE
FOR BETTER USER INTERFACES

Custom+Control

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

31. THE CONFERENCE
FOR BETTER USER INTERFACES

Custom+Control

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

32. THE CONFERENCE
FOR BETTER USER INTERFACES

Custom+Control

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

33. THE CONFERENCE
FOR BETTER USER INTERFACES

Custom+Control

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11

34. THE CONFERENCE
FOR BETTER USER INTERFACES

Custom+Control

Sponsoren: Veranstalter:
Donnerstag, 8. Dezember 11