Geek Answers Handbook

Xaml how to float text over image

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

They are currently inside the stack panel 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 kind of xaml would I use to place centered text over the image?

For example, to display London above the image of the city with this font "Segoe Keycaps".

London

+5
source share
3 answers

Use <Grid>or <Canvas>instead <StackPanel>, and the elements will be drawn on top of each other.

+5
source

I have added some code examples if this 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>
+3
source

Xamarin:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Image
        x:Name="ml"
        Source="btn_LineType.png">
    </Image>
    <Label 
        HorizontalOptions="CenterAndExpand" 
        VerticalOptions="EndAndExpand" 
        Text="SomeText">
    </Label>
</Grid>
0

More articles:


All Articles