How can I reach four spaced buttons on an iPhone that fill the screen and more than an iPhone that fills half the screen?

Question

I would like to have four buttons:

<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 device, I would like them to fill 90% of the screen width. But on the big screen, I would like the buttons to fill only 50% of the screen width.

Can someone suggest me how can I do this?

Answer 1

Explanation

If you need to create layouts that reference the ContentPage.Width or ContentPage.Height , the best way to do this is to use RelativeLayout .

If you try to directly refer to the ContentPage.Width or ContentPage.Height , you will see that Xamarin.Forms returns -1 . This is because -1 is the default value that Xamarin.Forms uses when it has not yet created the control.

RelativeLayout uses Func to dynamically map the Height and Width properties of the page and returns the true value of the Height and Width properties after creating the ContentPage .

Code

 using Xamarin.Forms; namespace HorizontalButtonSampleApp { public class ButtonPage : ContentPage { public ButtonPage() { const int relativeLayoutHorizontalSpacing = 5; const int numberOfButtons = 4; double screenUsePercentage; if (Device.Idiom.Equals(TargetIdiom.Phone)) screenUsePercentage = 0.9; else screenUsePercentage = 0.5; var zeroButton = new StyledButton { Text = "0" }; var oneButton = new StyledButton { Text = "1" }; var twoButton = new StyledButton { Text = "2" }; var fiveButton = new StyledButton { Text = "5" }; var relativeLayout = new RelativeLayout(); relativeLayout.Children.Add(zeroButton, Constraint.RelativeToParent(parent => parent.Width * (1 - screenUsePercentage) / 2), Constraint.Constant(0), Constraint.RelativeToParent(parent => (parent.Width * screenUsePercentage - relativeLayoutHorizontalSpacing * (numberOfButtons - 1)) / numberOfButtons)); relativeLayout.Children.Add(oneButton, Constraint.RelativeToView(zeroButton, (parent, view) => view.X + view.Width + relativeLayoutHorizontalSpacing), Constraint.Constant(0), Constraint.RelativeToParent(parent => (parent.Width * screenUsePercentage - relativeLayoutHorizontalSpacing * (numberOfButtons - 1)) / numberOfButtons)); relativeLayout.Children.Add(twoButton, Constraint.RelativeToView(oneButton, (parent, view) => view.X + view.Width + relativeLayoutHorizontalSpacing), Constraint.Constant(0), Constraint.RelativeToParent(parent => (parent.Width * screenUsePercentage - relativeLayoutHorizontalSpacing * (numberOfButtons - 1)) / numberOfButtons)); relativeLayout.Children.Add(fiveButton, Constraint.RelativeToView(twoButton, (parent, view) => view.X + view.Width + relativeLayoutHorizontalSpacing), Constraint.Constant(0), Constraint.RelativeToParent(parent => (parent.Width * screenUsePercentage - relativeLayoutHorizontalSpacing * (numberOfButtons - 1)) / numberOfButtons)); Content = relativeLayout; Padding = new Thickness(0, 20); Title = $"Button Page on a {Device.Idiom}"; } } public class App : Application { public App() { MainPage = new NavigationPage(new ButtonPage()); } } public class StyledButton : Button { public StyledButton() { TextColor = Color.Black; HeightRequest = 60; BackgroundColor = Color.FromHex("2D7BF7"); HorizontalOptions = LayoutOptions.FillAndExpand; VerticalOptions = LayoutOptions.CenterAndExpand; } } } 

Tablet screenshot

Phone screen screen