WP7 provides some level of customization by allowing users to change the theme of their devices. There are 2 themes to choose from, the dark or light theme.
The dark theme makes the background black and the foreground white whereas the light theme swap it the other way around.
What this does is that if you have a white icon button in your application it will look fine in the dark theme. However, once the user changes to the light theme, your button will blend in totally with the background!
Take a look at the images below:
icon on dark theme
and this is what happens on a light theme
Where is my icon?!! :'(
Exploring the windows phone 7 further, you will notice that the application bar buttons doesn't have this issue at all and react very well to the different themes.
Hmm...I remember tackling a similar issue when I was working with Adobe Flash by using a concept called masking to provide a stencil over a display area. This gives the designer the flexibility to easily change what is being shown through the mask. The good thing is that Silverlight supports this concept as well.
Every UIElement exposes a property called OpacityMask which can be assigned a Brush instance that acts as a stencil, brush brush brush....ImageBrush! =)
The idea is to have an ImageBrush representing a png image and have it set to the content of a button. Then we can edit the ControlTemplate of a button and bind the opacity mask of the ContentPresenter to the Content property of the button.
And the result:
Works pretty well for me!
You can download the code here.
*Do take note that the control template has an Ellipse that makes up the outer circle of the button. I take this approach because the downloaded Windows Phone 7 icon pack only have the png of the icon image without the outer circle. This makes it easy to use these icons as it is. If you have icons that already have the outer circle, just tweak the template to remove the outer circle :)
Have fun!
No comments:
Post a Comment