CODEWITHSUNDEEP
xamlxamarinxamarin.forms
JDalri
JDalri

Reputation: 388

Xamarin forms vertically center text over image

I'm learning Xamarin and I want to display an image as background with some texto over this image...

Just that, I manage to acomplish, but the text is displayed at the top left corner of the image.

I'd like the text to be placed at the vertical center of the image, but stick to the left side of it.

My code so far XAML:

<Grid RowSpacing="0">
        <Grid.RowDefinitions>
            <RowDefinition Height="20*" ></RowDefinition>
            <RowDefinition Height="65*"></RowDefinition>
            <RowDefinition Height="15*"></RowDefinition>
        </Grid.RowDefinitions>

        <RelativeLayout Grid.Row="0">
            <Image Source="login.png" Aspect="Fill" />
            <Label Text="Bem vindo" TextColor="White" FontSize="22"></Label>
        </RelativeLayout>

        <Label Grid.Row="1" Text="linha 2" BackgroundColor="Coral"></Label>
        <Button Grid.Row="2" Text="linha 3" BackgroundColor="DarkRed"></Button>
    </Grid>

I've tried verticalOptions and such, but with no effect.

One thing that kind of worked is settin a Maring property to the label, but that way, the label would be centered only to the device I'm testing on. Other devices, smaller or greater, the label could (and probably would) be placed at the wrong place.

Any help?

Upvotes: 3

Views: 7386

Answers (1)

Diego Rafael Souza
Diego Rafael Souza

Reputation: 5314

You don't need a RelativeLayout inside the Grid. The Grid itself already is able to handle views overlay besides let your code clearer.

It may works:

<Grid RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="20*"></RowDefinition>
        <RowDefinition Height="65*"></RowDefinition>
        <RowDefinition Height="15*"></RowDefinition>
    </Grid.RowDefinitions>

    <Image Grid.Row="0" Grid.Column="0"
           Source="login.png"
           HorizontalOptions="FillAndExpand"
           VerticalOptions="FillAndExpand" 
           Aspect="Fill" />
    <Label Grid.Row="0" Grid.Column="0"
           Text="Bem vindo" 
           HorizontalOptions="FillAndExpand"
           VerticalOptions="FillAndExpand"
           HorizontalTextAlignment="Start"
           VerticalTextAlignment="Center"
           TextColor="White" 
           FontSize="22"/>

    <Label Grid.Row="1" 
           Text="linha 2" 
           BackgroundColor="Coral"/>
    <Button Grid.Row="2" 
            Text="linha 3" 
            BackgroundColor="DarkRed"/>
</Grid>

Upvotes: 15

Related Questions