Dimensionando objetos com base nas dimensões da tela

Dados diferentes tamanhos de tela, qual é o método aceito para dimensionar a interface do usuário?

Ao configurar uma interface do usuário, ele fica ótimo em uma tela, mas terrível em outra. Tentando configurar um estilo possivelmente dinâmico com base nas dimensões da tela. Eu tenho aqui um cabeçalho simples com um FormattedString em um rótulo. Quero centralizar o rótulo inteiro com a extensão da formatação intacta. Idealmente, gostaria de definir a altura do texto como uma porcentagem da Current.MainPage.Height ...

From App.xaml

<Application.Resources>
    <ResourceDictionary>
        <Style x:Key="HeaderSpans" TargetType="Span" >
            <Setter Property="BackgroundColor" Value="Transparent"></Setter>
            <Setter Property="HorizontalOptions" Value="Center"></Setter>
            <Setter Property="TextColor" Value="White"></Setter>
            <Setter Property="VerticalTextAlignment" Value="Center"></Setter>
            <Setter Property="Margin" Value="0, 20, 0, 0"></Setter>
        </Style>
        <Style x:Key="HeaderSpan" TargetType="Span" >
            <Setter Property="TextColor" Value="White"></Setter>
            <Setter Property="FontSize" Value="32"></Setter>

        </Style>
        <Style x:Key="HeaderSpanB" TargetType="Span" >
            <Setter Property="TextColor" Value="White"></Setter>
            <Setter Property="FontSize" Value="32"></Setter>
            <Setter Property="FontAttributes" Value="Bold"></Setter>
        </Style>
    </ResourceDictionary>
</Application.Resources>

Código por trá

        switch (Device.RuntimePlatform)
        {
            case Device.iOS:
                //MainPage.BackgroundColor = Color.Black;
                break;
            case Device.Android:
                //MainPage.BackgroundColor = Color.Red;
                break;
            case Device.UWP:
                //MainPage.BackgroundColor = Color.Orange;
                break;
            default:
                //MainPage.BackgroundColor = Color.Transparent;
                break;
        }

Pensei que poderia utilizar esse código para executar a ação. Mas não sei como impactar os estilos a partir daí. Eu pensei que um levantador poderia ser o caminho certo. Não fiz progressos sólidos.

From Header.xaml

<!-- dark-blue backing header -->
<Image Source="Header752x135.png" VerticalOptions="Start" HorizontalOptions="CenterAndExpand"></Image>

<!-- SHIPSHAPE text placed on the backing header -->
<Label

    Style="{StaticResource HeaderSpans}"
>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="SHIP" Style="{StaticResource HeaderSpan}" />
            <Span Text="SHAPE" Style="{StaticResource HeaderSpanB}" />
        </FormattedString>
    </Label.FormattedText>
</Label>

Sem código por trás.

Ficaria muito grato se alguém pudesse me levar à solução corret

questionAnswers(1)

yourAnswerToTheQuestion