CODEWITHSUNDEEP
visual-studioxamlxamarinxamarin.formsstacklayout
Shailesh
Shailesh

Reputation: 3118

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

Upvotes: 1

Views: 1096

Answers (3)

Rajendra Razz
Rajendra Razz

Reputation: 209

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

Upvotes: 4

Tuğ&#231;e Arar
Tuğ&#231;e Arar

Reputation: 806

You need to set blue Stack Layout's Vertical Option to EndAndExpand. Because stack layout children doesn't fill automatically. You need to force it if you want. You can look at this answer here for detailed explanation.

Upvotes: 1

ottermatic
ottermatic

Reputation: 1012

In my experience, a StackLayout will never obey Vertical or Horizontal options. It will only use as much space as it needs. You can place a transparent BoxView in the StackLayout and set its VerticalOptions to FillAndExpand. That will force the StackLayout to use all the space.

I normally use a Grid instead and use <RowDefinition Height="*"/> to force it to use all the space.

Upvotes: 2

Related Questions