How do I align this to use available screen width? - android-layout

Question

The yellow part of the screen is wasted. And the space after the image is wasted. How do I shift everything to the left? Both image and text to the left and reduce the gap to the left of both image and text? I have tried to play around with margins but am unable to.
Many thanks
Iyer
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:app01" x:Class="app01.MainPage">
<Grid RowSpacing="0,0,0,20">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="40" />
<RowDefinition Height="*˙"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Image Source="activair_logo.jpg" Grid.Row="0"/>
<Label Text="Services" Grid.Row="1" TextColor="Black" FontSize="36" FontAttributes="Bold"/>
<Grid RowSpacing="10" Margin="-100,10,0,0" Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" ColumnSpacing="-100">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_airfreight.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Grid.Column="1" Text="Air Freight" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="1" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_oceanfreight.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Sea Freight" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="2" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_customs.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Customs" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="3" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_transportation.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Transportation" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="4" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_specialcargo.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Special Cargo" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="5" ColumnSpacing="-100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Image Source="./aa_exhibitioncargo.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" VerticalOptions="Top">
<Label Text="Exhibition Cargo" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
<Grid Grid.Row="6" ColumnSpacing="-100">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5%" />
<ColumnDefinition Width="95%" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0">
<Image Source="./aa_relocation.jpg" HeightRequest="50"></Image>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="0" VerticalOptions="Center">
<Label Text="International Relocation" FontSize="24" TextColor="Green" FontAttributes="Bold" />
</StackLayout>
</Grid>
</Grid>
<Label Text="Customers" Grid.Row="3" TextColor="Black" FontSize="36" FontAttributes="Bold"/>
</Grid>
</ContentPage>
I had pasted the code earlier - not sure why it did not appear - have managed to do better by using negative margins on the grid. Is this portable across different devices? Is this the right way to do this? I have tried to read up default margins - seems to be 6 in most cases - but in this case seems to be a lot more. Seems like 70px margin as a -60px margin seems to be looking good. What is the right way of doing this so that it renders well across device and screen types and resolutions? I have got to this point.
Now I can't figure out how to get the Customers row in the main grid to keep up with the previous row which is a sub-grid within the main one. I am so super confused. I am able to set the height of the rows under the head "Services" but I don't want to as I want to show a lot of text when the user taps on any of the services. So, the height of that row will be dynamic. I'd therefore want to use Height="*" in that inside grid so that all the rows can be "collapsed" and "expanded" on touch.
How do I get the Row that contains "Customers" to keep aligned just under the Services sub-grid?
Many thanks

Answer 1

Set VerticalOptions="StartAndExpand" in Main Grid
<Grid RowSpacing="0,0,0,20" VerticalOptions="StartAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="40" />
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>