Download as PDF, PPTX
Uploaded byErgosign GmbH
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
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.
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
- 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
- 35. THE CONFERENCE FOR BETTER USER INTERFACES 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 Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 36. THE CONFERENCE FOR BETTER USER INTERFACES 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 Also:+Custom+Controls+nicht+auf+Basis+ von+UserControl+implemenSeren! Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 37. THE CONFERENCE FOR BETTER USER INTERFACES Wann+ist+ein+Custom+Control+sinnvoll? WPF#Standard# WPF#Standard# Styling#und# Control? Controls#gruppieren? TemplaJng? ValueConverter#/# APached#ProperJes#/# DriPanbieter? MarkupExtension? Behaviors? Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 38. THE CONFERENCE FOR BETTER USER INTERFACES Wann+ist+ein+Custom+Control+sinnvoll? WPF#Standard# WPF#Standard# Styling#und# Control? Controls#gruppieren? TemplaJng? ValueConverter#/# APached#ProperJes#/# DriPanbieter? MarkupExtension? Behaviors? Eigenes+Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 39. THE CONFERENCE FOR BETTER USER INTERFACES Weitere+Überlegungen • Prototyp+vs.+ProdukSv[Code • Wiederverwendbarkeit • ProdukSvität+bei+großen+Projekten • Konsistenz+im+User+Interface Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 40. THE CONFERENCE FOR BETTER USER INTERFACES Konsistenz+im+User+Interface+(Beispiel) Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 41. THE CONFERENCE FOR BETTER USER INTERFACES Konsistenz+im+User+Interface Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 42. THE CONFERENCE FOR BETTER USER INTERFACES Konsistenz+im+User+Interface Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 43. THE CONFERENCE FOR BETTER USER INTERFACES Konsistenz+im+User+Interface Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 44. THE CONFERENCE FOR BETTER USER INTERFACES Unterschiede:+Designer Developer 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
- 45. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Vorgehensweise+++Beispiele Button Button Wetter Wetter laden Vorhersage laden Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 46. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 47. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 48. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 49. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 50. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 51. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 52. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Nicht die optimale Lösung! Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 53. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 54. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung 2. Strategie Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 55. THE CONFERENCE FOR BETTER USER INTERFACES Schon geklärt: ButtonContent schlechte Idee, daher besser Umsetzung leichtgewichtiges Custom Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 56. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 57. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 58. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 59. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 60. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 61. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 62. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 63. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 64. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 65. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 66. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 67. THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Live+Demo Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 68. THE CONFERENCE FOR BETTER USER INTERFACES Blendability • XAML(friendly(und(Blend(kompaPbel • Default(Property(Values,(Styles(und(Templates • Zusätzliche(Ressourcen(als(Property • Keine(Pefe(Verschachtelung(der(Templates • Mode(ProperPes(für(Trigger • Design(Time(Features(verwenden( • ... Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 69. THE CONFERENCE FOR BETTER USER INTERFACES Blendability+[+TemplatePartAGribute Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 70. THE CONFERENCE FOR BETTER USER INTERFACES Blendability+[+ContentPropertyAGribute Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 71. THE CONFERENCE FOR BETTER USER INTERFACES Blendability+[+AlternateContentProperty Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 72. THE CONFERENCE FOR BETTER USER INTERFACES Blendability+[+DescripSon+AGribut Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 73. THE CONFERENCE FOR BETTER USER INTERFACES Blendability+[+DescripSon+AGribut Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 74. THE CONFERENCE FOR BETTER USER INTERFACES Blendability+[+StyleTypedPropertyAGribute Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 75. THE CONFERENCE FOR BETTER USER INTERFACES Fazit Custom+Controls+machen+Sinn! • verbessern(die(User(Experience • sorgen(für(Konsistenz • machen(uns(produkPver((ImplemenPerung,(Blendability) • sind(einfach(cool(;) Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 76. THE CONFERENCE FOR BETTER USER INTERFACES Fazit Custom+Controls+machen+Sinn! • verbessern(die(User(Experience • sorgen(für(Konsistenz • machen(uns(produkPver((ImplemenPerung,(Blendability) • sind(einfach(cool(;) Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 77. THE CONFERENCE FOR BETTER USER INTERFACES Fazit Custom+Controls+machen+Sinn! • verbessern(die(User(Experience • sorgen(für(Konsistenz • machen(uns(produkPver((ImplemenPerung,(Blendability) • sind(einfach(cool(;) …aber+mit+Bedacht+einzusetzen. Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
- 78. THE CONFERENCE FOR BETTER USER INTERFACES Björn#Busch,Geertsema David#C.#Thömmes User#Interface#Designer#& User#Interface# Head#of#UI#Development Developer buschg@ergosign.de www.ergosign.de thoemmes@ergosign.de VIELEN(DANK(FÜR(DIE(AUFMERKSAMKEIT! DISKUSSION Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11