Stick Layout in Xamarin Forms to bottom
<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.
You can use VerticalOptions to send layout to bottom.
var stacklayout = new stackLayout()
{
VerticalOptions = LayoutOptions.EndAndExpand
Children = {
//your elements
}
}
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:
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