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.

Logo-WhiteLogo-Black

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:

image

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

image

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.

image

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

image

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.

2 comments

  1. This is a simple way to just add black/white aware images.
    However there is a penalty for using opacity mask when it comes to performance so it may be a thing to look into.
    When you have colored logos I would instead suggest setting the image as a property in the view mode and the just bind to that property. Much in the same way as I did in this post (although this was for the panorama).

  2. Pingback: WindowsDevNews.com

Leave a Reply