Creating a Consistent Look

October 21, 2011

There are different ways to create a consistent look. For example, you can use built-in styles and resources, you can create your own styles, and you can use data templates to customize items in a list.

You Will Learn

• How to use styles built into Windows Phone.
• How to create your own styles.
• What data templates are.

Applies To

• Silverlight for Windows Phone OS 7.1

  

Colors and Themes

A consistent look and adherence to the new Windows user interface (UI) is important for Windows Phone applications. The following illustration shows examples of different accent colors, and the light and dark themes.

Using Built-in Styles

Similar to the relationship between cascading style sheets (CSS) and HTML, XAML enables you to apply the same property settings to control properties using a special syntax called a markup extension. By using styles and resources, you can reuse settings and give your application a consistent appearance.

There are many built-in styles and resources for use in your Windows Phone projects that follow the new Windows UI and are appropriate for both light and dark themes. These resources include brushes, colors, fonts, text styles, and themes.

The following example shows how to set the background of a Button control to a built-in Windows Phone brush resource using a markup extension.

<Button Content="Button" Height="72" Background="{StaticResource PhoneAccentBrush}" Width="160" />

The following illustration shows how to set the background of a button to a built-in Windows Phone brush resource using the Properties window.

Since the background of the previous example is set to PhoneAccentBrush, the button color will be based on the user’s current accent color. The following illustration shows how the button looks when the user’s accent color is set to blue and when it is set to green.

Design Guideline:
If the foreground or background color of a control is explicitly set, verify that the content is visible in both dark and light themes. If the specified color is not visible, also explicitly set the background or foreground color to maintain contrast or choose a more appropriate color.

The following example shows a TextBlock from the summary page of the Fuel Tracker application where the Style property is set to a Windows Phone style resource using a markup extension.

<TextBlock Grid.Row="0" Grid.Column="0"
    Style="{StaticResource PhoneTextLargeStyle}"
    Text="CURRENT MPG:"
    HorizontalAlignment="Right" VerticalAlignment="Center"/>

Design Guideline:
Maintain consistent capitalization practices to prevent a disjointed or jagged reading experience.

To see a list of the available built-in styles and resources for the phone, see Theme Resources for Windows Phone. For more information about using these styles and resources, see How to: Apply Theme Resources for Windows Phone. For more information about markup extensions, see XAML Overview.

Creating Your Own Styles

If you want to create your own styles, typically you declare the style as a resource of the page or layout panel and apply it as a static resource using a markup extension. Each style typically has a key, which is used to reference it later, and a target type, which indicates what kind of control it should be applied to. The main portion of a style is a collection of Setter objects that contain Property and Value settings. You can create styles in Visual Studio by typing them in XAML, or you can use Expression Blend, which enables you to create styles in a more visual way. When you create resources that set colors, you should make sure your color choices work in both the light and dark themes.

Fuel Tracker uses styles in many locations. For example, the summary page includes the LabelStyle and ValueStyle styles in the first Pivot item that is defined in the Grid resources section. In the summary page file, these styles are applied to TextBlock objects. The following XAML shows the styles and an example of how they are applied.

<Grid.Resources>
    <Style x:Key="LabelStyle" TargetType="TextBlock">
        <Setter Property="HorizontalAlignment" Value="Right"/>
        <Setter Property="Margin" Value="15,5" />
    </Style>
    <Style x:Key="ValueStyle" TargetType="TextBlock">
        <Setter Property="Margin" Value="15,5" />
    </Style>  
</Grid.Resources>

. . .

<TextBlock Grid.Row="2" Grid.Column="0" 
    Style="{StaticResource LabelStyle}"
    Text="date:" /> 

<TextBlock Grid.Row="2" Grid.Column="1"
    Style="{StaticResource ValueStyle}"
    Text="{Binding LastFillup.Date, 
    StringFormat=\{0:d\} }" />

For more information about styles, see Getting Started with Controls and the Style class.

Data Templates

When you bind a collection of objects to a ListBox or other list control, the ListBox displays the string representation of the objects in a collection. To customize the appearance of the objects in the collection you set the ItemTemplate property of a ListBox to a DataTemplate that defines the appearance of your objects. For information about how you can use data templates to customize the look of a list, see Displaying Data with Data Binding.

Next Topic | Previous Topic | Home