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.
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.
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.
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.
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.
The image below shows what the above standard button looks like in a running app under the two different themes (light/dark).
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 …
Set the “OpacityMask” to use a “TileBrush”
Set the ImageSource to the image we choose in step “appbar.feature.camera.rest.png”
What this does is turns the image into a mask, so that background colour of the button shines through this mask. 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!
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.
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 :
After the change:
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
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