Xamarin forms align each texts on their baselines

Question

This is what I am currently having on screen with my texts:

Is there a way to align the 152 and bar? Also the same with.. 15 MinutesRemaining and x?

Here is my current code:

 <Grid>
      <Frame Style="{StaticResource FrameStyle}">
            <Grid Style="{StaticResource TellyGridStyle}">
                <Frame Grid.Column="0" BackgroundColor="Green" Margin="0,10,10,10" Padding="20">
                    <Label Text="1" Style="{StaticResource TeamLabelStyle}" />
                </Frame>
                <Grid Grid.Column="1" Style="{StaticResource AutoGridStyle}">
                    <Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
                        <Label TextColor="Green" Text="152" FontSize="72" VerticalTextAlignment="End"  />
                        <Label Grid.Column="1" VerticalTextAlignment="End" Text="bar" TextColor="Blue" FontSize="54" />
                    </Grid>
                    <Grid Grid.Column="1" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
                        <Label Grid.Row="0" TextColor="Lime" IsVisible="false" Text="Low Pressure Warning" FontSize="40" />
                        <Label Grid.Row="1" Text="Evacuation Confirmed" IsVisible="false" FontSize="33" Style="{StaticResource LabelStyle}" />
                    </Grid>
                    <BoxView Grid.Row="1" Grid.ColumnSpan="4" HeightRequest="20" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" />
                    <Grid Grid.Row="2" Grid.ColumnSpan="3" Style="{StaticResource RadioGridStyle}">
                        <Label Grid.Column="0" Text="15" FontSize="33" Style="{StaticResource LabelStyle}" />
                        <Label Grid.Column="1" Text="MinutesRemaining" FontSize="25" Style="{StaticResource LabelStyle}" />
                        <Label Grid.Column="2" Text="X" Style="{StaticResource LabelStyle}" />
                    </Grid>
                </Grid>
                <StackLayout Grid.Column="2" Style="{StaticResource VerticalStackLayoutStyle}" Padding="30,40,30,40" BackgroundColor="Red">
                    <Label Text="R" TextColor="{StaticResource EcbWhite}" FontSize="42" HorizontalTextAlignment="Center" Style="{StaticResource LabelStyle}" />
                    <Label Text="Evacuate" TextColor="{StaticResource EcbWhite}" Style="{StaticResource LabelStyle}" />
                </StackLayout>
            </Grid>
        </Frame>
    </Grid>

Static Resources:

        <Style x:Key="BaseStyle" TargetType="View">
        <Setter Property="Margin" Value="0" />
    </Style>
    <Style x:Key="StackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Padding" Value="0" />
        <Setter Property="Spacing" Value="0" />
    </Style>
    <Style x:Key="HorizontalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
        <Setter Property="Orientation" Value="Horizontal" />
        <Setter Property="HorizontalOptions" Value="Start" />
        <!--        <Setter Property="Spacing" Value="10" />-->
    </Style>
    <Style x:Key="VerticalStackLayoutStyle" TargetType="StackLayout" BasedOn="{StaticResource StackLayoutStyle}">
        <Setter Property="Orientation" Value="Vertical" />
        <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    </Style>
    <Style x:Key="GridStyle" TargetType="Grid" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Padding" Value="0" />
        <Setter Property="RowSpacing" Value="0" />
        <Setter Property="ColumnSpacing" Value="5" />
    </Style>
    <Style x:Key="FrameStyle" TargetType="Frame" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Padding" Value="0" />
        <Setter Property="HorizontalOptions" Value="FillAndExpand" />
        <Setter Property="VerticalOptions" Value="FillAndExpand" />
        <Setter Property="BackgroundColor" Value="{DynamicResource themeColor}" />
    </Style>
    <Style x:Key="LabelStyle" TargetType="Label">
        <Setter Property="VerticalTextAlignment" Value="End" />
        <Setter Property="TextColor" Value="Black" />
    </Style>
    <Style x:Key="TeamLabelStyle" TargetType="Label">
        <Setter Property="FontSize" Value="24" />
        <Setter Property="VerticalOptions" Value="Center" />
        <Setter Property="VerticalTextAlignment" Value="End" />
        <Setter Property="TextColor" Value="{StaticResource MsaWhite}" />
    </Style>
        <!--<ColumnDefinitionCollection x:Key="AutoColumns">
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </ColumnDefinitionCollection>-->
        <RowDefinitionCollection x:Key="AutoRows">
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </RowDefinitionCollection>
    <Style x:Key="TellyGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
         <Setter Property="RowDefinitions" Value="{StaticResource AutoRows}">
            <Setter.Value>
                <RowDefinitionCollection>
                    <RowDefinition Height="Auto" />
                </RowDefinitionCollection>
            </Setter.Value>
        </Setter>
        <Setter Property="ColumnDefinitions">
            <Setter.Value>
                <ColumnDefinitionCollection>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </ColumnDefinitionCollection>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="AutoGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
         <Setter Property="RowDefinitions">
            <Setter.Value>
                <RowDefinitionCollection>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </RowDefinitionCollection>
            </Setter.Value>
        </Setter>
        <Setter Property="ColumnDefinitions">
            <Setter.Value>
                <ColumnDefinitionCollection>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </ColumnDefinitionCollection>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="EvacuationGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
         <Setter Property="RowDefinitions">
            <Setter.Value>
                <RowDefinitionCollection>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto"/>
                </RowDefinitionCollection>
            </Setter.Value>
        </Setter>
        <Setter Property="ColumnDefinitions">
            <Setter.Value>
                <ColumnDefinitionCollection>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto"/>
                </ColumnDefinitionCollection>
            </Setter.Value>
        </Setter>
    </Style>
     <Style x:Key="RadioGridStyle" TargetType="Grid" BasedOn="{StaticResource GridStyle}">
         <Setter Property="RowDefinitions">
            <Setter.Value>
                <RowDefinitionCollection>
                    <RowDefinition Height="Auto" />
                </RowDefinitionCollection>
            </Setter.Value>
        </Setter>
        <Setter Property="ColumnDefinitions">
            <Setter.Value>
                <ColumnDefinitionCollection>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </ColumnDefinitionCollection>
            </Setter.Value>
        </Setter>
    </Style>

Thanks in Advance!

Answer 1

To avoid the issue that each of your labels vertical (Y / height) size is different due to the fact that different size fonts are being used and to avoid hard-coding the height of those labels, you can combine those labels into one by using FormattedString.

This way, you have one label who's height is calculated by the tallest element (i.e. font) and thus when using YAlign="End" VerticalTextAlignment="End" your text is bottom aligned.

<Grid Grid.Column="0" Grid.Row="0" Style="{StaticResource EvacuationGridStyle}">
    <Label YAlign="End" VerticalTextAlignment="End">
         <Label.FormattedText>
            <FormattedString>
              <Span Text="152" TextColor="Green" FontSize="72" />
              <Span Text="bar" TextColor="Blue"  FontSize="54" />
            </FormattedString>
          </Label.FormattedText>
   </Label>                            
</Grid>

Note: If you need to change the discrete elements of the FormattedString just as if they were separate labels, you can assign x:Name, BindingContext, Binding as a Span is a bindable object.

<Span x:Name="barValue" BindingContext="aContext" Text="{Binding BarValue}" TextColor="Green" FontSize="72" />