Windows Phone 7 Drop Shadows

13 July 2010

With the beta release of WP7 it was made clear that DropShadow and Blur effects on text will not make it into v1 presumably for performance reasons.

Well, we didn’t like this and so we set about making a custom WP7 user control to help.

Add a WP7 User control to your project and name it DropShadowTextBlock.xaml.

Here’s the xaml UI. Note that we have hard coded the fact that we have white text with black background, you might want to change that ;)

<UserControl x:Class="AlphaJax.Phone.Controls.DropShadowTextBlock"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008″
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006″
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    x:Name="me">
    <Grid x:Name="LayoutRoot">
        <TextBlock x:Name="tb1" Foreground="Black" Opacity="0.2″ Margin="1,3,0,0″ Text="{Binding Text,ElementName=me}" />
        <TextBlock x:Name="tb2" Foreground="Black" Opacity="0.2″ Margin="-1,3,0,0″ Text="{Binding Text,ElementName=tb1}" />
        <TextBlock x:Name="tb3" Foreground="Black" Opacity="0.4″ Margin="0,2,0,0″ Text="{Binding Text,ElementName=tb1}" />
        <TextBlock x:Name="tb4" Foreground="Black" Opacity="0.2″ Margin="0,3,0,0″ Text="{Binding Text,ElementName=tb1}" />
        <TextBlock x:Name="tb5" Foreground="White" Text="{Binding Text,ElementName=tb1}" />
    </Grid>
</UserControl>

And here’s the code behind that wires everything up.

using System.Windows;
using System.Windows.Controls;
name space AlphaJax.Phone.Controls
{
	public partial class Drop Shad ow TextBlock : UserControl
	{
		public Drop Shad ow TextBlock()
		{
			Initial ize Com po nent();
		}
		public string Text
		{
			get { return (string)GetValue(TextProperty); }
			set { SetValue(TextProperty, value); }
		}
		public static readonly DependencyProperty TextProperty =
		DependencyProperty.Register("Text", typeof(string), typeof(DropShadowTextBlock), new PropertyMetadata(
			new PropertyChangedCallback(TextPropertyChanged)));
			static void TextPropertyChanged(DependencyObject sender, DependencyProperty ChangedE­ven tArgs e)
			{
				var control = sender as DropShadowTextBlock;
				if (control.tb1 != null)
				control.tb1.Text = e.NewValue.ToString();
			}
		}
}

Then all you need to do is add a reference to the namespace containing your controls (ours is shown below)

xmlns:localControls="clr-namespace:AlphaJax.Phone.Controls"

and then you can use it just like a TextBlock for the most part.

<localControls:DropShadowTextBlock x:Name="opponentUsername" Text="{Binding OpponentUsername}" />

As you can see the effect is quite subtle but should make a nice difference to your apps when required.

Windows Phone 7 Drop Shadows

Want to get started?

We would love to help with your next app or game, please do get in touch.