Your SlideShare is downloading. ×
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference

9,805
views

Published 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.

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,805
On Slideshare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
56
Comments
0
Likes
1
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. WPF Custom Controls UX Design und Entwicklung dotnet Cologne 2012 Björn Busch-Geertsema UX & UI Development Manager David C. ThömmesUI Developer & Software Engineer www.ergosign.de
    • 2. Ausblick Was sind Custom Controls? Warum sind Custom Controls gut? Was sollte man in Bezug auf Design und Umsetzung beachten? WPF Custom Controls: UX Design und Entwicklung 2
    • 3. Custom Controls – Fluch oder Segen? …kommt drauf an ;) Unterschiedliche Standpunkte Designer vs. Entwickler Unterschiedliche Ausprägungen Von reinem Styling bis hin zu komplexem Aufbau und Verhalten WPF Custom Controls: UX Design und Entwicklung 3
    • 4. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? WPF Custom Controls: UX Design und Entwicklung 4
    • 5. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Standard Button WPF Custom Controls: UX Design und Entwicklung 4
    • 6. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button WPF Custom Controls: UX Design und Entwicklung 5
    • 7. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button Einfach gestylter Button WPF Custom Controls: UX Design und Entwicklung 5
    • 8. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button WPF Custom Controls: UX Design und Entwicklung 6
    • 9. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button Wetter Vorhersage laden Komplex gestylter Button WPF Custom Controls: UX Design und Entwicklung 6
    • 10. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button Wetter Vorhersage laden WPF Custom Controls: UX Design und Entwicklung 7
    • 11. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button Wetter Wetter laden Vorhersage laden Komplex gestylter Button mit zusätzlicher Funktionalität Kombiniertes Control WPF Custom Controls: UX Design und Entwicklung 7
    • 12. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button Wetter Wetter laden Vorhersage laden WPF Custom Controls: UX Design und Entwicklung 8
    • 13. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button Wetter Wetter laden Vorhersage laden Standard Custom WPF Custom Controls: UX Design und Entwicklung ? 8
    • 14. Eine Frage des Standpunkts: Designer Button Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
    • 15. Eine Frage des Standpunkts: Designer Button Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
    • 16. Eine Frage des Standpunkts: Designer Button Standard Control Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
    • 17. Eine Frage des Standpunkts: Designer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
    • 18. Eine Frage des Standpunkts: Designer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Lediglich Styling Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
    • 19. Eine Frage des Standpunkts: Designer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Lediglich Styling Wetter laden Kombination verschiedener existierender Controls um besseres Feedback zu liefern WPF Custom Controls: UX Design und Entwicklung 9
    • 20. Ist doch nur ein Button… Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 10
    • 21. Ist doch nur ein Button… Prominenz Abhebung von anderen, kleineren Buttons Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 10
    • 22. Ist doch nur ein Button… Prominenz Abhebung von anderen, kleineren Buttons Wetter Vorhersage laden Verständlichkeit Icon + Label + Zusatzinfo besser als nur Label Wetter laden WPF Custom Controls: UX Design und Entwicklung 10
    • 23. Ist doch nur ein Button… Prominenz Abhebung von anderen, kleineren Buttons Wetter Vorhersage laden Verständlichkeit Icon + Label + Zusatzinfo besser als nur Label Wetter laden Feedback Systemstatus kommunizieren WPF Custom Controls: UX Design und Entwicklung 10
    • 24. Custom Controls = Schlechte Usability? WPF Custom Controls: UX Design und Entwicklung 11
    • 25. Custom Controls = Schlechte Usability? Historische Angst vor eigenen Controls: Custom Controls › Kein Standard-Verhalten! WPF Custom Controls: UX Design und Entwicklung 11
    • 26. Custom Controls = Schlechte Usability? Historische Angst vor eigenen Controls: Custom Controls › Kein Standard-Verhalten! Besondere Sorgfalt beim Design notwendig! • Alle Zustände abbilden Hover, Pressed, usw. • Sofortige Erkennbarkeit sicherstellen Ein Button muss ohne Probleme als Button erkennbar sein WPF Custom Controls: UX Design und Entwicklung 11
    • 27. Custom Controls = Schlechte Usability? Historische Angst vor eigenen Controls: Custom Controls › Kein Standard-Verhalten! Besondere Sorgfalt beim Design notwendig! • Alle Zustände abbilden Hover, Pressed, usw. • Sofortige Erkennbarkeit sicherstellen Ein Button muss ohne Probleme als Button erkennbar sein WPF ermöglicht dies ohne (zu) großen Aufwand WPF Custom Controls: UX Design und Entwicklung 11
    • 28. Entscheidungshilfen • Ursprungskomponente(n) Button klar erkennbar • Verbesserung der Usability des Standard Controls Wetter Vorhersage laden z.B. Erweiterung um Icons, größere Schrift, inhaltliche Differenzierung, besseres Feedback u.a. Wetter laden • Kombination eines aktiven Controls mit passiven Controls WPF Custom Controls: UX Design und Entwicklung 12
    • 29. Vorsicht bei… WPF Custom Controls: UX Design und Entwicklung 13
    • 30. Vorsicht bei… Kombination von aktiven Controls Button auf Button? WPF Custom Controls: UX Design und Entwicklung 13
    • 31. Vorsicht bei… Kombination von aktiven Controls Button auf Button? Visuelle und kognitive Überforderung des Anwenders Zu viele Icons/Labels etc., zu bunt u.ä. WPF Custom Controls: UX Design und Entwicklung 13
    • 32. Vorsicht bei… Kombination von aktiven Controls Button auf Button? Visuelle und kognitive Überforderung des Anwenders Zu viele Icons/Labels etc., zu bunt u.ä. Komplett neuen Interaktionen WPF Custom Controls: UX Design und Entwicklung 13
    • 33. Komplett neue Interaktion WPF Custom Controls: UX Design und Entwicklung 14
    • 34. Komplett neue Interaktion Indiskutabel, solange eine Umsetzung mit “normalen” Mitteln ohne große Nachteile möglich ist. WPF Custom Controls: UX Design und Entwicklung 14
    • 35. Komplett neue Interaktion Indiskutabel, solange eine Umsetzung mit “normalen” Mitteln ohne große Nachteile möglich ist. User-Testing absolut notwendig WPF Custom Controls: UX Design und Entwicklung 14
    • 36. Komplett neue Interaktion Indiskutabel, solange eine Umsetzung mit “normalen” Mitteln ohne große Nachteile möglich ist. User-Testing absolut notwendig Nur sinnvoll, wenn Anwender das Control sehr häufig verwenden und/oder ein sehr großer Effizienzgewinn erreicht wird WPF Custom Controls: UX Design und Entwicklung 14
    • 37. Kuchen mag eigentlich jeder… Pie Menü im 3D Modeler MODO WPF Custom Controls: UX Design und Entwicklung 15
    • 38. Kuchen mag eigentlich jeder… Oder? Pie Menü im 3D Modeler MODO WPF Custom Controls: UX Design und Entwicklung 15
    • 39. Beispiel: Verbesserung des Tab Controls Live Demo WPF Custom Controls: UX Design und Entwicklung 16
    • 40. Aber nun zur Technik Wir haben da schon mal was vorbereitet… WPF Custom Controls: UX Design und Entwicklung 17
    • 41. Kurzer Einschub zur Erinnerung Style Wertegruppierung für verschiedene Properties eines Controls (Setter) Control Template Strukturbaum, Aufbau eines Controls Template Binding Anbindung von Properties zwischen individuellem Control und Template (z.B. Border-Background › Button- Background) WPF Custom Controls: UX Design und Entwicklung 18
    • 42. Eine Frage des Standpunkts: Developer Button Standard Control Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 19
    • 43. Eine Frage des Standpunkts: Developer Button Standard Control Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 19
    • 44. Eine Frage des Standpunkts: Developer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 19
    • 45. Eine Frage des Standpunkts: Developer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Kommt drauf an… Wetter laden WPF Custom Controls: UX Design und Entwicklung 19
    • 46. “Custom Control” – eine Definition Von einer Basisklasse des Frameworks abgeleitet Zusätzliche Funktionalität Methoden, Funktionen, Properties, Instanz- / Klassenvariablen WPF Custom Controls: UX Design und Entwicklung 20
    • 47. Welche Basisklasse? WPF Custom Controls: UX Design und Entwicklung 21
    • 48. Welche Basisklasse? ListBox TabControl ButtonBase ScrollViewer ItemsControl UserControl FrameworkElement ProgressBar UIElement Slider Control TreeView TabItem ComboBox Panel ContentControl WPF Custom Controls: UX Design und Entwicklung 21
    • 49. Welche Basisklasse? ListBox TabControl ButtonBase ScrollViewer ItemsControl UserControl FrameworkElement ProgressBar UIElement Slider Control TreeView TabItem ComboBox Panel ContentControl WPF Custom Controls: UX Design und Entwicklung 22
    • 50. UserControl Leicht zu erstellen und benutzen Code-Behind (Blend, Visual Studio) Struktur = Content Element-Referenzierung mit x:Name Styling und Templating möglich Erweiterungen möglich WPF Custom Controls: UX Design und Entwicklung 23
    • 51. UserControl im MVVM-Kontext WPF Custom Controls: UX Design und Entwicklung 26
    • 52. UserControl im MVVM-Kontext Controls UserControls Views ViewModels Models … WPF Custom Controls: UX Design und Entwicklung 26
    • 53. UserControl im MVVM-Kontext UserControls dienen der Zusammenfassung und Gruppierung mehrerer Controls und Layout Panels. WPF Custom Controls: UX Design und Entwicklung 27
    • 54. Custom Control • Ableitung von einer konkreten Klasse ≠ UserControl • Styling- und Templating-Möglichkeiten • Visueller Aufbau im ControlTemplate • Default Style möglich (Generic.xaml) • Zusammenfassung in einer Control Library möglich • Element-Referenzierung über OnApplyTemplate() WPF Custom Controls: UX Design und Entwicklung 28
    • 55. UserControl vs. Custom Control UserControl Custom ControlTechnikLogik & VisualStylingAufwandReuse WPF Custom Controls: UX Design und Entwicklung 35
    • 56. UserControl vs. Custom Control UserControl Custom ControlTechnikLogik & VisualStylingAufwandReuse WPF Custom Controls: UX Design und Entwicklung 35
    • 57. UserControl vs. Custom Control UserControl Custom ControlTechnik XAML + Code Behind Klasse + Style + TemplateLogik & VisualStylingAufwandReuse WPF Custom Controls: UX Design und Entwicklung 35
    • 58. UserControl vs. Custom Control UserControl Custom ControlTechnik XAML + Code Behind Klasse + Style + TemplateLogik & Visual Harte Verdrahtung GetrenntStylingAufwandReuse WPF Custom Controls: UX Design und Entwicklung 35
    • 59. UserControl vs. Custom Control UserControl Custom ControlTechnik XAML + Code Behind Klasse + Style + TemplateLogik & Visual Harte Verdrahtung GetrenntStyling Hart FlexibelAufwandReuse WPF Custom Controls: UX Design und Entwicklung 35
    • 60. UserControl vs. Custom Control UserControl Custom ControlTechnik XAML + Code Behind Klasse + Style + TemplateLogik & Visual Harte Verdrahtung GetrenntStyling Hart FlexibelAufwand Wenig Etwas aufwändigerReuse WPF Custom Controls: UX Design und Entwicklung 35
    • 61. UserControl vs. Custom Control UserControl Custom ControlTechnik XAML + Code Behind Klasse + Style + TemplateLogik & Visual Harte Verdrahtung GetrenntStyling Hart FlexibelAufwand Wenig Etwas aufwändigerReuse Schlecht Gut WPF Custom Controls: UX Design und Entwicklung 35
    • 62. Wann ist ein Custom Control sinnvoll? WPF Custom Controls: UX Design und Entwicklung 36
    • 63. Wann ist ein Custom Control sinnvoll? WPF Standard Control? WPF Custom Controls: UX Design und Entwicklung 36
    • 64. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Control? Controls gruppieren? WPF Custom Controls: UX Design und Entwicklung 36
    • 65. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Styling und Control? Controls gruppieren? Templating? WPF Custom Controls: UX Design und Entwicklung 36
    • 66. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Styling und Control? Controls gruppieren? Templating? ValueConverter / MarkupExtension? WPF Custom Controls: UX Design und Entwicklung 36
    • 67. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Styling und Control? Controls gruppieren? Templating? ValueConverter / Attached Properties / MarkupExtension? Behaviors? WPF Custom Controls: UX Design und Entwicklung 36
    • 68. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Styling und Control? Controls gruppieren? Templating? ValueConverter / Attached Properties / Drittanbieter? MarkupExtension? Behaviors? WPF Custom Controls: UX Design und Entwicklung 36
    • 69. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Styling und Control? Controls gruppieren? Templating? ValueConverter / Attached Properties / Drittanbieter? MarkupExtension? Behaviors? Eigenes Custom Control WPF Custom Controls: UX Design und Entwicklung 36
    • 70. Weitere Überlegungen WPF Custom Controls: UX Design und Entwicklung 37
    • 71. Weitere Überlegungen • Prototyp vs. Produktiv-Code WPF Custom Controls: UX Design und Entwicklung 37
    • 72. Weitere Überlegungen • Prototyp vs. Produktiv-Code • Wiederverwendbarkeit WPF Custom Controls: UX Design und Entwicklung 37
    • 73. Weitere Überlegungen • Prototyp vs. Produktiv-Code • Wiederverwendbarkeit • Produktivität bei großen Projekten WPF Custom Controls: UX Design und Entwicklung 37
    • 74. Weitere Überlegungen • Prototyp vs. Produktiv-Code • Wiederverwendbarkeit • Produktivität bei großen Projekten • Konsistenz im User Interface WPF Custom Controls: UX Design und Entwicklung 37
    • 75. Konsistenz im User Interface (Beispiel) WPF Custom Controls: UX Design und Entwicklung 38
    • 76. Unterschiede Designer Developer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Lediglich Styling Wetter laden Kombination verschiedener existierender Controls um besseres Feedback zu liefern WPF Custom Controls: UX Design und Entwicklung 46
    • 77. Unterschiede Designer Developer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Lediglich Styling Wetter laden Kombination verschiedener existierender Controls um besseres Feedback zu liefern WPF Custom Controls: UX Design und Entwicklung 46
    • 78. Unterschiede Designer Developer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Lediglich Styling Wetter laden Kombination verschiedener existierender Controls um besseres Feedback zu liefern WPF Custom Controls: UX Design und Entwicklung 46
    • 79. Unterschiede Designer Developer Button Standard Control Button Lediglich Styling Wetter Vorhersage laden Lediglich Styling Wetter laden Kombination verschiedener existierender Controls um besseres Feedback zu liefern WPF Custom Controls: UX Design und Entwicklung 46
    • 80. Umsetzung Vorgehensweise + Beispiele Button Button Wetter Wetter laden Vorhersage laden WPF Custom Controls: UX Design und Entwicklung 47
    • 81. Nicht dieoptimaleLösung!
    • 82. 2. Strategie
    • 83. Live Demo
    • 84. Blendability • XAML friendly und Blend kompatibel • Default Property Values, Styles und Templates • Zusätzliche Ressourcen als Property • Keine tiefe Verschachtelung der Templates • Mode Properties für Trigger • Design Time Features verwenden • ... WPF Custom Controls: UX Design und Entwicklung 70
    • 85. Blendability - TemplatePartAttribute WPF Custom Controls: UX Design und Entwicklung 71
    • 86. Blendability - ContentPropertyAttribute WPF Custom Controls: UX Design und Entwicklung 72
    • 87. Blendability - AlternateContentProperty WPF Custom Controls: UX Design und Entwicklung 73
    • 88. Blendability - Description Attribut WPF Custom Controls: UX Design und Entwicklung 74
    • 89. Blendability - Description Attribut WPF Custom Controls: UX Design und Entwicklung 75
    • 90. Blendability - StyleTypedPropertyAttribute WPF Custom Controls: UX Design und Entwicklung 76
    • 91. Fazit WPF Custom Controls: UX Design und Entwicklung 77
    • 92. Fazit Custom Controls machen Sinn! WPF Custom Controls: UX Design und Entwicklung 77
    • 93. Fazit Custom Controls machen Sinn! • verbessern die User Experience WPF Custom Controls: UX Design und Entwicklung 77
    • 94. Fazit Custom Controls machen Sinn! • verbessern die User Experience • sorgen für Konsistenz WPF Custom Controls: UX Design und Entwicklung 77
    • 95. Fazit Custom Controls machen Sinn! • verbessern die User Experience • sorgen für Konsistenz • machen uns produktiver (Implementierung, Blendability) WPF Custom Controls: UX Design und Entwicklung 77
    • 96. Fazit Custom Controls machen Sinn! • verbessern die User Experience • sorgen für Konsistenz • machen uns produktiver (Implementierung, Blendability) • sind einfach cool ;) WPF Custom Controls: UX Design und Entwicklung 77
    • 97. Fazit Custom Controls machen Sinn! • verbessern die User Experience • sorgen für Konsistenz • machen uns produktiver (Implementierung, Blendability) • sind einfach cool ;) WPF Custom Controls: UX Design und Entwicklung 77
    • 98. Fazit Custom Controls machen Sinn! • verbessern die User Experience • sorgen für Konsistenz • machen uns produktiver (Implementierung, Blendability) • sind einfach cool ;) …aber mit Bedacht einzusetzen. WPF Custom Controls: UX Design und Entwicklung 77
    • 99. WPF Custom Controls UX Design und Entwicklung DISKUSSION Vielen Dank für Ihre Aufmerksamkeit!Björn Busch-Geertsema David C. ThömmesUX & UI Development Manager UI Developer & Software Engineer buschg@ergosign.de thoemmes@ergosign.de www.ergosign.de