Using an image as a mask so that WP7 theme’s are honoured


image

So you want an icon for your button, and you want this icon to adhere to the chosen theme.

Currently the solutions I’ve seen use two icons, one for dark and another for light.

My way is to use a single icon that acts as a mask.

Let’s begin.

1. choose icon

Include the icon into your project.

Let’s take the current WP7 icons, which are provided as light/dark versions. We don’t care which you take because in the end they will be treated as masks anyway.

image

In this example I am going to take the dark version of the icon “appbar.feature.camera.rest.png”. I could easily have taken the light version.

image  image

Just drag the image into your project, or use the “Add Existing Item” menu to add the image.

Here is a picture of the image added to my Blend project.

image

2. Add Button

Drag a button onto the canvas, a button auto-magically inherits the theme of the device. So if they have a dark theme the important bits of the button will appear light, vice versa.

The below image shows a standard button on a standard phone page in blend.

image

The image below shows what the above standard button looks like in a running app under the two different themes (light/dark).

image  image

3. Turn image into a mask and link to a button

 

Set the button to use the image as a mask

Get yourself to the “OpacityMask” area in blend …

image

Set the “OpacityMask” to use a “TileBrush”

image

Set the ImageSource to the image we choose in step “appbar.feature.camera.rest.png

image

What this does is turns the image into a mask, so that background colour of the button shines through this mask. Smile Smile cool huh, finally a useful use case for the “Opacity Mask” !!!!

Here is what it looks like when it is correctly setup, notice the camera image is now white as it is now treated as a mask!

image

Now if you look at the canvas you see that the image is indeed working as a mask, the image below shows that the text “Button” shines through the image. The outline of the camera is coming through.

image

4. Make the altered button theme aware

Have the full mask come through as the contrast of the background. To do this we change the background brush to use “PhoneBackgroundContrastColor” . This will guarantee that the correct theme contrast is used..

Before the change :

image

After the change:

image

Notice that the FULL image mask now shines through using the contrast to the background. That is, it is using the contrast colour to shine thru the mask. So under a light theme the contrast, dark” shines through the mask. Here’s the running app under the two different themes

image image

Conclusion

This is the easiest approach I’ve found to using images in WP7 that honour theming. If your feeling up for it, play with the background/opacity colours and use the accent/contrast styles, you’ll be surprised with what you can do. As long as you use masks and standard styles your buttons will theme well Smile

19 responses to “Using an image as a mask so that WP7 theme’s are honoured

  1. Pingback: Using an image as a mask so that WP7 theme’s are honoured | Online Advertising, Web Development & General Rantings

  2. Thank you very much for sharing this! I’m sure this trick will save lot of time mucking around to support both themes.

    Cheers,
    Indyfromoz

  3. Nice work. I never really understood the usage of Opacity Mask, but now I do understand it. Thanks.

  4. Pingback: Utiliser et modifier les couleurs de thèmes sous Windows Phone 7 « Sebastien Mornas's Blog

  5. Hmm, but what happened to the button border? Is there a way to retain, that, or perhapse have a rounded border?

  6. I think you should just to save png image with rounded border.

  7. wow thanks for sharing … I’ve learnt so much from you, i hope you keep posting awesome content🙂

  8. Great and simple explanation, thank you!

    As one of the previous posters asked, is there a way to retain the original button border, ie. I want to see the white camera on a black background, with the white button border around the camera, and vice versa for the black.

    • theres 2 approaches
      1. The actual image you use as a mask should have the circle as part of it
      2. The style of the button has a circle in it that has it’s color bound to the contrast style color.

      The second approach is probably the least invasive, and it’s easy enough to create a buttonstyle with that circle and have all your buttons use that style. Thats the approach i would take personally🙂

  9. Hi again,

    I’ve been trying to use two images: an icon and the circle from the standard icon set for the dark theme. I set these as OpacityMask for the button, and everything is fine (as in, the themes are applied properly). Problem starts when I want to press the button and I want the inside of the circle to briefly change to the opposing color, and the icon to also change to opposing color – which is what the Application Bar buttons automatically do. But I can’t seem to get it to work – either the icon keeps disappearing, or the background won’t change to white. In one instance I managed to change the background, but it took over the whole button and showed me a white square – not good when I want to get a circle…

    Now if I understand the opacity mask correctly, you can’t actually do it using just one set of icons (say, only the dark theme). Is that correct? Do you know how to make a button that is a) theme-aware b) has a circle c) changes color when pressed? I would love a code sample if you’d be so inclined.

    Thank you for your help!

  10. Awesome man! Thanks a lot!

  11. We can also add border and inverse the color when pressed on this theme aware button. Hope it helps.

    http://nirmitk26.blogspot.com/2011/02/round-button-in-windows-phone-7.html

  12. Pingback: La vraie nature de WinRT | TechnoVeille

  13. Pingback: » [Micropost] Cambiar el color de un logo con el Background - New forms of Code

  14. The best revenge for the people who have insulted you is the success that you can show them later

  15. Pingback: [Micropost] Cambiar el color de un logo con el Background | BackApp

  16. Getting up in the morning is a sign that you can achieve the goals life better than yesterday

  17. Kemarahan dendam dan kebencian adalah perusak rezeki anda hari ini.

  18. Pingback: How do I add windows phone system colors to icon using expression design? - Popular Windows Phone Questions

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