Xamarin 表单将每个文本对齐到它们的基线上

Question

这是我目前在屏幕上显示的文字：

有没有办法对齐 152 和 bar？也一样.. 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" />

Xamarin 表单将每个文本对齐到它们的基线上

Xamarin forms align each texts on their baselines

c#

xamarin

xamarin.forms

xamarin.forms-styles