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

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

AusblickWas+sind+Custom+Controls?

Warum+sind+Custom+Controls+gut?

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

Standard'Bu*on

Button

Donnerstag, 8. Dezember 11

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

Button

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Einteilung

Einfach'gestylter'Bu*on

Button

Donnerstag, 8. Dezember 11

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

Button

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Einteilung

Komplex'gestylter'Bu*on

ButtonWetterVorhersage laden

Donnerstag, 8. Dezember 11

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

Button

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Einteilung

Komplex'gestylter'Bu*on

mit'zusätzlicher'Funk>onalität

Kombiniertes&Control

Button WetterVorhersage laden

Wetter laden

Donnerstag, 8. Dezember 11

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

Button

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Einteilung

Button WetterVorhersage laden

Wetter laden

Standard Custom?…

Donnerstag, 8. Dezember 11

Button

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Eine(Frage(des(Standpunkts:+Designer

Button

WetterVorhersage laden

Wetter laden

Lediglich#Styling

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

Standard#Control

Lediglich#Styling

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

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

FeedbackSystemstatus(kommunizieren

WetterVorhersage laden

Wetter laden

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

WetterVorhersage laden

Wetter laden

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

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

KompleG+neuen+InterakSonen

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Kuchen+mag+eigentlich+jeder…

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Beispiel:+Verbesserung+des+Tab+Controls

Live+Demo

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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)

Donnerstag, 8. Dezember 11

Button

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Eine(Frage(des(Standpunkts:+Developer

Button

WetterVorhersage laden

Wetter laden

Lediglich#Styling

Standard#Control

Kommt+drauf+an…

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

“Custom+Control”+–+eine+DefiniSon

Von+einer+Basisklasse+des+Frameworks+abgeleitet

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Welche+Basisklasse?

UserControl

ContentControl

FrameworkElement

Control

ItemsControl

UIElementProgressBar

BuPonBase

TabItem

TabControlListBox

SliderComboBox Panel

TreeView

ScrollViewer

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Welche+Basisklasse?

ContentControl

FrameworkElement

Control

ItemsControl

UIElementProgressBar

BuPonBase

TabItem

TabControlListBox

SliderComboBox Panel

TreeView

ScrollViewerUserControl?

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

UserControl

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

UserControl

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

UserControl+im+MVVM[Kontext

Controls

UserControls+›+Views

ViewModels

Models

…

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

UserControl+im+MVVM[Kontext

UserControls'dienen'der'

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Custom+Control

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Custom+Control

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Custom+Control

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Custom+Control

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Custom+Control

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Custom+Control

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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!

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

WPF#Standard#Control?

WPF#Standard#Controls#gruppieren?

Styling#und#TemplaJng?

ValueConverter#/#MarkupExtension?

APached#ProperJes#/#Behaviors? DriPanbieter?

Donnerstag, 8. Dezember 11

Eigenes+Custom+Control

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

WPF#Standard#Control?

WPF#Standard#Controls#gruppieren?

Styling#und#TemplaJng?

ValueConverter#/#MarkupExtension?

APached#ProperJes#/#Behaviors? DriPanbieter?

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

• Wiederverwendbarkeit

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

• Konsistenz+im+User+Interface

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Konsistenz+im+User+Interface+(Beispiel)

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Konsistenz+im+User+Interface

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Konsistenz+im+User+Interface

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Konsistenz+im+User+Interface

Donnerstag, 8. Dezember 11

Button

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Unterschiede:+Designer

Button

WetterVorhersage laden

Wetter laden

Lediglich#Styling

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

Standard#Control

Lediglich#Styling

Developer

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

UmsetzungVorgehensweise+++Beispiele

ButtonButton WetterVorhersage laden

Wetter laden

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Nicht die optimale Lösung!

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

2. Strategie

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Umsetzung

Live+Demo

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Blendability+[+TemplatePartAGribute

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Blendability+[+ContentPropertyAGribute

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Blendability+[+AlternateContentProperty

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Blendability+[+DescripSon+AGribut

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Blendability+[+DescripSon+AGribut

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

Blendability+[+StyleTypedPropertyAGribute

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

Donnerstag, 8. Dezember 11

THE CONFERENCE FOR BETTER USER INTERFACES

Sponsoren: Veranstalter:

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

…aber+mit+Bedacht+einzusetzen.

Donnerstag, 8. Dezember 11

Sponsoren:

THE CONFERENCE FOR BETTER USER INTERFACES

Veranstalter:

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

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

buschg@ergosign.de

David#C.#ThömmesUser#Interface#Developerthoemmes@ergosign.dewww.ergosign.de

Donnerstag, 8. Dezember 11