Xamarin 表单在其基线上对齐每个文本答案

【问题标题】：Xamarin forms align each texts on their baselinesXamarin 表单在其基线上对齐每个文本
【发布时间】：2019-04-15 11:19:49
【问题描述】：

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

有没有办法对齐152 和bar？也一样。。 15MinutesRemaining和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>

提前致谢！

【问题讨论】：

您是否有机会开发名为 Musterd 的应用程序？
在标签上设置 BackgroundColor，以便您查看它们的大小/对齐方式。我怀疑它们的尺寸不同，导致错位。如果是这种情况，那么您可以尝试显式分配高度值，或者让它们扩展以垂直填充其容器
@Jason，是的，我已经使用了背景颜色，我可以看到 alight 有问题。
@Woj，没有。什么是芥末？

标签： c# xamarin xamarin.forms xamarin.forms-styles

【解决方案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 分配为@ 987654331@ 是一个可绑定对象。

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

【讨论】：

谢谢@SushiHangover。我会检查这个。我想问一下，YAlign 不是已经弃用了吗？
@PaulaKristin 是的，VerticalTextAlignment 是替代品，旧习惯.. ;-)
好的，谢谢@Sushi！我现在就试试看！