Grid System in Xamarin - xamarin

Question

I am really new to Xamarin and I want to create 4 rows and the first one covers the whole screen, the second one has 5 columns, the third one has 4 columns and the last one has 2 columns. Currently, it looks like this:
So how can I make this screen proper with the grid system? Is there an efficient way to do it? Here is my code:
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0"
Grid.ColumnSpan="5"
Color="Red" />
<Label Grid.Row="0"
Grid.ColumnSpan="5"
Text="Table"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Color="CornflowerBlue" />
<Label Grid.Row="1"
Text="1x"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="1"
Color="DodgerBlue" />
<Label Grid.Row="1"
Grid.Column="1"
Text="2x"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="2"
Color="DarkSlateBlue" />
<Label Grid.Row="1"
Grid.Column="2"
Text="3x"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="3"
Color="DarkSlateBlue" />
<Label Grid.Row="1"
Grid.Column="3"
Text="4x"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="1"
Grid.Column="4"
Color="DarkSlateBlue" />
<Label Grid.Row="1"
Grid.Column="4"
Text="+"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Color="CornflowerBlue" />
<Label Grid.Row="2"
Text="Page 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Grid.Column="1"
Color="DodgerBlue" />
<Label Grid.Row="2"
Grid.Column="1"
Text="Page 2"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Grid.Column="2"
Color="DarkSlateBlue" />
<Label Grid.Row="2"
Grid.Column="2"
Text="Page 3"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="2"
Grid.Column="3"
Color="DarkSlateBlue" />
<Label Grid.Row="2"
Grid.Column="3"
Text="Page 4"
HorizontalOptions="Center"
VerticalOptions="Center" />
<BoxView Grid.Row="3"
Grid.ColumnSpan="2"
Color="Red" />
<Button Grid.Row="3" Text="Cancel"
Grid.ColumnSpan="2"
HorizontalOptions="Center"
VerticalOptions="Center"
Background="Red"/>
<BoxView Grid.Row="3"
Grid.Column="2"
Grid.ColumnSpan="2"
Color="Green" />
<Button Grid.Row="3" Text="Place Order"
Grid.Column="2"
Grid.ColumnSpan="2"
HorizontalOptions="Center"
VerticalOptions="Center"
Background="Green"/>
</Grid>

Answer 1

There are many ways to achieve this ,we can use Grid,RelativeLayout etc to contain our controls.
Of course, Grid is a good layout to achieve this just as you have used, and we can also use inner layouts simplify the codes in the external grid.
For example, we can use the following code to replace Label 1x ,Page 1 and two BoxView with property :Color="CornflowerBlue". This way the code looks less scattered and simpler.
<StackLayout Grid.Row="1" Grid.RowSpan="2" BackgroundColor="Yellow" >
<Label
HeightRequest="50"
VerticalTextAlignment="Center"
Text="1x"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Label
HeightRequest="50"
VerticalTextAlignment="Center"
Text="Page 1"
HorizontalOptions="Center"
VerticalOptions="Center" />
</StackLayout>
Note:
Of course, there's more than one way. Use internal layouts to make code leaner. Depending on your idea, you can modify your code as much as you like.