Tips when using Styles in WP7

published on: 1/7/2011 | Views: N/A | Tags: Styling UI BestPractices

by WindowsPhoneGeek

A Style is basically a collection of property settings applied to multiple instances of the same type. Style mechanism in Silverlight for Windows Phone 7 allows us to encapsulate control property values as a reusable resource.We can store Styles in separate files from our page or we can place them in the Resources section of the page.

NOTE:You can set a Style on any element that derives from FrameworkElement through its Style property. Style is most commonly declared with the x:Key attribute as a resource inside the Resources section in a XAML file and then referenced as a StaticResource.

NOTE: When creating a Style with ExpressionBlend (Edit Style –> Create Empty) it automatically add the style into the App.xaml Resources section as an external resource dictionary.

<Application.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="TestStyles.xaml"/>
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Application.Resources>

You can examine the style itself in TestStyles.xaml,
<Style x:Key="TextBlockStyle1" TargetType="TextBlock">
  <Setter Property="Foreground" Value="Orange"/>
  <Setter  Property="FontSize" Value="24"/>
  <Setter  Property="VerticalAlignment" Value="Bottom"/>
</Style>

NOTE:In addition to defining basic property settings (Color, Font, Size, Margins, etc), styles in Silverlight can also be used to define and re-use Control Templates.For more information about the ControlTemplate take a loot the the previous post: Working with ControlTemplates in Silverlight for WP7.

NOTE:If there is more than one setter in the setter collection with the same Property value, the setter that is declared last is used. Similarly, if you set a value for the same property in a style and on an element directly, the value set on the element directly takes precedence.

NOTE:You must set the TargetType property when you create a Style. If you do not, an exception is thrown.

Example:

<Grid>
<Grid.Resources>
<Style TargetType="TextBlock" x:Key="TextBlockStyle1">
       <Setter Property="Foreground" Value="Orange"/>
      <Setter  Property="FontSize" Value="24"/>
      <Setter  Property="VerticalAlignment" Value="Bottom"/>
     <Setter Property="Template">
                  ….
      </Setter>
    </Style>
</Grid>
</Grid>

...
<TextBlock Style="{StaticResource TextBlockStyle1}"/>

Reference: Style Class on MSDN

You can also follow us on Twitter @winphonegeek

Comments

Our Top Articles & Free books

WP7 WatermarkedTextBox custom control

Tips when using Styles in WP7

Comments

Add comment to 'Tips when using Styles in WP7'

Our Top Articles & Free books

Our Top Tips & Samples