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表格在其基线上对齐每个文本

1 个答案: