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