5

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>
Zoe
  • 27,060
  • 21
  • 118
  • 148
bulubuloa
  • 597
  • 1
  • 10
  • 21

2 Answers2

8

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

Community
  • 1
  • 1
Cbot
  • 119
  • 4
  • Excellent answer, worked well for me. I had to add `VerticalOptions="FillAndExpand"` to the containing `StackLayout` to get it to work though. Also make sure you have a view that corresponds to the middle controls `StackLayout` mentioned in the answer that `expands`, or it probably won't work. – Jonathan Jan 30 '17 at 18:14
3

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.

irreal
  • 2,217
  • 18
  • 23
  • 1
    – bulubuloa Jul 15 '15 at 12:06
  • My apologies, the absolutelayout control can take control size into consideration, but it appears that the relativelayout does not. You were not very specific when you said "it doesn't work". I have tried it and found that the positioning works just as desrcibed, except it always puts the top left point of your view on the position you specified. What you can do is manually remove the width / height of the control from the position. To do this, you either need to position the controls from the code behind file or create a markup extension which would measure the control and return the value. – irreal Jul 16 '15 at 14:02