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.579 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
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
11.579
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
5.576
Aktionen
Geteilt
0
Downloads
62
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • \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

    ×