Stick Layout in Xamarin Forms to bottom

Question

I\'m making an application in Xamarin forms but I have some trouble sticking a layout to the bottom of the device. I thought an AbsoluteLayout would work, but I cannot grasp

Answer 1

I figured it out:

I used a StackLayout, which contains the three main Childeren

 var stack = new StackLayout {
                Children =
                    {

                        _header,
                        _grid,
                        _footer,

                    }
            };

And then you should add the header as a AbsoluteLayout and remember to use the:

 {
    AbsoluteLayout.SetLayoutFlags(_imageYouWantToUse, AbsoluteLayoutFlags.PositionProportional);
    AbsoluteLayout.SetLayoutBounds(_imageYouWantToUse, new Rectangle(x, y, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
_headerAbsLayout.Children.Add(_imageYouWantToUse);
    }

And for the main grid or the main content, you should use a grid inside a StackLayout, so that you're sure that the layout is vertical (Orientation, is the right one to use here).

And do the same thing for the footer and i guess you're good to go

Answer 2

<StackLayout>
  <StackLayout Orientation="Horizontal" VerticalOptions="Start">
    <!-- top controls -->
  </StackLayout>

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

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

Make sure to have no more than one child with Expand options for best performance.

Answer 3

it's just that simple

AbsoluteLayout.SetLayoutFlags(footer, AbsoluteLayoutFlags.YProportional | AbsoluteLayoutFlags.WidthProportional);
AbsoluteLayout.SetLayoutBounds(footer, new Rectangle(0, 1, 1, AbsoluteLayout.AutoSize));
absoluteLayout.Children.Add(footer);

Answer 4

Within a RelativeLayout I got the best results with defining the Height- and Y-Constraint.

<RelativeLayout>
        <StackLayout VerticalOptions="Start" BackgroundColor="Green"
                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.25}">
          <!-- Top Content -->
          <Button Text="Top Button" Clicked="Button_OnClicked" />
        </StackLayout>

        <StackLayout VerticalOptions="Center" BackgroundColor="Aqua"
                          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.30}"
                          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.6}">
          <!-- Mid Content -->
          <Button Text="Mid Button" Clicked="Button_OnClicked" /> 
        </StackLayout>

        <StackLayout VerticalOptions="End" BackgroundColor="Yellow"
                          RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.90}"
                          RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.1}">

          <!-- Bottom Content -->
          <Button Text="Bottom Button" Clicked="Button_OnClicked" />
        </StackLayout>
</RelativeLayout>

Results:

Answer 5

You can use VerticalOptions to send layout to bottom.

var stacklayout = new stackLayout()
{
     VerticalOptions = LayoutOptions.EndAndExpand
     Children = {
      //your elements
     }
}

Answer 6

Have you figured it out yet? If not, there is a few ways you could accomplish this: Note that i've got the same problem my self, but this is my theory:

So that you could have a StackLayout in which you populate it with three "main childeren". The first could be a absolute or relative layout (I don't know the difference that well yet). In theory you should be able to add a element to the absolute layout and then add elements on top of the first element, because absolute layout uses a z-index, which works like layers in photoshop. So in other words do it like this:

var topAbsoluteLayout = new AbsoluteLayout();

            topAbsoluteLayout.Children.Add(header, new Point(0, 0));
            topAbsoluteLayout.Children.Add(element1, new Point(x,y));
            topAbsoluteLayout.Children.Add(element2, new Point(x, y));

Then you should do the same thing with the footer and remember to add topAbsoluteLayout to the Childeren in the StackLayout.

I hope this helps you out