Adding a text to an image in WP7

• Posted by Michaël Van Wesemael on April 20, 2011
• 4 comments

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″>
<Grid.RowDefinitions>
<RowDefinition Height=”532*” />
<RowDefinition Height=”75*” />
</Grid.RowDefinitions>
<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 Grid.Row=”1″ Name=”grid1″>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*” />
<ColumnDefinition Width=”*” />
</Grid.ColumnDefinitions>
<Button Content=”Get Picture” Name=”button1″ Click=”button1_Click” />
<Button Content=”Save Img” Grid.Column=”1″ Name=”addMsgButton”
Click=”addMsgButton_Click” />
</Grid>

</Grid>

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();

img.SetSource(ea.ChosenPhoto);

sourceImg.Source = img;

};

task.Show();

}
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 !

Tweet