How to properly set height on GRID? - xamarin

Question

I trying to create a UI something just like this (as a reference).
but I am having a trouble to get the design. I used grid but I keep getting this result. I set the Grid row definitions to 80* and 20* and still not getting the result I wanted. My idea is the design to be in percentage rather that set a specific height. If I can't use percentage is there a way to make my UI responsive for different screen size and orientation? Is there a way I can achieve this?
Here is my XAML Code:
<ContentPage.Content>
<ScrollView>
<StackLayout Spacing="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="20*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" StyleClass="start" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Label StyleClass="brand" Text="TBS">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Black.ttf#SFProDisplay-Black"/>
</OnPlatform>
</Label.FontFamily>
</Label>
<Label StyleClass="startpagetitle" Text="TBS Point of Sale">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
</OnPlatform>
</Label.FontFamily>
</Label>
<Label StyleClass="startpagesubtitle" Text="Run and grow your business.">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Button StyleClass="btn" Text="Login" x:Name="btnLogin">
<Button.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
</OnPlatform>
</Button.FontFamily>
</Button>
</StackLayout>
</Grid>
</StackLayout>
</ScrollView>
</ContentPage.Content>

Answer 1

Remove the StackLayout outside of your content Grid. The Grid won't take the whole space of the StackLayout so that it looks the percentage is wrong:
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80*"/>
<RowDefinition Height="20*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" StyleClass="start" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<Label StyleClass="brand" Text="TBS">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Black.ttf#SFProDisplay-Black"/>
</OnPlatform>
</Label.FontFamily>
</Label>
<Label StyleClass="startpagetitle" Text="TBS Point of Sale">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
</OnPlatform>
</Label.FontFamily>
</Label>
<Label StyleClass="startpagesubtitle" Text="Run and grow your business.">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Light.ttf#SFProDisplay-Light"/>
</OnPlatform>
</Label.FontFamily>
</Label>
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" BackgroundColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Button StyleClass="btn" Text="Login" x:Name="btnLogin">
<Button.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="SFProDisplay-Regular.ttf#SFProDisplay-Regular"/>
</OnPlatform>
</Button.FontFamily>
</Button>
</StackLayout>
</Grid>
</ScrollView>
Moreover, I think the scroll view can be removed too if you don't want your screen to scroll.
Or you can try to add <Grid VerticalOptions="FillAndExpand"> to make your Grid fill full of the StackLayout.