wpf custom controls: ux-design and -development @ gui&design conference

Sponsoren:

THE CONFERENCE FOR BETTER USER INTERFACES

Veranstalter:

WPF Custom ControlsUX#Design#und#,Entwicklung

Björn#Busch,GeertsemaUser#Interface#Designer#&Head#of#UI#Development

David#C.#ThömmesUser#Interface#Developer

Donnerstag, 8. Dezember 11


Sponsoren: Veranstalter:

AusblickWas+sind+Custom+Controls?

Warum+sind+Custom+Controls+gut?

Was+sollte+man+in+Bezug+auf+Design+und+Umsetzung+beachten?




Custom+Controls+–+Fluch+oder+Segen?…kommt&drauf&an&;)

Unterschiedliche+StandpunkteDesigner(vs.(Entwickler

Unterschiedliche+AusprägungenVon(reinem(Styling(bis(hin(zu(komplexem(Au=au(und(Verhalten




EinteilungAb+welchem+Punkt+sprechen+wir+von+einem+Custom+Control?

Standard'Bu*on

Button


Ab+welchem+Punkt+sprechen+wir+von+einem+Custom+Control?

Button



Einteilung

Einfach'gestylter'Bu*on

Button



Button



Einteilung

Komplex'gestylter'Bu*on

ButtonWetterVorhersage laden



Button



Einteilung

Komplex'gestylter'Bu*on

mit'zusätzlicher'Funk>onalität

Kombiniertes&Control

Button WetterVorhersage laden

Wetter laden



Button



Einteilung

Button WetterVorhersage laden

Wetter laden

Standard Custom?…


Button



Eine(Frage(des(Standpunkts:+Designer

Button

WetterVorhersage laden

Wetter laden

Lediglich#Styling

KombinaJon#verschiedener#exisJerenderControls#um#besseres#Feedback#zu#liefern

Standard#Control

Lediglich#Styling




Ist+doch+nur+ein+BuGon…ProminenzAbhebung(von(anderen,(kleineren(BuDons

VerständlichkeitIcon(+(Label(+(Zusatzinfobesser(als(nur(Label

FeedbackSystemstatus(kommunizieren


Wetter laden




Custom+Controls+=+Schlechte+Usability?Historische+Angst+vor+eigenen+Controls:Custom(Controls((›((Kein(StandardMVerhalten!

Besondere+Sorgfalt+beim+Design+notwendig!• Alle(Zustände(abbildenHover,#Pressed,#usw.

• SoforPge(Erkennbarkeit(sicherstellenEin#BuPon#muss#ohne#Probleme#als#BuPon#erkennbar#sein

WPF+ermöglicht+dies+ohne+(zu)+großen+Aufwand




Entscheidungshilfen• Ursprungskomponente(n)(klar(erkennbar• Verbesserung(der(Usability(des(Standard(Controlsz.B.#Erweiterung#um#Icons,#größere#SchriR,#inhaltliche#Differenzierung,#besseres#Feedback#u.a.

• KombinaPon(eines(akPven(Controls(mit(passiven(Controls

Button


Wetter laden




Vorsicht+beiKombinaSon+von+akSven+ControlsBuDon(auf(BuDon?

Visuelle+und+kogniSve+Überforderung+des+AnwendersZu(viele(Icons/Labels(etc.,(zu(bunt(u.ä.

KompleG+neuen+InterakSonen




KompleG+neue+InterakSonIndiskutabel,+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




Kuchen+mag+eigentlich+jeder…

Oder?Pie'Menü'im'3D'Modeler'MODO




Beispiel:+Verbesserung+des+Tab+Controls

Live+Demo




Aber+nun+zur+TechnikWir+haben+da+schon+mal+was+vorbereitet…




Kurzer+Einschub+zur+ErinnerungStyleWertegruppierung#für#verschiedene#ProperJes#eines#Controls#(Se*er)

Control+TemplateStrukturbaum,#AuYau#eines#Controls

Template+BindingAnbindung#von#ProperJes#zwischen#individuellem#Control#und#Template#(z.B.#Border,Background#›#BuPon,Background)


Button



Eine(Frage(des(Standpunkts:+Developer

Button


Wetter laden

Lediglich#Styling

Standard#Control

Kommt+drauf+an…




“Custom+Control”+–+eine+DefiniSon

Von+einer+Basisklasse+des+Frameworks+abgeleitet

Zusätzliche+FunkSonalität+Methoden,(FunkPonen,(ProperPes,(InstanzM(/(Klassenvariablen




Welche+Basisklasse?

UserControl

ContentControl

FrameworkElement

Control

ItemsControl

UIElementProgressBar

BuPonBase

TabItem

TabControlListBox

SliderComboBox Panel

TreeView

ScrollViewer




Welche+Basisklasse?

ContentControl

FrameworkElement

Control

ItemsControl

UIElementProgressBar

BuPonBase

TabItem

TabControlListBox

SliderComboBox Panel

TreeView

ScrollViewerUserControl?




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




UserControl




UserControl+im+MVVM[Kontext

Controls

UserControls+›+Views

ViewModels

Models

…




UserControl+im+MVVM[Kontext

UserControls'dienen'der'

Zusammenfassung'und'Gruppierung'mehrerer'Controls'und'Layout'Panels.




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()




Custom+Control




Custom+ControlUserControl

Technik

Logik+&+Visual

Styling

Aufwand

Reuse

XAML#+#Code#Behind Klasse#+#Style#+#Template

Harte#Verdrahtung Getrennt

Hart Flexibel

Wenig Etwas#aufwändiger

Schlecht Gut




Custom+ControlUserControl

Technik

Logik+&+Visual

Styling

Aufwand

Reuse

XAML#+#Code#Behind Klasse#+#Style#+#Template

Harte#Verdrahtung Getrennt

Hart Flexibel

Wenig Etwas#aufwändiger

Schlecht Gut

Also:+Custom+Controls+nicht+auf+Basis+von+UserControl+implemenSeren!




Wann+ist+ein+Custom+Control+sinnvoll?

WPF#Standard#Control?

WPF#Standard#Controls#gruppieren?

Styling#und#TemplaJng?

ValueConverter#/#MarkupExtension?

APached#ProperJes#/#Behaviors? DriPanbieter?


Eigenes+Custom+Control



Wann+ist+ein+Custom+Control+sinnvoll?

WPF#Standard#Control?

WPF#Standard#Controls#gruppieren?

Styling#und#TemplaJng?

ValueConverter#/#MarkupExtension?

APached#ProperJes#/#Behaviors? DriPanbieter?




Weitere+Überlegungen• Prototyp+vs.+ProdukSv[Code

• Wiederverwendbarkeit

• ProdukSvität+bei+großen+Projekten

• Konsistenz+im+User+Interface




Konsistenz+im+User+Interface+(Beispiel)




Konsistenz+im+User+Interface


Button



Unterschiede:+Designer

Button


Wetter laden

Lediglich#Styling

KombinaJon#verschiedener#exisJerenderControls#um#besseres#Feedback#zu#liefern

Standard#Control

Lediglich#Styling

Developer




UmsetzungVorgehensweise+++Beispiele

ButtonButton WetterVorhersage laden

Wetter laden




Umsetzung




Umsetzung

Nicht die optimale Lösung!




Umsetzung




Umsetzung

2. Strategie




UmsetzungSchon geklärt: ButtonContent schlechte Idee, daher besser leichtgewichtiges Custom Control




Umsetzung




Umsetzung

Live+Demo




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




Blendability+[+TemplatePartAGribute




Blendability+[+ContentPropertyAGribute




Blendability+[+AlternateContentProperty




Blendability+[+DescripSon+AGribut




Blendability+[+StyleTypedPropertyAGribute




FazitCustom+Controls+machen+Sinn!• verbessern(die(User(Experience• sorgen(für(Konsistenz• machen(uns(produkPver((ImplemenPerung,(Blendability)• sind(einfach(cool(;)




FazitCustom+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:

DISKUSSIONVIELEN(DANK(FÜR(DIE(AUFMERKSAMKEIT!

Björn#Busch,GeertsemaUser#Interface#Designer#&Head#of#UI#Development

[email protected]

David#C.#ThömmesUser#Interface#[email protected]


mailto:[email protected]




http://www.ergosign.de

http://www.ergosign.de

wpf custom controls: ux-design and -development @ gui&design conference

Technology