Monday, September 3, 2012

Tip: Theme friendly UI for WP7

For some upcoming changes to the Geocaching Helper for WP7 I encountered a situation where images wouldn't be displayed correctly when the user changes the theme of their WP7 device. Depending on the theme, the background of your app will also change to white or black (if you didn't customize the whole app theme).
Now one solution would be to create white icons for the black theme and black ones for the black theme, but that's not a solution I wanted to accept. It's just too much work, maintaining two versions of icons.
So I researched the topic a little more and found this really helpful blog post. I'll try to explain the core idea of the approach and if you want to know more, just follow the link ;)

Every UIElement has a property named OpacityMask. This OpacityMask maps it's content to the element or visual you're using it on. It will ignore the actual color of the content and just uses the content's opacity and apply it to the element/visual.

Here's an example in XAML to visualize it. When applying the OpacityMask to the Rectangle element, only the used image of the ImageBrush will be visible inside the Rectangle.

<Rectangle Fill="#FFFFFF" Height="116" Stroke="Black"  Width="115">    <Rectangle.OpacityMask>
        <ImageBrush Stretch="Fill" ImageSource="icons/appbar.delete.rest.png"/>
    </Rectangle.OpacityMask>
</Rectangle>


The images below show a real example of how I use this .NET feature for the Geocaching Helper (and hints a new feature for the app ;). I only created the dashboard images once and the OpacityMask does the rest.

Labels: , , , ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home