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”/>
</Grid>
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.