Xamarin Forms - move BoxView to bottom of cell - xamarin.forms

Question

I am trying to create a simple tab control with XAML. Everything is great, but the bottom BoxView that should extend the bottom line of the tabs is drawing on the top of the grid cell. How can I move this to the bottom of the grid cell? I have a red arrow pointing to the line (BoxView) that should be at the bottom.
You can see I have VerticalOptions=End, but it doesn't do anything. It always draws at the top.
<Grid HorizontalOptions="FillAndExpand" Margin="10,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
BackgroundColor="Gray"
HeightRequest="1"
Margin="0,20,0,0"
VerticalOptions="End"
/>
<BoxView Grid.Column="0"
BackgroundColor="Gray" />
<BoxView Grid.Column="0"
Margin="1,1,0,0"
BackgroundColor="White" />
<Label Grid.Column="0"
HorizontalTextAlignment="Center"
Text="Run Tickets" />
<BoxView Grid.Column="1"
BackgroundColor="Gray" />
<BoxView Grid.Column="1"
Margin="1,1,0,1"
BackgroundColor="White" />
<Label Grid.Column="1"
HorizontalTextAlignment="Center"
Text="Readings" />
<BoxView Grid.Column="2"
BackgroundColor="Gray" />
<BoxView Grid.Column="2"
Margin="1,1,1,1"
BackgroundColor="White" />
<Label Grid.Column="2"
HorizontalTextAlignment="Center"
Text="Adjustments" />
</Grid>

Answer 1

I ran the exact code you posted and I see no problem with the line. Both iOS and Android (devices) are showing the line at the bottom of the Grid.
Used a red color so it can be noticed.
As can be seen the issue there is that the line is behind the rest. To fix this you just need to move the line declaration to last in the grid.
<Grid HorizontalOptions="FillAndExpand" Margin="10,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView Grid.Column="0"
BackgroundColor="Gray" />
<BoxView Grid.Column="0"
Margin="1,1,0,0"
BackgroundColor="White" />
<Label Grid.Column="0"
HorizontalTextAlignment="Center"
Text="Run Tickets" />
<BoxView Grid.Column="1"
BackgroundColor="Gray" />
<BoxView Grid.Column="1"
Margin="1,1,0,1"
BackgroundColor="White" />
<Label Grid.Column="1"
HorizontalTextAlignment="Center"
Text="Readings" />
<BoxView Grid.Column="2"
BackgroundColor="Gray" />
<BoxView Grid.Column="2"
Margin="1,1,1,1"
BackgroundColor="White" />
<Label Grid.Column="2"
HorizontalTextAlignment="Center"
Text="Adjustments" />
<BoxView Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="3"
BackgroundColor="Red"
HeightRequest="1"
Margin="0,20,0,0"
VerticalOptions="End"
/>
</Grid>
The above will result in something like this:
In your sample I see you have a 20 margin (Top) on the bottom line, if that's on purpose and you want a 20 separation between the boxes and the bottom line. I would move the bottom line to a second row in the grid and remove the RowSpacing.
Something like this:
<Grid HorizontalOptions="FillAndExpand"
RowSpacing="0"
Margin="10,0,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView Grid.Column="0"
BackgroundColor="Gray" />
<BoxView Grid.Column="0"
Margin="1,1,0,0"
BackgroundColor="White" />
<Label Grid.Column="0"
HorizontalTextAlignment="Center"
Text="Run Tickets" />
<BoxView Grid.Column="1"
BackgroundColor="Gray" />
<BoxView Grid.Column="1"
Margin="1,1,0,1"
BackgroundColor="White" />
<Label Grid.Column="1"
HorizontalTextAlignment="Center"
Text="Readings" />
<BoxView Grid.Column="2"
BackgroundColor="Gray" />
<BoxView Grid.Column="2"
Margin="1,1,1,1"
BackgroundColor="White" />
<Label Grid.Column="2"
HorizontalTextAlignment="Center"
Text="Adjustments" />
<BoxView Grid.Row="1"
Grid.ColumnSpan="3"
BackgroundColor="Gray"
HeightRequest="1"
Margin="0,20,0,0"
VerticalOptions="End" />
</Grid>
Would be something like this:
Hope this helps.-

Answer 2

I tried your code, but there was no such problem. I made some modifications, and you could check it whether the effect is what you need :
<Grid HorizontalOptions="FillAndExpand" Margin="10,0,10,0" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<BoxView Grid.Column="0"
BackgroundColor="Gray" />
<BoxView Grid.Column="0"
Margin="1,1,0,1"
BackgroundColor="White" />
<Label Grid.Column="0"
HorizontalTextAlignment="Center"
Text="Run Tickets" />
<BoxView Grid.Column="1"
BackgroundColor="Gray" />
<BoxView Grid.Column="1"
Margin="1,1,0,1"
BackgroundColor="White" />
<Label Grid.Column="1"
HorizontalTextAlignment="Center"
Text="Readings" />
<BoxView Grid.Column="2"
BackgroundColor="Gray" />
<BoxView Grid.Column="2"
Margin="1,1,1,1"
BackgroundColor="White" />
<Label Grid.Column="2"
HorizontalTextAlignment="Center"
Text="Adjustments" />
</Grid>