Silverlight Stylingmit Expression BlendChristian MoserSoftware Developer and UX DesignerZühlke Engineering AG

http://www.wpftutorial.net

Ziel meiner SessionSie kennen die wichtigsten Styling-Konzepte von SilverlightSie wissen, welches Konzept sich für welche Lösung eignet.Sie können die Konzepte in Ihren Projekten anwenden

Projekt Pizza Shop

Projekt Pizza Shop - Gestylt

Motivation zum StylingEin übersichtliches Screendesign steigert die UsabilityBilder und Farben transportieren EmotionenMarkante Farben und Formen schaffen einen WiedererkennungseffektDas Nutzungserlebnis wird gesteigert

Inline Styling

Inline-Styling

Jedes Silverlight Control besitzt eine Liste von Eigenschaften

Height, Width, Background, Foreground, FontFamily, FontSize,Content, Margin, Padding,…

Die Eigenschaften können direkt am Control überschrieben werden

Inline-StylingOhne Styling

Mit Styling

Vorteile von Inline-Styles

Ergebnis ist direkt sichtbarEinfaches KonzeptKeine Beeinflussung von anderen ElementenGeeignet für Eigenschaften, die nur für ein Control gelten

Nachteile des Inline-Stylings

Die XAML Datei wird gross und unübersichtlichDurch die hohe Redundanz wird das Design schlecht wartbar

Analogie: Inline-Styles in HTML

CSS Styles in HTMLDefinition

Anwendung

Styles

StylesTrennen die grafische Präsentation vom Inhalt Fassen gleiche Eigenschaften zusammenKönnen auf mehrere Controls angewendet werdenDas Design ist besser wartbar

Grenzen von StylesDas Aussehen eines Controls kann nicht beliebig verändert werden (z.Bsp. Form)Fehlersuche in komplexen Styles kann aufwändig sein

Beispiel eines StylesDefinition

Anwendung

Ressourcen

RessourcenSind Objekte, die von mehreren Controls verwendet werden könnenRessourcen können an jedes Control angehängt werdenRessourcen werden hierarchisch vererbtEine Ressource wird durch einen eindeutigen Schlüssel identifiziert

Beispiele von Ressourcen

Control Templates

Aufbau von Silverlight ControlsLogik und Präsentation sind getrenntDie Logik definiert die Eigenschaften und das VerhaltenDie Präsentation wird durch ein Template definiertTemplates bestehen wiederum aus primitiven ControlsJedes Controls hat ein Default TemplateDas Template kann ersetzt werden

Background Content

BorderBrush IsEnabled

BorderThikness

IsFocussedButton

Innenleben eines Templates

In den Warenkorb

Binding Binding Binding Binding Binding Binding

Content PresenterStellt den Inhalt der Content Eigenschaft innerhalb eines ControlTemplates dar

ContentPresenter

ControlTemplate für einen ButtonDefinition

Anwendung

Zustände von Controls

Disabled Normal MouseOver Pressed

Unfocused

Focused

Common States

FocusStates

Pro Gruppe ist nur ein Zustand aktivAktive Zustände werden überlagert

Zustände von ControlsDie möglichen Zustände werden durch das Control vorgegebenDas ControlTemplate definiert das Aussehen der verschiedenen ZuständeDer VisualStateManager steuert die Zustände und Übergänge

DataTemplates

Data TemplatesDefinieren das Aussehen eines Items in einer ListeDer DataContext ist auf das dazugehörige Datenobjekt der Liste gesetzt

Default Data Template

ItemTemplate

Benutzerdefiniertes Template

ItemTemplate

Anordnung der Items ändern

ItemsPanelTemplate

Third-Party Libraries

http://www.telerik.com/silverlight http://www.infragistics.com

http://www.componentone.com

ZusammenfassungInline Styling ist einfach, das Design ist jedoch schlecht wartbarStyles fassen Eingenschaften zusammen und können auf mehrere Controls angewendet werden.ControlTemplates ersetzen das Aussehen eines ControlsDataTemplates ersetzen das Aussehen eines Items in einer Liste