Nick's .NET Travels

Continually looking for the yellow brick road so I can catch me a wizard....

Windows Phone 7 and Image Overlays

If you’ve taken a read through the interaction and design guidelines that Microsoft has published on building for Windows Phone 7, or if you’ve listened to some of the recordings from the recent developers days, you may have picked up on a little trick that they use on the Start screen that you might want to take advantage of. On the Start screen the text on the tiles is white but what’s interesting is that no matter what you set the background image to, the text is always readable. How do they do this, well they apply an overlay to the image before applying the text. Depending on whether you are using white (light) or black (dark) you will use either a light or dark overlay.

Let’s look at what happens if you don’t apply an overlay. The following image contains a dark image (ie the TV on the left) and a light image (ie the modem on the right). The top row has text in white, whilst the bottom has text in black. As you can see white text on a dark image works well, as does black text on a light image. One option would be to do some fancy analysis of the image and then determine what color text to use – this is both requires a lot of precious cycles and ends up with a non-uniform (aka messy) interface.


The other alternative is to pick either white or black for the text and then apply an appropriate overlay to the images. In the following image we’ve applied a 20% black overlay to the top row (making the white text readable on both images) and a 20% white overlay to the bottom row (making the black text readable on both images).


So, enough of the mocked up images, show me how to do this in XAML:

<Grid Width="200" Height="200" >
    <Image Source="{Binding SourceImage}" />
    <Border Background="Black" Opacity="0.2"/>
   <TextBlock Text="{Binding ImageTitle}" Foreground=”White”/>

Relatively straightforward – all we need to do is add a Black overlay (in this case I’ve used a Border element) with 20% opacity between the image itself and the White text.

  • yzriel

    8/02/2011 8:22:35 AM |!_/

  • Skybox

    23/02/2011 10:53:14 AM |

    I am happy to read this informative article.Thanks for such a helpful and useful post.

  • New Balance Easytone

    25/02/2011 12:00:26 AM |

    This is very educational content <a href="">New Balance Easytone</a>  and written well for a change. It's nice to see some people still understand how to produce a quality post!

  • tv on pc software

    18/04/2011 5:10:02 AM |

    Whatever is worth doing at all,it's worth doing it well 123

  • Home Improvement and Interior Design

    21/05/2011 8:11:00 PM |

    Aw, this was a really great post. In theory I'd like to write like this also - taking time and real effort to make a good article... but what can I say... I procrastinate alot and never seem to get something done.

Pingbacks and trackbacks (2)+

Comments are closed