Silverlight Styles

.Silverlight Styles

"Element Level styles have the highest precedence. If you define a style at the element level, no other style will be able to override it."

Styling controls in Silverlight are very similar to the styles used with HTML in cascading style sheets. Silverlight styling can be set at three levels:

  1. Element Level - only the specific element will be affected by the style.

  2. Page Level - styles are applied on all the corresponding elements on a specific page.

  3. Global Level - styles are defined in App.xaml and apply to all the corresponding elements throughout the application.

Element Level Styling

Element level styling is coded by putting the style property setting inside the element tag. This causes the property setting to affect only the one element. This can become messy when there are multiple elements of the same kind that need to have the same style properties.

.Element Level Styling


Element Level Styling

Page Level Styling

Page-level styles are applied on all the elements of the same type on a specific page.

  • A page-level style is defined under the top parent element (e.g. under UserControl in MainPage.xaml).

  • Page-level styles are put inside the attached property Resources (e.g. UserControl.Resources).

  • There are three types of page-level styles:
    1. Explicit - a style that has its TargetType property set.

    2. Implicit - (introduced in Silverlight 4), uses the TargetType property to assign the styles to all the elements of a particular type.

    3. BasedOn - allows for the cascading of styles, similar to the cascading in Cascading Style Sheets.

Explicit Page-level Styling

An explicit style is a style with its TargetType property set.

  • The name of the explicit style must be defined as a static resource.

  • The content of the style is defined with Setter elements which consist of (Property-Value) pairs.

  • Multiple explicit styles, for an element type, can be defined for a page. The name of each defined style must be unique.

  • After the explicit style is defined, the elements on the page must be bound to the style. The binding is accomplished by adding the Style property of the elements, example:

    Style = "{StaticResource TextBoxStyle}"

  • Elements can only be bound to styles that are defined for that particular type of element. A compilation error will result if you bind a style to the wrong type of element.
.Explicit Page-level Styling


Explicit Page-level Styling

Implicit-Page Level Styling

Implicit styles were introduced in Silverlight 4. Implicit styles are similiar to explicit styles, except Implicit styles do not have a key.

  • Without a key property, the Implicit style uses the TargetType property to assign the styles to all the elements of a particular type.
.Implicit Page-level Styling


Implicit Page-level Styling (All TextBlocks on the Page Receive the Style)

BasedOn-Page Level Styling

BasedOn styles allow for the cascading of styles, similar to the cascading in cascading style sheets.

  • To use BasedOn styles, you first create a explicit base style. Then define other explicit or implicit styles of that element type using the BasedOn property to pick up the styles defined in the base style, in addition to the styles defined in the style definition.
.BasedOn-Page Level Styling


BasedOn-Page Level Styling

Global Level Styling

Global-level styles are defined in App.xaml and apply to all the elements throughout the application. The same definitions created in the page xaml can be moved to App.xaml and will then have a global scope.

.Global Level Styling


Global Level Styling

Style Precedence

Style scope listed in order of highest precedence are:

  1. Element Level
  2. Page Level
  3. Global Level

Element Level styles have the highest precedence. If you define a style at the element level no other style will be able to override it.



Reference Articles


Top