Search code examples
visual-studioxamlxamarinxamarin.formsstacklayout

StackLayout not obeying VerticalOptions property in Xamarin.Forms

I am trying to create a simple stacklayout UI. Here is the XAML.

    <ContentView>
        <StackLayout
            BackgroundColor="Green"
            HeightRequest="500"
            VerticalOptions="End">
            <StackLayout
                BackgroundColor="LightSkyBlue"
                HeightRequest="100"
                VerticalOptions="End">
                <!--  // ADD CONTROLS HERE[!  -->
            </StackLayout>
        </StackLayout>
    </ContentView>

Ideally it is expected that the 'blue' stacklayout should align itself at the bottom on the green one But, it just doesn't moves and stays on the top.

What am i doing wrong? Please point me in the right direction

Attaching the image for better clarity.

enter image description here

Solution

  • You just need to replace your code by below code:

    <StackLayout
        BackgroundColor="Green"
        HeightRequest="500"
        VerticalOptions="End">
        <StackLayout
            BackgroundColor="LightSkyBlue"
            HeightRequest="100"
            VerticalOptions="EndAndExpand">
            <!--  // ADD CONTROLS HERE[!  -->
        </StackLayout>
    </StackLayout>

    Hope it will help you

    Thank you