Align View to bottom and top in RelativeLayout XamarinForms

Question

I want to align one image to the top and one image to the bottom of a RelativeLayout in Xamarin.Forms. How can I do this?

<RelativeLayout>
            <Image 
                Aspect="Fill"
                Source = "header_login.png"></Image>
            <Image 
                Aspect="Fill"
                Source = "login_footer_2.png"
                RelativeLayout.XConstraint=
                 "{ConstraintExpression Type=RelativeToParent,
                                        Property=Width,
                                        Factor=0}"
                RelativeLayout.YConstraint=
                 "{ConstraintExpression Type=RelativeToParent,
                                        Property=Height,
                                        Factor=1}" ></Image>
</RelativeLayout>

Answer 1

I found something may be useful for you. Even if it is not done by using RelativeLayout, you can still have what you want by using StackLayout.

The idea is :

<StackLayout>
  <StackLayout  VerticalOptions="Start">
  <Image/> <!--top image-->
  </StackLayout>

  <StackLayout VerticalOptions="CenterAndExpand">
    <!-- middle controls -->
  </StackLayout>

  <StackLayout Orientation="Horizontal" VerticalOptions="End">
    <Image/> <!--bottom image-->
  </StackLayout>
</StackLayout>

By Expanding the Middle StackLayout take al the remained spaces pushing the other one on top and on bottom respectively. It was very useful to me to have a fixed bottom. https://stackoverflow.com/a/30143144/3324840

Answer 2

The relative layout provides a very easy way to do this.

You should use the constraint type "relative to parent" and use factors to position the element.

Relative layout can include the control size when positioning with factors. What that means is that if you put a factor of 0, the top of the image will be at the top of the container.

If you put a factor of 1, the bottom of the image will be at the bottom of the container.

Likewise, a factor of 0.5 will center the center of your image on the center of the container

So, relative layout by default takes care of your control dimensions when calculating factored positions.

You can find a lot more info and samples on the relative container in the official documentation. There are also code samples included in the sample projects to help you out.