Xamarin.Forms Relative Layout Xaml

Asked

Viewed 560 times

1

I’m trying to create a screen that has an image at the end of the screen and above it is the login buttons, like this one: tela que quero

with the yellow rectangle below and the buttons above it. but I can’t do it, see the result:

tela que fiz

and here comes the code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="vanhack.mobile.StartPageView"
         BackgroundImage="bg.png">
<StackLayout>
    <Label Text="Tentando Fazer um layout bonito!" VerticalOptions="Center"></Label>
    <StackLayout VerticalOptions="EndAndExpand">
        <RelativeLayout >
            <Button Text="Log In With e-mail" Command="{Binding EmailLoginCommand}"></Button>
            <Image Source="Rectangle2.png"  />
            <Image Source="linkedin.png"  />
        </RelativeLayout>

    </StackLayout>
</StackLayout>

How to fix?

xamarin xaml xamarin-forms

2 answers

1


The image is overwriting the button, just add the button after the image.

<RelativeLayout >
   <Image Source="Rectangle2.png"  />
   <Image Source="linkedin.png"  />
   <Button Text="Log In With e-mail" Command="{Binding EmailLoginCommand}"></Button>
</RelativeLayout>

See the result:


Captura tela

I recommend using Grid if you want to position the button in a specific location of the screen.

Color of the button used in the example:

<Button Text="Log In With e-mail" Command="{Binding EmailLoginCommand}" BackgroundColor="#F2C248"/>

  • Hello! Thanks for answering, did you see that the yellow triangle lost size? wanted it to be msm size. = x

  • @Biellx I don’t have the original images you used, if you leave a link to them here I can do another test. It is also worth remembering that it is important to be positive and mark the answer as accepted.

0

Dude, don’t use this relative layout, try to use the grid that’s much better.

The grid has a behavior similar to the table where you control the number of rows and columns and can use the same span in html

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />  isso serve para ajustar a largura de acordo com o tamanho do campo
      <ColumnDefinition Width="*" />isso serve para preencher todo o espaço
      <ColumnDefinition Width="40" />
    </Grid.ColumnDefinitions>

Browser other questions tagged xamarin xaml xamarin-forms

You are not signed in. Login or sign up in order to post.