1 / 34

Silverlight Styling mit Expression Blend

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.

mliss
Download Presentation

Silverlight Styling mit Expression Blend

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Silverlight Stylingmit Expression Blend Christian Moser Software Developer and UX Designer Zühlke Engineering AG http://www.wpftutorial.net

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

  3. Projekt Pizza Shop

  4. Projekt Pizza Shop - Gestylt

  5. Motivation zum Styling • Ein übersichtliches Screendesign steigert die Usability • Bilder und Farben transportieren Emotionen • Markante Farben und Formen schaffen einen Wiedererkennungseffekt • Das Nutzungserlebnis wird gesteigert

  6. Inline Styling

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

  8. Inline-Styling Ohne Styling Mit Styling

  9. Vorteile von Inline-Styles • Ergebnis ist direkt sichtbar • Einfaches Konzept • Keine Beeinflussung von anderen Elementen • Geeignet für Eigenschaften, die nur für ein Control gelten

  10. Nachteile des Inline-Stylings • Die XAML Datei wird gross und unübersichtlich • Durch die hohe Redundanz wird das Design schlecht wartbar

  11. Analogie: Inline-Styles in HTML

  12. CSS Styles in HTML Definition Anwendung

  13. Styles

  14. Styles • Trennen die grafischePräsentationvomInhalt • FassengleicheEigenschaftenzusammen • Können auf mehrere Controls angewendetwerden • Das Design istbesserwartbar

  15. Grenzen von Styles • Das Ausseheneines Controls kannnichtbeliebigverändertwerden (z.Bsp. Form) • Fehlersuche in komplexen Styles kannaufwändigsein

  16. Beispiel eines Styles Definition Anwendung

  17. Ressourcen

  18. Ressourcen • Sind Objekte, die von mehreren Controls verwendetwerdenkönnen • Ressourcenkönnen an jedes Control angehängtwerden • Ressourcenwerdenhierarchischvererbt • EineRessourcewirddurcheineneindeutigenSchlüsselidentifiziert

  19. Beispiele von Ressourcen

  20. Control Templates

  21. Aufbau von Silverlight Controls • Logik und Präsentationsindgetrennt • Die Logikdefiniert die Eigenschaften und das Verhalten • Die Präsentationwirddurchein Template definiert • Templates bestehenwiederumausprimitiven Controls • Jedes Controls hat ein Default Template • Das Template kannersetztwerden

  22. Innenleben eines Templates In den Warenkorb Binding Binding Binding Binding Binding Binding Background BorderThikness Content BorderBrush IsFocussed IsEnabled Button

  23. Content Presenter • Stellt den InhaltderContentEigenschaftinnerhalbeinesControlTemplatesdar Content Presenter

  24. ControlTemplatefüreinen Button Definition Anwendung

  25. Zustände von Controls • Pro GruppeistnureinZustandaktiv • AktiveZuständewerdenüberlagert Common States Disabled Normal MouseOverPressed Unfocused Focus States Focused

  26. Zustände von Controls • Die möglichenZuständewerdendurch das Control vorgegeben • Das ControlTemplatedefiniert das AussehenderverschiedenenZustände • DerVisualStateManagersteuert die Zustände und Übergänge

  27. DataTemplates

  28. Data Templates • Definieren das Ausseheneines Items in einerListe • DerDataContextist auf das dazugehörigeDatenobjektderListegesetzt

  29. Default Data Template ItemTemplate

  30. Benutzerdefiniertes Template ItemTemplate

  31. Anordnung der Items ändern ItemsPanelTemplate

  32. Third-Party Libraries http://www.telerik.com/silverlight http://www.infragistics.com http://www.componentone.com

  33. Zusammenfassung • Inline Stylingisteinfach, das Design istjedochschlechtwartbar • Styles fassenEingenschaftenzusammen und können auf mehrere Controls angewendetwerden. • ControlTemplatesersetzen das Ausseheneines Controls • DataTemplatesersetzen das Ausseheneines Items in einerListe

More Related