Формы Xamarin выравнивают каждый текст на основе

Question

Это то, что у меня сейчас на экране с моими текстами:

Есть ли способ выровнять 152 и * 1009?*?Также то же самое с .. 15 MinutesRemaining и x?

Вот мой текущий код:

 <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>

Статические ресурсы:

        <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>

Заранее спасибо!

Answer 1

Чтобы избежать проблемы, заключающейся в том, что размер каждого из ваших ярлыков вертикальный (Y / высота) отличается из-за того, что используются шрифты разных размеров, и во избежание жесткого кодирования высоты этих ярлыков, вы можете комбинировать этиметки в одну с помощью FormattedString.

Таким образом, у вас есть одна метка, высота которой рассчитывается по самому высокому элементу (то есть шрифту), и поэтому при использовании YAlign="End" VerticalTextAlignment="End" ваш текст выравнивается снизу.

<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>

Примечание : Если вам нужно изменить отдельные элементы FormattedString, как если бы они были отдельными метками, вы можете назначить x:Name, BindingContext, Binding как Span является привязываемым объектом.

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