Make image visible on both white and black background theme color on Windows Phone

The interesting problem in Windows Phone development is how to make your png images visible on both black and white background (theme) that the users could be using. It’s important to have both scenarios covered to be sure that you’ll pass the certification! There are several solutions to this problem, and in this short article I’ll show you 2 ways.

First of all, you can always create two images: one for black background and the other for white background, and then detect any theme change and programmatically set image according to that. For example, you would have ImageBlack.png and ImageWhite.png for black and white background, respectively.

SolidColorBrush backgr =  
if (backgr.Color == Colors.Black)  
   img.Source = new BitmapImage(new Uri("imageBlack.png", UriKind.Relative));
   img.Source = new BitmapImage(new Uri("imageWhite.png", UriKind.Relative));

You would need to check pretty much every time that the change could’ve occurred. OnNavigatedTo event seems like a good way to go.

The more interesting way is to use only one image, image.png, and use the OpacityMask property of Border, Button, Rectangle or some other element, like this:

<Border Width="173" Height="173"  
                    HorizontalAlignment="Right" VerticalAlignment="Bottom" 
                    Background="{StaticResource PhoneForegroundBrush}">
            <ImageBrush ImageSource="image.png" />

The only problem is that you have more XAML code, but it’s better than to do all the programmatic checks whenever there’s a possibility for the background theme color to change.

Read more about opacity mask here:

Hope this helps! :)

About Igor Ralic

Software engineer at Microsoft. Running for Office. Passionate about making an impact with great apps & services. Stays close to coffee and away from coriander. Opinions expressed here are my own.