THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
THE CONFERENCE                                                                                                            ...
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
WPF Custom Controls: UX-Design and -Development @ GUI&DESIGN Conference
Upcoming SlideShare
Loading in...5
×

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

9,569

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
9,569
On Slideshare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. THE CONFERENCE FOR BETTER USER INTERFACES Kuchen+mag+eigentlich+jeder… Oder? PieMenüim3DModelerMODO Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  16. 16. THE CONFERENCE FOR BETTER USER INTERFACES Beispiel:+Verbesserung+des+Tab+Controls Live+Demo Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  17. 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. 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. 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. 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. 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. 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. 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. 24. THE CONFERENCE FOR BETTER USER INTERFACES UserControl Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  25. 25. THE CONFERENCE FOR BETTER USER INTERFACES UserControl Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  26. 26. THE CONFERENCE FOR BETTER USER INTERFACES UserControl+im+MVVM[Kontext Controls UserControls+›+Views ViewModels Models … Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  27. 27. THE CONFERENCE FOR BETTER USER INTERFACES UserControl+im+MVVM[Kontext UserControlsdienender ZusammenfassungundGruppierung mehrererControlsundLayoutPanels. Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  28. 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. 29. THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  30. 30. THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  31. 31. THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  32. 32. THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  33. 33. THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  34. 34. THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×