Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 58056

How to center/layout element inside StackLayout (inside RelativeLayout)

$
0
0

I want a layout where I have divided my screen up in two parts:
Upper part: 40% of the height
Lower part: 60% of the height

I want the lower part to have a StackLayout with orientation=Vertical and I want the elements inside the StackLayout to be evenly distributed over the (vertical) space.

However I struggle to archive this - any suggestions?

Here's my xaml:

<RelativeLayout>

   (two image elements omitted)

    <StackLayout Orientation="Vertical" BackgroundColor="#444"
        RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.40}"
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.60}" >

        <Label Text="Test1" BackgroundColor="#f00" VerticalOptions="Center"/>
        <Label Text="Test2" BackgroundColor="#0f0" VerticalOptions="Center"/>
        <Label Text="Test3" BackgroundColor="#00f" VerticalOptions="Center"/>
    </StackLayout>
</RelativeLayout>

The 3 labels are positioned right after each other and not centered vertically as I would have expected.

I think I have tried all variations of vertical options I could think of :-)

Thanks in advance,

image


Viewing all articles
Browse latest Browse all 58056

Trending Articles