How can I achieve four spaced buttons on an iPhone that fill the screen and on bigger than an iPhone that fill half the screen?

Viewed 229

I would like to have four buttons like this:

<Grid x:Name="buttonGrid" Grid.Row="3" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="Center" Padding="20, 0">
    <Button x:Name="zeroButton" Text="0" HeightRequest="60" BackgroundColor="#2D7BF7" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
    <Button x:Name="oneButton" Text="1" HeightRequest="60" BackgroundColor="#2D7BF7" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
    <Button x:Name="twoButton" Text="2" HeightRequest="60" BackgroundColor="#2D7BF7" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
    <Button x:Name="fiveButton" Text="5" HeightRequest="60" BackgroundColor="#2D7BF7" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
</Grid>

On an iPhone or a small mobile I would like to have these fill 90% of the screen width. But on a bigger screen I would like the buttons to only fill 50% of the screen width.

Can anyone suggest to me how I can do this?

1 Answers
Related