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

51
votes

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?

2
xamlxamarinxamarin.forms
I don't think you can use the Height directly. A bit late but try using HeightRequest property. – Adil H. Raza

2 Answers

79
votes

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.

1
votes

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"