silverlight styling mit expression blend
DESCRIPTION
Silverlight Styling mit Expression Blend. Christian Moser Software Developer and UX Designer Zühlke Engineering AG http://www.wpftutorial.net. Ziel meiner Session. Sie kennen die wichtigsten Styling-Konzepte von Silverlight Sie wissen , welches Konzept sich für welche Lösung eignet. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/1.jpg)
Silverlight Stylingmit Expression BlendChristian MoserSoftware Developer and UX DesignerZühlke Engineering AG
http://www.wpftutorial.net
![Page 2: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/2.jpg)
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
![Page 3: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/3.jpg)
Projekt Pizza Shop
![Page 4: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/4.jpg)
Projekt Pizza Shop - Gestylt
![Page 5: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/5.jpg)
Motivation zum StylingEin übersichtliches Screendesign steigert die UsabilityBilder und Farben transportieren EmotionenMarkante Farben und Formen schaffen einen WiedererkennungseffektDas Nutzungserlebnis wird gesteigert
![Page 6: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/6.jpg)
Inline Styling
![Page 7: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/7.jpg)
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
![Page 8: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/8.jpg)
Inline-StylingOhne Styling
Mit Styling
![Page 9: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/9.jpg)
Vorteile von Inline-Styles
Ergebnis ist direkt sichtbarEinfaches KonzeptKeine Beeinflussung von anderen ElementenGeeignet für Eigenschaften, die nur für ein Control gelten
![Page 10: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/10.jpg)
Nachteile des Inline-Stylings
Die XAML Datei wird gross und unübersichtlichDurch die hohe Redundanz wird das Design schlecht wartbar
![Page 11: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/11.jpg)
Analogie: Inline-Styles in HTML
![Page 12: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/12.jpg)
CSS Styles in HTMLDefinition
Anwendung
![Page 13: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/13.jpg)
Styles
![Page 14: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/14.jpg)
StylesTrennen die grafische Präsentation vom Inhalt Fassen gleiche Eigenschaften zusammenKönnen auf mehrere Controls angewendet werdenDas Design ist besser wartbar
![Page 15: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/15.jpg)
Grenzen von StylesDas Aussehen eines Controls kann nicht beliebig verändert werden (z.Bsp. Form)Fehlersuche in komplexen Styles kann aufwändig sein
![Page 16: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/16.jpg)
Beispiel eines StylesDefinition
Anwendung
![Page 17: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/17.jpg)
Ressourcen
![Page 18: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/18.jpg)
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
![Page 19: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/19.jpg)
Beispiele von Ressourcen
![Page 20: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/20.jpg)
Control Templates
![Page 21: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/21.jpg)
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
![Page 22: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/22.jpg)
Background Content
BorderBrush IsEnabled
BorderThikness
IsFocussedButton
Innenleben eines Templates
In den Warenkorb
Binding Binding Binding Binding Binding Binding
![Page 23: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/23.jpg)
Content PresenterStellt den Inhalt der Content Eigenschaft innerhalb eines ControlTemplates dar
ContentPresenter
![Page 24: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/24.jpg)
ControlTemplate für einen ButtonDefinition
Anwendung
![Page 25: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/25.jpg)
Zustände von Controls
Disabled Normal MouseOver Pressed
Unfocused
Focused
Common States
FocusStates
Pro Gruppe ist nur ein Zustand aktivAktive Zustände werden überlagert
![Page 26: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/26.jpg)
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
![Page 27: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/27.jpg)
DataTemplates
![Page 28: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/28.jpg)
Data TemplatesDefinieren das Aussehen eines Items in einer ListeDer DataContext ist auf das dazugehörige Datenobjekt der Liste gesetzt
![Page 29: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/29.jpg)
Default Data Template
ItemTemplate
![Page 30: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/30.jpg)
Benutzerdefiniertes Template
ItemTemplate
![Page 31: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/31.jpg)
Anordnung der Items ändern
ItemsPanelTemplate
![Page 32: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/32.jpg)
Third-Party Libraries
http://www.telerik.com/silverlight http://www.infragistics.com
http://www.componentone.com
![Page 33: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/33.jpg)
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
![Page 34: Silverlight Styling mit Expression Blend](https://reader036.vdocuments.us/reader036/viewer/2022062813/568165ed550346895dd912a8/html5/thumbnails/34.jpg)