StackLayout not obeying VerticalOptions property in Xamarin.Forms

Question

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.

Could you elaborate a bit more on what you are trying to achieve, maybe an example UI? The StackLayout in the StackLayout could be causing the issue. There may be a better way of building the UI that plays well with Forms. — Adam, Feb 24 '20 at 19:31
@Adam- Just trying to align the blue stack view at the bottom of the green. — Shailesh, Feb 24 '20 at 19:35
Yeah, I think that's clear enough from your question. I just think there may be a better approach to this depending on what you want to ultimately achieve. For example, if you wanted an image with a title at the bottom you could use a grid (https://github.com/kphillpotts/XamarinFormsLayoutChallenges/blob/master/GreatPlaces/GreatPlaces/GreatPlaces/MainPage.xaml). Maybe not though. — Adam, Feb 24 '20 at 19:43
Is there anything that appears wrong ? why won't the stack views align themselves ? or is this is xamarin bug? — Shailesh, Feb 24 '20 at 19:52
Nothing that appears wrong, just seemed like an odd use of controls, but what you are building may be very different than what I'm used to so that's why I was asking. — Adam, Feb 24 '20 at 19:59
@Shailesh As Sümeyya Tuğçe Arar said that, I suggest you can set these two stacklayouts VerticalOptions as EndAndExpand, because EndAndExpand means that places the view at the end of the layout (bottom or right-most boundary) and expands to take up as much space as the layout will give it.You can take a look:[Xamarin.Forms StackLayout](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/stack-layout) — Cherry Bu - MSFT, Feb 25 '20 at 01:32

score 4 · Accepted Answer · answered Feb 25 '20 at 13:04

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

score 2 · Answer 2 · answered Feb 24 '20 at 19:29

2

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.

answered Feb 24 '20 at 19:29

ottermatic

992
6
10

But i don't want to use the entire space, i am only trying to align the blue stack view at the end of the green. – Shailesh Feb 24 '20 at 19:41
how exactly will the box view logic work? could you help with a sample? – Shailesh Feb 24 '20 at 19:56
Sorry, poor phrasing. i should have said "use all space available to it". Meaning, it will use all space within the outer wrapping ```StackLayout```(the green area). – ottermatic Feb 24 '20 at 19:56
the ```BoxView``` hack simply forces the ```StackLayout``` to fill as much space as is available. – ottermatic Feb 24 '20 at 19:57
could you please help with some sample of the box view logic ? – Shailesh Feb 25 '20 at 19:23

Tuğçe Arar · Answer 3 · 2020-02-24T19:52:20.403

1

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.

edited Feb 24 '20 at 19:52

answered Feb 24 '20 at 19:31

Tuğçe Arar

776
5
20

StackLayout not obeying VerticalOptions property in Xamarin.Forms

3 Answers3