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

Solution 1:

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.

Solution 2:

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"