WPF Custom Controls         UX Design und Entwicklung         dotnet Cologne 2012 Björn Busch-Geertsema UX & UI Developmen...
Ausblick  Was sind Custom Controls?  Warum sind Custom Controls gut?  Was sollte man in Bezug auf Design und  Umsetzung be...
Custom Controls – Fluch oder Segen? …kommt drauf an ;) Unterschiedliche Standpunkte  Designer vs. Entwickler Unterschiedli...
Einteilung  Ab welchem Punkt sprechen wir von einem  Custom Control?  WPF Custom Controls: UX Design und Entwicklung   4
Einteilung  Ab welchem Punkt sprechen wir von einem  Custom Control?                                           Button     ...
Einteilung  Ab welchem Punkt sprechen wir von einem  Custom Control?                  Button  WPF Custom Controls: UX Desi...
Einteilung  Ab welchem Punkt sprechen wir von einem  Custom Control?                  Button                              ...
Einteilung  Ab welchem Punkt sprechen wir von einem  Custom Control?  Button          Button  WPF Custom Controls: UX Desi...
Einteilung  Ab welchem Punkt sprechen wir von einem  Custom Control?  Button          Button                              ...
Einteilung  Ab welchem Punkt sprechen wir von einem  Custom Control?  Button        Button                                ...
Einteilung  Ab welchem Punkt sprechen wir von einem  Custom Control?  Button        Button                                ...
Einteilung Ab welchem Punkt sprechen wir von einem Custom Control?       Button            Button                         ...
Einteilung Ab welchem Punkt sprechen wir von einem Custom Control?       Button            Button                         ...
Eine Frage des Standpunkts: Designer        Button         Button       Wetter       Vorhersage laden       Wetter laden  ...
Eine Frage des Standpunkts: Designer        Button         Button       Wetter       Vorhersage laden       Wetter laden  ...
Eine Frage des Standpunkts: Designer        Button                            Standard Control         Button       Wetter...
Eine Frage des Standpunkts: Designer        Button                            Standard Control         Button             ...
Eine Frage des Standpunkts: Designer        Button                            Standard Control         Button             ...
Eine Frage des Standpunkts: Designer        Button                            Standard Control         Button             ...
Ist doch nur ein Button…                                                   Wetter                                         ...
Ist doch nur ein Button… Prominenz Abhebung von anderen, kleineren Buttons                                 Wetter         ...
Ist doch nur ein Button… Prominenz Abhebung von anderen, kleineren Buttons                                 Wetter         ...
Ist doch nur ein Button… Prominenz Abhebung von anderen, kleineren Buttons                                 Wetter         ...
Custom Controls = Schlechte Usability?  WPF Custom Controls: UX Design und Entwicklung   11
Custom Controls = Schlechte Usability?  Historische Angst vor eigenen Controls:  Custom Controls › Kein Standard-Verhalten...
Custom Controls = Schlechte Usability?  Historische Angst vor eigenen Controls:  Custom Controls › Kein Standard-Verhalten...
Custom Controls = Schlechte Usability?  Historische Angst vor eigenen Controls:  Custom Controls › Kein Standard-Verhalten...
Entscheidungshilfen •    Ursprungskomponente(n)                            Button      klar erkennbar •    Verbesserung de...
Vorsicht bei…  WPF Custom Controls: UX Design und Entwicklung   13
Vorsicht bei…  Kombination von aktiven Controls  Button auf Button?  WPF Custom Controls: UX Design und Entwicklung   13
Vorsicht bei…  Kombination von aktiven Controls  Button auf Button?  Visuelle und kognitive Überforderung des  Anwenders  ...
Vorsicht bei…  Kombination von aktiven Controls  Button auf Button?  Visuelle und kognitive Überforderung des  Anwenders  ...
Komplett neue Interaktion  WPF Custom Controls: UX Design und Entwicklung   14
Komplett neue Interaktion  Indiskutabel, solange eine Umsetzung mit  “normalen” Mitteln ohne große Nachteile  möglich ist....
Komplett neue Interaktion  Indiskutabel, solange eine Umsetzung mit  “normalen” Mitteln ohne große Nachteile  möglich ist....
Komplett neue Interaktion  Indiskutabel, solange eine Umsetzung mit  “normalen” Mitteln ohne große Nachteile  möglich ist....
Kuchen mag eigentlich jeder…                  Pie Menü im 3D Modeler MODO  WPF Custom Controls: UX Design und Entwicklung ...
Kuchen mag eigentlich jeder…                                                   Oder?                  Pie Menü im 3D Model...
Beispiel: Verbesserung des Tab Controls                                                   Live Demo  WPF Custom Controls: ...
Aber nun zur Technik  Wir haben da schon mal was vorbereitet…  WPF Custom Controls: UX Design und Entwicklung   17
Kurzer Einschub zur Erinnerung  Style  Wertegruppierung für verschiedene Properties  eines Controls (Setter)  Control Temp...
Eine Frage des Standpunkts: Developer        Button                            Standard Control         Button       Wette...
Eine Frage des Standpunkts: Developer        Button                            Standard Control         Button       Wette...
Eine Frage des Standpunkts: Developer        Button                            Standard Control         Button            ...
Eine Frage des Standpunkts: Developer        Button                            Standard Control         Button            ...
“Custom Control” – eine Definition          Von einer Basisklasse des          Frameworks abgeleitet          Zusätzliche F...
Welche Basisklasse?  WPF Custom Controls: UX Design und Entwicklung   21
Welche Basisklasse?                             ListBox TabControl       ButtonBase ScrollViewer ItemsControl           Us...
Welche Basisklasse?                             ListBox TabControl       ButtonBase ScrollViewer ItemsControl           Us...
UserControl Leicht zu erstellen und benutzen Code-Behind (Blend, Visual Studio) Struktur = Content Element-Referenzierung ...
UserControl im MVVM-Kontext  WPF Custom Controls: UX Design und Entwicklung   26
UserControl im MVVM-Kontext                                             Controls                             UserControls ...
UserControl im MVVM-Kontext        UserControls dienen der  Zusammenfassung und Gruppierung  mehrerer Controls und Layout ...
Custom Control  •   Ableitung von einer konkreten      Klasse ≠ UserControl  •   Styling- und Templating-Möglichkeiten  • ...
UserControl vs. Custom Control                             UserControl            Custom ControlTechnikLogik & VisualStyli...
UserControl vs. Custom Control                             UserControl            Custom ControlTechnikLogik & VisualStyli...
UserControl vs. Custom Control                             UserControl            Custom ControlTechnik                   ...
UserControl vs. Custom Control                             UserControl            Custom ControlTechnik                   ...
UserControl vs. Custom Control                             UserControl            Custom ControlTechnik                   ...
UserControl vs. Custom Control                             UserControl            Custom ControlTechnik                   ...
UserControl vs. Custom Control                             UserControl            Custom ControlTechnik                   ...
Wann ist ein Custom Control sinnvoll?  WPF Custom Controls: UX Design und Entwicklung   36
Wann ist ein Custom Control sinnvoll?       WPF Standard         Control?  WPF Custom Controls: UX Design und Entwicklung ...
Wann ist ein Custom Control sinnvoll?       WPF Standard                    WPF Standard         Control?                 ...
Wann ist ein Custom Control sinnvoll?       WPF Standard                    WPF Standard         Styling und         Contr...
Wann ist ein Custom Control sinnvoll?       WPF Standard                    WPF Standard         Styling und         Contr...
Wann ist ein Custom Control sinnvoll?       WPF Standard                    WPF Standard          Styling und         Cont...
Wann ist ein Custom Control sinnvoll?       WPF Standard                    WPF Standard          Styling und         Cont...
Wann ist ein Custom Control sinnvoll?       WPF Standard                    WPF Standard          Styling und         Cont...
Weitere Überlegungen  WPF Custom Controls: UX Design und Entwicklung   37
Weitere Überlegungen •   Prototyp vs. Produktiv-Code  WPF Custom Controls: UX Design und Entwicklung   37
Weitere Überlegungen •   Prototyp vs. Produktiv-Code •   Wiederverwendbarkeit  WPF Custom Controls: UX Design und Entwickl...
Weitere Überlegungen •   Prototyp vs. Produktiv-Code •   Wiederverwendbarkeit •   Produktivität bei großen Projekten  WPF ...
Weitere Überlegungen •   Prototyp vs. Produktiv-Code •   Wiederverwendbarkeit •   Produktivität bei großen Projekten •   K...
Konsistenz im User Interface (Beispiel)  WPF Custom Controls: UX Design und Entwicklung   38
Unterschiede                                 Designer                       Developer        Button                       ...
Unterschiede                                 Designer                       Developer        Button                       ...
Unterschiede                                 Designer                       Developer        Button                       ...
Unterschiede                                 Designer                       Developer        Button                       ...
Umsetzung                   Vorgehensweise + Beispiele       Button            Button                                     ...
Nicht dieoptimaleLösung!
2. Strategie
Live Demo
Blendability  •   XAML friendly und Blend kompatibel  •   Default Property Values, Styles und Templates  •   Zusätzliche R...
Blendability - TemplatePartAttribute  WPF Custom Controls: UX Design und Entwicklung   71
Blendability - ContentPropertyAttribute  WPF Custom Controls: UX Design und Entwicklung   72
Blendability - AlternateContentProperty  WPF Custom Controls: UX Design und Entwicklung   73
Blendability - Description Attribut  WPF Custom Controls: UX Design und Entwicklung   74
Blendability - Description Attribut  WPF Custom Controls: UX Design und Entwicklung   75
Blendability - StyleTypedPropertyAttribute  WPF Custom Controls: UX Design und Entwicklung   76
Fazit  WPF Custom Controls: UX Design und Entwicklung   77
Fazit  Custom Controls machen Sinn!  WPF Custom Controls: UX Design und Entwicklung   77
Fazit  Custom Controls machen Sinn!     •    verbessern die User Experience  WPF Custom Controls: UX Design und Entwicklun...
Fazit  Custom Controls machen Sinn!     • verbessern die User Experience     • sorgen für Konsistenz  WPF Custom Controls:...
Fazit  Custom Controls machen Sinn!     • verbessern die User Experience     • sorgen für Konsistenz     • machen uns prod...
Fazit  Custom Controls machen Sinn!     • verbessern die User Experience     • sorgen für Konsistenz     • machen uns prod...
Fazit  Custom Controls machen Sinn!     • verbessern die User Experience     • sorgen für Konsistenz     • machen uns prod...
Fazit  Custom Controls machen Sinn!     • verbessern die User Experience     • sorgen für Konsistenz     • machen uns prod...
WPF Custom Controls                        UX Design und Entwicklung                        DISKUSSION     Vielen Dank für...
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
WPF Custom Controls: UX-Design and -Development @ dotnet Cologne Conference
Nächste SlideShare
Wird geladen in …5
×

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

11.894 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×