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

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

on

  • 10,705 views

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

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.

Statistics

Views

Total Views
10,705
Views on SlideShare
5,107
Embed Views
5,598

Actions

Likes
0
Downloads
21
Comments
0

36 Embeds 5,598

http://www.ergosign.de 3659
http://ergosign.de 603
http://www.davidchristian.de 414
http://localhost 330
http://davidchristian.de 177
http://www.hci-hub.de 87
http://user-centered-design.net 79
http://www.gui-dance.com 57
http://usability-engineering.org 31
http://usability-engineering.net 28
http://gui-dance.com 26
http://www.ergosign.ch 24
http://hci-hub.de 18
http://user-centred-design.com 13
http://ergosign.ch 7
http://paper.li 6
http://ergosing.de 5
http://software-ergonomics.ergosign.net 4
http://usability-engineering.de 4
http://www.theentireworldiscountingonyou.de 3
http://shaping-interaction.com 3
http://switzerland.ergosign.de 2
http://192.168.0.178 2
http://a0.twimg.com 2
http://usability.ergosign.net 2
http://ergosign.net 2
http://feedproxy.google.com 1
http://ergosign-technologies.com 1
http://ergo-score.com 1
http://www.ergosign.at 1
http://192.168.0.107 1
http://192.168.0.69 1
http://software-ergonomie.ergosign.de 1
http://next-generation-hmi.com 1
http://usability.ergosign.de 1
http://untnwald.de 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • THE CONFERENCE FOR BETTER USER INTERFACES WPF Custom Controls UX#Design#und#,Entwicklung Björn#Busch,Geertsema David#C.#Thömmes User#Interface#Designer#& User#Interface# Head#of#UI#Development Developer Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Ausblick Was+sind+Custom+Controls? Warum+sind+Custom+Controls+gut? Was+sollte+man+in+Bezug+auf+Design+und+ Umsetzung+beachten? Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Custom+Controls+–+Fluch+oder+Segen? …kommt&drauf&an&;) Unterschiedliche+Standpunkte Designer(vs.(Entwickler Unterschiedliche+Ausprägungen Von(reinem(Styling(bis(hin(zu(komplexem(Au=au(und( Verhalten Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Einteilung Ab+welchem+Punkt+sprechen+wir+von+einem+ Custom+Control? Button StandardBu*on Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Einteilung Ab+welchem+Punkt+sprechen+wir+von+einem+ Custom+Control? Button Button EinfachgestylterBu*on Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Einteilung Ab+welchem+Punkt+sprechen+wir+von+einem+ Custom+Control? Button Button Wetter Vorhersage laden KomplexgestylterBu*on Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Einteilung Ab+welchem+Punkt+sprechen+wir+von+einem+ Custom+Control? Button Button Wetter Wetter laden Vorhersage laden KomplexgestylterBu*on mitzusätzlicherFunk>onalität Kombiniertes&Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Einteilung Ab+welchem+Punkt+sprechen+wir+von+einem+ Custom+Control? Wetter Wetter laden Button Button Vorhersage laden … Standard ? Custom Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Eine(Frage(des(Standpunkts:+Designer Button Standard#Control Button Lediglich#Styling Wetter Vorhersage laden Lediglich#Styling Wetter laden KombinaJon#verschiedener#exisJerender Controls#um#besseres#Feedback#zu#liefern Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Ist+doch+nur+ein+BuGon… Prominenz Abhebung(von(anderen,( Wetter kleineren(BuDons Vorhersage laden Verständlichkeit Icon(+(Label(+(Zusatzinfo besser(als(nur(Label Wetter laden Feedback Systemstatus(kommunizieren Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Custom+Controls+=+Schlechte+Usability? Historische+Angst+vor+eigenen+Controls: Custom(Controls((›((Kein(StandardMVerhalten! Besondere+Sorgfalt+beim+Design+notwendig! • Alle(Zustände(abbilden Hover,#Pressed,#usw. • SoforPge(Erkennbarkeit(sicherstellen Ein#BuPon#muss#ohne#Probleme#als#BuPon#erkennbar#sein WPF+ermöglicht+dies+ohne+(zu)+großen+Aufwand Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Entscheidungshilfen • Ursprungskomponente(n)( Button klar(erkennbar • Verbesserung(der(Usability(des( Standard(Controls Wetter z.B.#Erweiterung#um#Icons,#größere# Vorhersage laden SchriR,#inhaltliche#Differenzierung,# besseres#Feedback#u.a. • KombinaPon(eines(akPven( Wetter laden Controls(mit(passiven(Controls Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Vorsicht+bei KombinaSon+von+akSven+Controls BuDon(auf(BuDon? Visuelle+und+kogniSve+Überforderung+des+ Anwenders Zu(viele(Icons/Labels(etc.,(zu(bunt(u.ä. KompleG+neuen+InterakSonen Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES KompleG+neue+InterakSon Indiskutabel,+solange+eine+Umsetzung+mit+ “normalen”+MiGeln+ohne+große+Nachteile+ möglich+ist. User[TesSng+absolut+notwendig Nur+sinnvoll,+wenn+Anwender+das+Control+sehr+ häufig+verwenden+und/oder+ein+sehr+großer+ Effizienzgewinn+erreicht+wird Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Kuchen+mag+eigentlich+jeder… Oder? PieMenüim3DModelerMODO Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Beispiel:+Verbesserung+des+Tab+Controls Live+Demo Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Aber+nun+zur+Technik Wir+haben+da+schon+mal+was+vorbereitet… Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Kurzer+Einschub+zur+Erinnerung Style Wertegruppierung#für#verschiedene#ProperJes# eines#Controls#(Se*er) Control+Template Strukturbaum,#AuYau#eines#Controls Template+Binding Anbindung#von#ProperJes#zwischen#individuellem#Control#und# Template#(z.B.#Border,Background#›#BuPon,Background) Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Eine(Frage(des(Standpunkts:+Developer Button Standard#Control Button Lediglich#Styling Wetter Vorhersage laden Kommt+drauf+an… Wetter laden Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES “Custom+Control”+–+eine+DefiniSon Von+einer+Basisklasse+des+Frameworks+ abgeleitet Zusätzliche+FunkSonalität+ Methoden,(FunkPonen,(ProperPes,(InstanzM(/( Klassenvariablen Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Welche+Basisklasse? ListBox TabControl BuPonBase ScrollViewer ItemsControl UserControl FrameworkElement ProgressBar UIElement Slider TabItem ComboBox Control TreeView Panel ContentControl Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Welche+Basisklasse? ListBox TabControl BuPonBase ScrollViewer ItemsControl UserControl? FrameworkElement ProgressBar UIElement Slider TabItem ComboBox Control TreeView Panel ContentControl Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES UserControl • Leicht+zu+erstellen+und+benutzen • Code[Behind+(Blend,+Visual+Studio) • Struktur+=+Content • Element[Referenzierung+mit+x:Name • Styling+und+TemplaSng+möglich • Erweiterungen+möglich Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES UserControl Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES UserControl Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES UserControl+im+MVVM[Kontext Controls UserControls+›+Views ViewModels Models … Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES UserControl+im+MVVM[Kontext UserControlsdienender ZusammenfassungundGruppierung mehrererControlsundLayoutPanels. Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control • Ableitung(von(einer(konkreten(Klasse(≠(UserControl • StylingM(und(TemplaPngMMöglichkeiten • Visueller(Au=au(im(ControlTemplate • Default(Style(möglich((Generic.xaml) • Zusammenfassung(in(einer(Control(Library(möglich • ElementMReferenzierung(über(OnApplyTemplate() Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES UserControl Custom+Control Technik XAML#+#Code#Behind Klasse#+#Style#+#Template Logik+&+Visual Harte#Verdrahtung Getrennt Styling Hart Flexibel Aufwand Wenig Etwas#aufwändiger Reuse Schlecht Gut Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES UserControl Custom+Control Technik XAML#+#Code#Behind Klasse#+#Style#+#Template Logik+&+Visual Harte#Verdrahtung Getrennt Styling Hart Flexibel Aufwand Wenig Etwas#aufwändiger Reuse Schlecht Gut Also:+Custom+Controls+nicht+auf+Basis+ von+UserControl+implemenSeren! Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Wann+ist+ein+Custom+Control+sinnvoll? WPF#Standard# WPF#Standard# Styling#und# Control? Controls#gruppieren? TemplaJng? ValueConverter#/# APached#ProperJes#/# DriPanbieter? MarkupExtension? Behaviors? Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Wann+ist+ein+Custom+Control+sinnvoll? WPF#Standard# WPF#Standard# Styling#und# Control? Controls#gruppieren? TemplaJng? ValueConverter#/# APached#ProperJes#/# DriPanbieter? MarkupExtension? Behaviors? Eigenes+Custom+Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Weitere+Überlegungen • Prototyp+vs.+ProdukSv[Code • Wiederverwendbarkeit • ProdukSvität+bei+großen+Projekten • Konsistenz+im+User+Interface Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Konsistenz+im+User+Interface+(Beispiel) Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Konsistenz+im+User+Interface Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Konsistenz+im+User+Interface Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Konsistenz+im+User+Interface Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Unterschiede:+Designer Developer Button Standard#Control Button Lediglich#Styling Wetter Vorhersage laden Lediglich#Styling Wetter laden KombinaJon#verschiedener#exisJerender Controls#um#besseres#Feedback#zu#liefern Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Vorgehensweise+++Beispiele Button Button Wetter Wetter laden Vorhersage laden Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Nicht die optimale Lösung! Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung 2. Strategie Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Schon geklärt: ButtonContent schlechte Idee, daher besser Umsetzung leichtgewichtiges Custom Control Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Umsetzung Live+Demo Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Blendability • XAML(friendly(und(Blend(kompaPbel • Default(Property(Values,(Styles(und(Templates • Zusätzliche(Ressourcen(als(Property • Keine(Pefe(Verschachtelung(der(Templates • Mode(ProperPes(für(Trigger • Design(Time(Features(verwenden( • ... Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Blendability+[+TemplatePartAGribute Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Blendability+[+ContentPropertyAGribute Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Blendability+[+AlternateContentProperty Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Blendability+[+DescripSon+AGribut Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Blendability+[+DescripSon+AGribut Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Blendability+[+StyleTypedPropertyAGribute Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Fazit Custom+Controls+machen+Sinn! • verbessern(die(User(Experience • sorgen(für(Konsistenz • machen(uns(produkPver((ImplemenPerung,(Blendability) • sind(einfach(cool(;) Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Fazit Custom+Controls+machen+Sinn! • verbessern(die(User(Experience • sorgen(für(Konsistenz • machen(uns(produkPver((ImplemenPerung,(Blendability) • sind(einfach(cool(;) Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Fazit Custom+Controls+machen+Sinn! • verbessern(die(User(Experience • sorgen(für(Konsistenz • machen(uns(produkPver((ImplemenPerung,(Blendability) • sind(einfach(cool(;) …aber+mit+Bedacht+einzusetzen. Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11
  • THE CONFERENCE FOR BETTER USER INTERFACES Björn#Busch,Geertsema David#C.#Thömmes User#Interface#Designer#& User#Interface# Head#of#UI#Development Developer buschg@ergosign.de www.ergosign.de thoemmes@ergosign.de VIELEN(DANK(FÜR(DIE(AUFMERKSAMKEIT! DISKUSSION Sponsoren: Veranstalter: Donnerstag, 8. Dezember 11