WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference

  • 8,636 views
Uploaded on

Follow our Experts: https://twitter.com/davidcthoemmes - https://twitter.com/ergosign …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
8,636
On Slideshare
0
From Embeds
0
Number of Embeds
36

Actions

Shares
Downloads
26
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 StandardBu*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 EinfachgestylterBu*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 KomplexgestylterBu*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 KomplexgestylterBu*on mitzusätzlicherFunk>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? PieMenüim3DModelerMODO 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 UserControlsdienender ZusammenfassungundGruppierung mehrererControlsundLayoutPanels. 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