XAML how to float text over image

Question

I have some images that I want to display with a watermark.

Currently they are within a stackpanel as follows:

<StackPanel Orientation="Vertical"
                      Margin= "7,0,0,0" 
                      HorizontalAlignment="Center" >
            <Image Width="60"
                   Height="72"
                   VerticalAlignment="Top"
                   Margin="0 0 10 0"
                   Source="{Binding ImageToWatermark}" />

What xaml would I use to float a centered text over an image?

For example, to display London over a picture of the city with this "Segoe Keycaps" font.

Answer 1

Use <Grid> or <Canvas> instead of <StackPanel> and items will be drawn upon each other.

Answer 2

I've added some sample code in case it helps.

<DataTemplate x:Key="ImageBackgroundBlackBorderedTextTemplate">
            <Grid Height="Auto" Margin="2,5,2,5">
                <Image Stretch="Fill" Source="{Binding ImageUrl}" />
                <Border Background="#80000000" VerticalAlignment="Bottom">
                    <TextBlock  Margin="5,2,5,2" TextWrapping="WrapWholeWords" Text="{Binding Title}"  Style="{StaticResource BaseTextBlockStyle}"/>
                </Border>
            </Grid>
        </DataTemplate>