Using app bar icons outside the app bar – how to get light / dark theming to work

The Windows Phone SDK provides a bunch of stock app bar icons and there are several other libraries. You can also make your own, by creating a white on transparent image in a png, at 76 x 76 pixels.

These icons when placed in the app bar show as white on a black background whn using the dark theme.  And when you switch to light, the icons switch too, to black on a white background.  However, try to use these icons outside the app bar and you don’t get that automatic theme switching for free. Switch to the light them and you’ll see a white icon on a white background just doesn’t show up.

Of course, if it’s a single static control, you can add both dark and light icons to your solution, name the control and throw a bit of code in the constructor for your page to check the theme and get the correct icon.

However, if your using the icon in a resource, such as a data template for a ListBox or ItemsControl bound to a collection, things are not so simple. This is because when you name something using x:name, it needs to be part of the view to be used in code behind, and can’t simply be a resource. One way to overcome this would be to use an event that fires each time an instance of that resource is being used. Another way is you could put the url in your view model, with some code in the getter to return the correct image, and then bind to that property. However, that’s the sort of thing we’re not supposed to have to do anymore, it kind of feels like a hack, especially the first.

So, what’s a better way?  After much searching I found the answer, here, in the forums on dev.windowsphone.com. Put it in a rectangle with a mask on it.  You only need one version of the icon and you can use this technique anywhere. The XAML I have here is adapted from that solution, which misses off sizing the rectangle.

<Rectangle Width="76" Height="76" Fill="{StaticResource PhoneForegroundBrush}">
    <Rectangle.OpacityMask>
        <ImageBrush ImageSource="/Assets/Icons/WhiteIcon.png" />
    </Rectangle.OpacityMask>
</Rectangle>

The OpacityMask is the key here.  Basically what we are saying is we want a rectangle, where the color will be PhoneForgroundColor (i.e. With on the dark theme and Black on the light theme).  The Opacity mask option uses a single brush and it’s the content of that brush that determines the outcome. Basically, the foreground color will show Everywhere the brush, in this case our icon, isn’t transparent. It doesn’t matter if the dark or light version of an icon is used for this, the result will be the same. As long as the rectangle is being filled with the color you want to show up, and the image (or other brush) you have here contains some transparent sections, you will get a shape forming.

And here’s the result applied to a rubbish / trash bin icon – it’s the normal delete icon in the Windows Phone 8 SDK (and a peak at what’s coming for Shoppers Calculator).

taxblack taxWhite

Advertisements

About bluechrism

I am a software developer with most professional experience in the Windows .Net realm and I'm currently a WPF developer with Starkey Labs. However, I have wanted for some time to start the mobile developer journey properly and being an N900 owner, this was to be in the realm of QT. Job hunting, moving to Minnesota and changing jobs put my plans on hold 6-12 months but things are starting to settle now, just as I'm getting sorted to start some things, Microsoft and Nokia merge. This blog is about my novice mobile development experiences and hopefully will end up complete with links to download some apps on various platforms, but obviously by the name, Sybian, Maemo/Meego and Windows Mobile. In other stuff, I am English, I support Everton FC, I have visited Glastonbury music festival 5 times and recommend it to anyone. I am married and my wife and i have a dog called Friday.
This entry was posted in Development, How To, Microsoft, Silverlight, Windows Phone and tagged , , . Bookmark the permalink.

One Response to Using app bar icons outside the app bar – how to get light / dark theming to work

  1. Pingback: Theming images – why Expression Design is great | The MicroNokia Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s