Xamarin Forms StackLayout: How to set width / height of children to percentages

Question

Is there a way to create a vertical stack layout with a button that takes 30% of of the parent, and a text input that takes 70% of the parent? Something like this:

<StackLayout Orientation="Vertical">
    <Entry Height="70%"></Entry>
    <Button Height="30%">Click me</Button>
</StackLayout>

But this doesn't work. Only solution so far is creating a complete Grid item and using that. Are there no other solutions?

I don't think you can use the Height directly. A bit late but try using HeightRequest property. — Adil H. Raza, Apr 04 '18 at 16:37

Adam · Accepted Answer · 2016-09-14T01:25:27.953

82

StackLayout doesn't go very well with varying heights in this scenario. The Xamarin Forms engines isn't as well rounded as the WPF engine at this point. Basically you have to go

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="7*" />
        <RowDefinition Height="3*" />
    </Grid.RowDefinitions>
    <Entry Grid.Row="0" VerticalOptions="Fill"></Entry>
    <Button Grid.Row="1" VerticalOptions="Fill">Click me</Button>
</Grid>

Also as a side note, only Grids can expand to the full width or height of its parent element. StackLayout's determine their maximum size by the sum of their children unless they are within a Grid and you put HorizontalOptions="Fill" and VerticalOptions="Fill".

The only other way you could accomplish this is to get the DeviceHeight and Width from the OS and manually set the Heights of your elements. A complex and usually flawed approach, which I don't recommend.

edited Sep 14 '16 at 01:25

answered May 15 '15 at 08:36

Adam

16,089
6
66
109

Thank you for also mentioning about only Grids being able to stretch the full size of the parent. I didn't know this, but I asumed Stack Layouts could also stretch since they did take all the space on my app (But i guess the real reason is because I created children with properties like VerticalOptions=FillAndExpand) – sgarcia.dev May 16 '15 at 01:35
"only Grids can expand to full width or height of its parent element"....are you sure? What about VerticalOptions = LayoutOptions.FillAndExpand? I just created a sidebar that is a stacklayout and it correctly expands the full height of the screen...what am I missing? – jbyrd Apr 29 '16 at 14:23
4

The layout engine from when I wrote this (almost a year ago) is largely different to the current version, a lot of improvements have been made. Version 2.0 (I think) included large Layout Engine enhancements, I think they may have even rewrote it but not sure. – Adam May 03 '16 at 05:23

score 1 · Answer 2 · answered Sep 14 '16 at 13:02

1

While you can do this with grid, there is more suitable layout for it AbsoluteLayout

You can set position proportions with this: AbsoluteLayout.LayoutBounds=".5,1,.5,.1"

answered Sep 14 '16 at 13:02

Artem Zelinskiy

2,201
16
19

Xamarin Forms StackLayout: How to set width / height of children to percentages

2 Answers2