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

11,768 views

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
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,768
On SlideShare
0
From Embeds
0
Number of Embeds
5,648
Actions
Shares
0
Downloads
68
Comments
0
Likes
2
Embeds 0
No embeds

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
  • WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference

    1. 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. 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. 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. 4. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? WPF Custom Controls: UX Design und Entwicklung 4
    5. 5. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Standard Button WPF Custom Controls: UX Design und Entwicklung 4
    6. 6. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button WPF Custom Controls: UX Design und Entwicklung 5
    7. 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. 8. Einteilung Ab welchem Punkt sprechen wir von einem Custom Control? Button Button WPF Custom Controls: UX Design und Entwicklung 6
    9. 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. 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. 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. 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. 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. 14. Eine Frage des Standpunkts: Designer Button Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
    15. 15. Eine Frage des Standpunkts: Designer Button Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
    16. 16. Eine Frage des Standpunkts: Designer Button Standard Control Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 9
    17. 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. 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. 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. 20. Ist doch nur ein Button… Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 10
    21. 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. 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. 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. 24. Custom Controls = Schlechte Usability? WPF Custom Controls: UX Design und Entwicklung 11
    25. 25. Custom Controls = Schlechte Usability? Historische Angst vor eigenen Controls: Custom Controls › Kein Standard-Verhalten! WPF Custom Controls: UX Design und Entwicklung 11
    26. 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. 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. 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. 29. Vorsicht bei… WPF Custom Controls: UX Design und Entwicklung 13
    30. 30. Vorsicht bei… Kombination von aktiven Controls Button auf Button? WPF Custom Controls: UX Design und Entwicklung 13
    31. 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. 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. 33. Komplett neue Interaktion WPF Custom Controls: UX Design und Entwicklung 14
    34. 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. 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. 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. 37. Kuchen mag eigentlich jeder… Pie Menü im 3D Modeler MODO WPF Custom Controls: UX Design und Entwicklung 15
    38. 38. Kuchen mag eigentlich jeder… Oder? Pie Menü im 3D Modeler MODO WPF Custom Controls: UX Design und Entwicklung 15
    39. 39. Beispiel: Verbesserung des Tab Controls Live Demo WPF Custom Controls: UX Design und Entwicklung 16
    40. 40. Aber nun zur Technik Wir haben da schon mal was vorbereitet… WPF Custom Controls: UX Design und Entwicklung 17
    41. 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. 42. Eine Frage des Standpunkts: Developer Button Standard Control Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 19
    43. 43. Eine Frage des Standpunkts: Developer Button Standard Control Button Wetter Vorhersage laden Wetter laden WPF Custom Controls: UX Design und Entwicklung 19
    44. 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. 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. 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. 47. Welche Basisklasse? WPF Custom Controls: UX Design und Entwicklung 21
    48. 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. 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. 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. 51. UserControl im MVVM-Kontext WPF Custom Controls: UX Design und Entwicklung 26
    52. 52. UserControl im MVVM-Kontext Controls UserControls Views ViewModels Models … WPF Custom Controls: UX Design und Entwicklung 26
    53. 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. 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. 55. UserControl vs. Custom Control UserControl Custom ControlTechnikLogik & VisualStylingAufwandReuse WPF Custom Controls: UX Design und Entwicklung 35
    56. 56. UserControl vs. Custom Control UserControl Custom ControlTechnikLogik & VisualStylingAufwandReuse WPF Custom Controls: UX Design und Entwicklung 35
    57. 57. UserControl vs. Custom Control UserControl Custom ControlTechnik XAML + Code Behind Klasse + Style + TemplateLogik & VisualStylingAufwandReuse WPF Custom Controls: UX Design und Entwicklung 35
    58. 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. 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. 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. 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. 62. Wann ist ein Custom Control sinnvoll? WPF Custom Controls: UX Design und Entwicklung 36
    63. 63. Wann ist ein Custom Control sinnvoll? WPF Standard Control? WPF Custom Controls: UX Design und Entwicklung 36
    64. 64. Wann ist ein Custom Control sinnvoll? WPF Standard WPF Standard Control? Controls gruppieren? WPF Custom Controls: UX Design und Entwicklung 36
    65. 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. 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. 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. 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. 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. 70. Weitere Überlegungen WPF Custom Controls: UX Design und Entwicklung 37
    71. 71. Weitere Überlegungen • Prototyp vs. Produktiv-Code WPF Custom Controls: UX Design und Entwicklung 37
    72. 72. Weitere Überlegungen • Prototyp vs. Produktiv-Code • Wiederverwendbarkeit WPF Custom Controls: UX Design und Entwicklung 37
    73. 73. Weitere Überlegungen • Prototyp vs. Produktiv-Code • Wiederverwendbarkeit • Produktivität bei großen Projekten WPF Custom Controls: UX Design und Entwicklung 37
    74. 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. 75. Konsistenz im User Interface (Beispiel) WPF Custom Controls: UX Design und Entwicklung 38
    76. 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. 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. 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. 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. 80. Umsetzung Vorgehensweise + Beispiele Button Button Wetter Wetter laden Vorhersage laden WPF Custom Controls: UX Design und Entwicklung 47
    81. 81. Nicht dieoptimaleLösung!
    82. 82. 2. Strategie
    83. 83. Live Demo
    84. 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. 85. Blendability - TemplatePartAttribute WPF Custom Controls: UX Design und Entwicklung 71
    86. 86. Blendability - ContentPropertyAttribute WPF Custom Controls: UX Design und Entwicklung 72
    87. 87. Blendability - AlternateContentProperty WPF Custom Controls: UX Design und Entwicklung 73
    88. 88. Blendability - Description Attribut WPF Custom Controls: UX Design und Entwicklung 74
    89. 89. Blendability - Description Attribut WPF Custom Controls: UX Design und Entwicklung 75
    90. 90. Blendability - StyleTypedPropertyAttribute WPF Custom Controls: UX Design und Entwicklung 76
    91. 91. Fazit WPF Custom Controls: UX Design und Entwicklung 77
    92. 92. Fazit Custom Controls machen Sinn! WPF Custom Controls: UX Design und Entwicklung 77
    93. 93. Fazit Custom Controls machen Sinn! • verbessern die User Experience WPF Custom Controls: UX Design und Entwicklung 77
    94. 94. Fazit Custom Controls machen Sinn! • verbessern die User Experience • sorgen für Konsistenz WPF Custom Controls: UX Design und Entwicklung 77
    95. 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. 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. 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. 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. 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

    ×