How to scale font and container's height in Xamarin.Forms - xamarin.forms

Question

I have problem with properly scaling height of containers and font size in Xamarin.Forms.
1) The first problem is that I need to set static height in one of my containers but it looks different on different devices. I don't know exactly but suppose that problem can be caused by screen density. Should I scale height of my container somehow or Xamarin.Forms should handle this for me?
2) The second problem is that I need to set proper cross-platform font. Is there a way to Xamarin.Forms handle it for me or need I use Device.RuntimePlatform property to set this? Also as said here: https://learn.microsoft.com/pl-pl/xamarin/xamarin-forms/user-interface/text/fonts - named font sizes are not acceptable solution. For iPod I need to use micro, but on android the text is barely visible.
On emulator there are many weird things happen, topbar is way out of scale and entire look is zoomed. Is this my fault or maybe Xamarin is not such universal platform I thought?
Here is the code of my page:
<StackLayout>
<SearchBar
VerticalOptions="Start"
TextChanged="SearchBar_OnTextChanged"
PlaceholderColor="#C0C0C0"></SearchBar>
<ListView
BackgroundColor="#f2f2f2"
VerticalOptions="Center"
ItemTapped="SelectProcedure"
CachingStrategy="RecycleElement">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell
Text="{Binding Name}"
TextColor="Black"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout
BackgroundColor="White"
HeightRequest="80"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand">
<Grid
Padding="10,5,10,5"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Grid.Row="0"
VerticalTextAlignment="Center"
VerticalOptions="Center"
HorizontalTextAlignment="Center"
HorizontalOptions="Center"
TextColor="Black"/>
<telerikInput:RadButton
Grid.Column="1"
Grid.Row="0"
Padding="5,0,5,0"
ImageSource="plus.png"/>
</Grid>
</StackLayout>
</StackLayout>
And here are the screenshots for two devices I have and emulator:
Android 8.1
iPod touch 6
Android 8.1 (emulator)

Answer 1

Solution: You can set the HeightRequest grid as the percentage of screen height (for example 10%) .
<StackLayout
BackgroundColor="White"
HeightRequest="{Binding stackHeight}"
HorizontalOptions="FillAndExpand"
VerticalOptions="EndAndExpand">
in Share Project App.xaml.cs
public static double ScreenWidth;
public static double ScreenHeight;
in Android MainActivity.cs
protected override void OnCreate(Bundle savedInstanceState)
{
TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
base.OnCreate(savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
global::Xamarin.Forms.Forms.SetFlags("Shell_Experimental", "Visual_Experimental", "CollectionView_Experimental");
global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
App.ScreenWidth = Resources.DisplayMetrics.WidthPixels/Resources.DisplayMetrics.Density;
App.ScreenHeight =Resources.DisplayMetrics.HeightPixels/Resources.DisplayMetrics.Density;
LoadApplication(new App());
}
in iOS
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
//...
App.ScreenWidth = (int)UIScreen.MainScreen.Bounds.Width;
App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;
//...
}
in Code Behind or ViewModel
public double stackHeight { get; private set; }
//...
if(Device.RuntimePlatform=="iOS")
{
stackHeight= App.ScreenHeight/5.0;
}
else
{
stackHeight= App.ScreenHeight/20.0;
}
And for Custom Font in Xamarin.Forms , you can check https://xamarinhelp.com/custom-fonts-xamarin-forms/