XAML, как разместить текст поверх изображения

Question

У меня есть несколько изображений, которые я хочу отобразить с водяным знаком.

В настоящее время они находятся в пределах стековой панели следующим образом:

<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}" />

Какой xaml я бы использовал, чтобы плавать по центруповерх изображения?

Например, для отображения Лондона поверх изображения города с этим шрифтом "Segoe Keycaps".

Answer 1

Используйте <Grid> или <Canvas> вместо <StackPanel>, и элементы будут нарисованы друг на друге.

Answer 2

Я добавил пример кода на случай, если это поможет.

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