How to apply theme resources for Windows Phone

  • Article

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

 

A theme is a set of resources used to personalize the visual elements on a Windows Phone device. A theme ensures that controls and UI elements appear consistently across Windows Phone applications. This topic describes how to create an application that uses theme resources and programmatically determines the theme background and accent color. For more information about using theme resources, see Themes for Windows Phone.

This topic contains the following sections.

 

Theme overview

When a user enables a system-wide theme in the Settings menu on the device, only the theme-related colors in your application change. Fonts and control sizing do not change. For example, if the user sets the accent color to purple on the theme settings page, only the UI elements that are configured with the appropriate resource brush will change to purple in your application.

Note

If your application is dormant when another theme is selected, your application will not adapt to the new theme until the next time it is started.

The following image shows how the application that is created in this topic adapts to theme changes.

From left to right, this image shows the application when the background is dark and the accent color is red. On the Settings page, theme is selected to open the theme page. On the theme page, the theme is changed to a light background with a mango accent color. When the application is launched again, it reflects the new theme settings.

Applying Theme Resources

In this step you create the application, set the application and page title, and add a rectangle and two texBlock controls. Each control demonstrates a different technique for using theme resources.

To prepare the application

  1. In Visual Studio, create a new project by selecting the File | New Project menu command.

  2. The New Project window is displayed. Expand the Visual C# templates, and then select the Windows Phone templates.

  3. Select the **Windows Phone App ** template. Fill in the Name box with a name of your choice.

  4. Click OK. The Windows Phone platform selection dialog box is displayed.

  5. In the Target Windows Phone Version menu, ensure that Windows Phone OS 7.1 is selected.

  6. Click OK. A new project is created, and MainPage.xaml is opened in the Visual Studio designer window.

  7. On MainPage.xaml, replace the grid named LayoutRoot with the following code.

        <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="THEME RESOURCES" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="example" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

        </Grid>
    </Grid>

To apply theme resources

  1. On MainPage.xaml, add the following code within the Grid named ContentPanel.

                <Rectangle 
                Height="100" 
                HorizontalAlignment="Left" 
                Margin="12,33,0,0" 
                Name="rectangle1" 
                Stroke="{StaticResource PhoneForegroundBrush}" 
                StrokeThickness="1" 
                VerticalAlignment="Top" 
                Width="200" 
                Fill="{StaticResource PhoneAccentBrush}" />

    This code creates a rectangle on the upper left-hand portion of the page. Notice the Fill attribute and how it uses the StaticResource markup to specify a resource brush named PhoneAccentBrush. This particular brush allows the rectangle color to respond to system-wide theme changes. For example, if the user modifies the accent color in the phone settings menu, the rectangle will change to that color.

  2. On MainPage.xaml, add the following code within the Grid named ContentPanel, below the rectangle.

                <TextBlock 
                Height="45" 
                HorizontalAlignment="Left" 
                Margin="20,154,0,0" 
                Name="textBlock1" 
                Text="background =" 
                VerticalAlignment="Top" 
                Width="400" 
                FontFamily="{StaticResource PhoneFontFamilySemiLight}" 
                FontSize="{StaticResource PhoneFontSizeLarge}"/>

    This code creates a TextBlock control, named textBlock1, that is situated underneath the rectangle. The StaticResource markup has been applied to the FontFamily and FontSize attributes. The TextBlock text is set to the font PhoneFontFamilySemiLight (Segoe WP SemiLight) and font size PhoneFontSizeLarge (32). For more information about resource definitions, see Theme resources for Windows Phone.

  3. On MainPage.xaml, add the following code within the Grid named ContentPanel, below textBlock1.

                <TextBlock 
                Height="35" 
                HorizontalAlignment="Left" 
                Margin="21,205,0,0" 
                Name="textBlock2" 
                Text="accent color = " 
                VerticalAlignment="Top" 
                Width="400" 
                Style="{StaticResource PhoneTextAccentStyle}"/>

    This code creates a second TextBlock, named textBlock2, and applies a style resource, PhoneTextAccentStyle. This theme resource applies a font (PhoneFontFamilySemiBold), a font size (PhoneFontSizeNormal), and foreground (PhoneAccentBrush). The phone accent brush will cause the TextBlock text color to change when a system-wide theme is initiated.

Determining Theme Background and Accent Color

The theme background and accent color are available as current application resources. In this section, the PhoneDarkThemeVisibility and PhoneAccentColor resources are used to determine the theme background and accent color, respectively.

Note

An XNA Framework-based Windows Phone application can use theme resources by accessing the current application object as demonstrated in this section. For more information about the available theme resources, see Theme resources for Windows Phone.

To determine the theme background

  • In the code-behind file for the main page, MainPage.xaml, add the following code to the MainPage constructor, below the call to InitializeComponent.

            // Determine the visibility of the dark background.
        Visibility darkBackgroundVisibility = 
            (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];

        // Write the theme background value.
        if (darkBackgroundVisibility == Visibility.Visible)
        {
            textBlock1.Text = "background = dark";
        }
        else
        {
            textBlock1.Text = "background = light";
        }

            ' Determine the visibility of the dark background.
        Dim darkBackgroundVisibility As Visibility =
            CType(Application.Current.Resources("PhoneDarkThemeVisibility"), Visibility)

        ' Write the theme background.
        If (darkBackgroundVisibility = Visibility.Visible) Then

            textBlock1.Text = "background = dark"

        Else
            textBlock1.Text = "background = light"

        End If

    This code demonstrates how to determine the current theme background from the application resource settings. It determines the type of background used by the current theme and writes it to the Text property of textBlock1.

To determine the theme accent color

  • In MainPage.xaml, add the following code to the MainPage constructor, below the code that was just added.

            // Determine the accent color.
        Color currentAccentColorHex = 
            (Color)Application.Current.Resources["PhoneAccentColor"];

        string currentAccentColor = "";

        switch (currentAccentColorHex.ToString())
        {
            case "#FF1BA1E2": currentAccentColor = "blue"; break;

            case "#FFA05000": currentAccentColor = "brown"; break;

            case "#FF339933": currentAccentColor = "green"; break;

            case "#FFE671B8": currentAccentColor = "pink"; break;

            case "#FFA200FF": currentAccentColor = "purple"; break;

            case "#FFE51400": currentAccentColor = "red"; break;

            case "#FF00ABA9": currentAccentColor = "teal (viridian)"; break;

            // Lime changed to #FFA2C139 in Windows Phone OS 7.1.
            case "#FF8CBF26": 
            case "#FFA2C139": currentAccentColor = "lime"; break;

            // Magenta changed to # FFD80073 in Windows Phone OS 7.1.
            case "#FFFF0097": 
            case "#FFD80073": currentAccentColor = "magenta"; break;

            // #FFF9609 (previously orange) is named mango in Windows Phone OS 7.1.
            case "#FFF09609": currentAccentColor = "mango (orange)"; break;

            // Mobile operator or hardware manufacturer color
            default: currentAccentColor = "custom eleventh color"; break;
        }

        // Write the current accent color.
        textBlock2.Text = "accent color = " + currentAccentColor;

            ' Determine the accent color.
        Dim currentAccentColorHex As Color =
            CType(Application.Current.Resources("PhoneAccentColor"), Color)

        Dim currentAccentColor As String = ""

        Select currentAccentColorHex.ToString()

            Case "#FF1BA1E2"
                currentAccentColor = "blue"

            Case "#FFA05000"
                currentAccentColor = "brown"

            Case "#FF339933"
                currentAccentColor = "green"

            Case "#FFE671B8"
                currentAccentColor = "pink"

            Case "#FFA200FF"
                currentAccentColor = "purple"

            Case "#FFE51400"
                currentAccentColor = "red"

            Case "#FF00ABA9"
                currentAccentColor = "teal (viridian)"

            Case "#FF8CBF26", "#FFA2C139"
                ' Lime changed to #FFA2C139 in Windows Phone OS 7.1.
                currentAccentColor = "lime"

            Case "#FFFF0097", "#FFD80073"
                ' Magenta changed to # FFD80073 in Windows Phone OS 7.1.
                currentAccentColor = "magenta"

            Case "#FFF09609"
                ' #FFF9609 (previously orange) is named mango in Windows Phone OS 7.1.
                currentAccentColor = "mango (orange)"

            Case Else
                ' Mobile operator or hardware manufacturer color
                currentAccentColor = "custom eleventh color"

        End Select

        ' Write the current accent color.
        textBlock2.Text = "accent color = " & currentAccentColor

    This code demonstrates how to determine the accent color from the application theme resources. It determines the accent color value and then uses a switch/case statement to assign a friendly name to the Text property of textBlock2.

Testing the Application

In this section, the application is run before and after the theme background and accent color are changed.

To test the application

  1. Run the application by selecting the Debug | Start Debugging menu command. This will open the emulator window and launch the application. You should see the Rectangle and the two TextBlock controls on the screen. The Rectangle should have a color that matches the current system theme, and two text blocks that have different fonts and font sizes applied. Also, notice that the second TextBlock has a text color that matches the current system theme, because a PhoneAccentBrush was applied to the foreground.

  2. Change the theme background and accent color. On Start, swipe to the App list and then tap Settings. From Settings, tap theme and then select a different background and accent color.

  3. Start the application again and see how it adapts to the new theme. The following image demonstrates the steps in this section.

See Also

Other Resources

Themes for Windows Phone

Theme resources for Windows Phone