SETTING VISIBILITY BASED ON WP7 THEMES

INTRO

The Technical Certification Requirements for Windows Phone 7 applications state the following:

5.5.2 – Content and Themes

Application content, such as text and visual elements, must be visible and legible regardless of the phone theme. For example, if the phone theme changes from black background to white background, the text and visual elements of your application must be visible or legible.

This means that everything in you application, including images, should be well visible in the dark and light theming of the phone. Handling dark/light support is very easy.

DARK AND LIGHT

Often companies have a special version of their logos for different situations (Bing for example). For this demo I’ve created two logos, a black and a white one. The white logo should be used when the theme is set to dark, the other when a light theme has been selected.

I’ve dropped these images into Expression Blend and grouped them together in a Grid control (Ctrl+G ). This grid is placed in the title panel, which resulted in the following XAML:

<StackPanel x:Name="TitlePanel" Grid.Row="0">
    <Grid>
        <Image Source="Logo-Black.png" />
        <Image Source="Logo-White.png" />
    </Grid>
</StackPanel> 

To get the white logo to be only visible when the dark theme is set, select the image of the white logo. With the image selected click on the “Advanced options”-peg:

Now, go to “System Resource” and select the “PhoneDarkThemeVisibility” resource.

At this point a green rectangle is placed around the visibility property of the images letting you know a resource is set on that property.

To get the same results for the dark logo, repeat the process on that images. But select the “PhoneLightThemeVisibility” instead.

TESTING

To test the results right in Expression Blend, got to the “Device” tab. On this tab you can set different device settings, including the Accent Color and the Light or Dark themes.

Switching from dark to light and back should result in the images below.

WRAP-UP

Setting the visibility like this can be done on every element in your XAML. And whenever you need to use the visibility for other purposes, there’s a similar resource for the Opacity.

Reference To: http://www.timmykokke.com/2012/01/setting-visibility-based-on-wp7-themes/#.Tx3BK5wBfT0.twitter