Nathiel Paulino Nathiel Paulino - 1 month ago 31
C# Question

How to adjust a label "inside" of a image Xamarin Forms

I'm trying to put a label inside of my image, I couldn't use a

Margin
property, because some reason it's not working, untill now I have this :enter image description here

And what I want is this :

enter image description here

XAML :

<StackLayout Orientation="Vertical">
<Label HorizontalOptions="Center" Text="something" TextColor="Black"/>
<Image HorizontalOptions="Center" Source="spin.png"/>
</StackLayout>

Answer

You need a Grid instead of a StackLayout (notice how both the Label and the Image are in the same row and column:

<Grid HorizontalOptions="Center"
      VerticalOptions="Center">
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <Image HorizontalOptions="Center"
         Source="spin.png"
         Grid.Row="0"
         Grid.Column="0"/>
  <Label HorizontalOptions="Center"
         Text="something"
         TextColor="Black"
         Grid.Row="0"
         Grid.Column="0"/>
</Grid>

Because the Label is listed beneath the Image in the XAML code above, the Label will be drawn on top of the Image.

You also could have used an AbsoluteLayout, which is another layout that is good at layering things.