Adding a text to an image in WP7

Some time ago, somebody asked me if it was possible to add some text to an image, and then use the combination image-text as a new image. It seems that it’s rather easy to do, and it’s very similar to the way you could achieve this in regular Silverlight.

I started out by adding this piece of XAML to my MainPage :

<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>

<RowDefinition Height=”532*” />

<RowDefinition Height=”75*” />


<Grid Name=”TheImage”>

<Image Name=”sourceImg” Stretch=”Uniform”

Source=”/WritableBitMap;component/Images/BasilicaNotreDame_ROW459961203.jpg” />

<TextBlock VerticalAlignment=”Center” Text=”(c) U2U” HorizontalAlignment=”Center”/>

<Grid Grid.Row=”1″ Name=”grid1″>

<ColumnDefinition Width=”*” />

<ColumnDefinition Width=”*” />


<Button Content=”Get Picture” Name=”button1″ Click=”button1_Click” />

<Button Content=”Save Img” Grid.Column=”1″ Name=”addMsgButton”

Click=”addMsgButton_Click” />



This creates something like this :

What I need to do now, is to use the grid, combining the Image and the TextBlock, as a new Image. To make it a bit more complete I also added a Button for fetching a picture from the PictureHub:

private void button1_Click(object sender, RoutedEventArgs e)

PhotoChooserTask task = new PhotoChooserTask();

task.Completed += (s, ea) =>


img = new BitmapImage();


sourceImg.Source = img;



For creating an new Image, out of the original one plus the added TextBlock, I use the WriteableBitmap-class, which has a constructor that takes a UIElement as input. This one I save in the service-state, and I open another page (WrittenImage.xaml).

WriteableBitmap wbm = new WriteableBitmap(TheImage, null);

PhoneApplicationService.Current.State["bmp"] = wbm;

NavigationService.Navigate(new Uri(“/WrittenImage.xaml”, UriKind.Relative));

WrittenImage.xaml is a simple Page that only has one Image-control (called writtenImage, to make a little bit confusing – I like confusion, sometimes). In the loaded-event I have following code :

if (PhoneApplicationService.Current.State.ContainsKey(“bmp”))


writtenImage.Source = PhoneApplicationService.Current.State["bmp"] as WriteableBitmap;


Nice. The next question is then if it’s possible to save this image in the Picture-hub. That’s for a next time…

If you know of a more elegant way of adding text to an image, let it know !