垂直居中文本 (TextBlock)

Question

我正在努力使用 TextBlock 将文本垂直居中。我知道如果您使用重音符号，它会在空间上方增加额外的空间但为什么它与下面的空间不一致？有一些额外的像素。

<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,40,0,0" Background="#FF191919" BorderThickness="1" BorderBrush="#FFBF0077">
    <Grid Width="41" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
        <TextBlock x:Name="TextBlockLocalScore" Text="0" FontFamily="Courier New" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
    </Grid>
    <Grid Padding="4,8" BorderThickness="8,0" Width="104">
        <TextBlock x:Name="TextBlockMinutesLeft" Text="00" HorizontalAlignment="Left" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" TextAlignment="Center" Height="27" TextLineBounds="Tight" Margin="0,0,4,0" />
        <TextBlock x:Name="TextBlockSecondsLeft" Text="30" HorizontalAlignment="Right" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" Height="27" TextLineBounds="Tight" />
    </Grid>
    <Grid Width="41" HorizontalAlignment="Right" Padding="0,8" BorderThickness="1,0,0,0" BorderBrush="#FFBF0077">
        <TextBlock x:Name="TextBlockRemoteScore"  Text="0" HorizontalAlignment="Center" FontSize="36" VerticalAlignment="Center" FontFamily="Segoe UI Light" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" Height="27" TextLineBounds="Tight" Foreground="#FFFF3B30" />
    </Grid>
</StackPanel>

我玩过 Line Height 和 Text Line Bounds，但我不知道为什么在我更改字体后让文本仍然垂直居中。

更新代码以重现问题：

<StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,100,0,0" Background="#FF191919" BorderThickness="1" BorderBrush="#FFBF0077">
    <Grid Width="51" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
        <TextBlock Text="0" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
    </Grid>
    <StackPanel Padding="4" BorderThickness="8,0" Orientation="Horizontal">
        <TextBlock Text="01" FontFamily="Courier New" FontSize="36" TextAlignment="Left" VerticalAlignment="Center" Margin="0,0,4,0" />
        <TextBlock Text="11" FontFamily="Courier New" FontSize="36" TextAlignment="Right" VerticalAlignment="Center" />
    </StackPanel>
    <Grid Width="51" HorizontalAlignment="Right" Padding="0,8" BorderThickness="1,0,0,0" BorderBrush="#FFBF0077">
        <TextBlock Text="0" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
    </Grid>
</StackPanel>

Answer 1

您应该玩转这两个属性。在您的情况下，您可能对TextLineBounds 更感兴趣。

<TextBlock Text="80" FontSize="40" TextLineBounds="Tight" OpticalMarginAlignment="TrimSideBearings" />

---

更新

我不确定您的屏幕截图是否 100% 准确。我已经使用您的代码制作了以下图片。请注意，我已将它们放大了 10 倍。

<Grid Width="41" HorizontalAlignment="Left" Padding="0" BorderThickness="0,0,1,0" BorderBrush="#FFBF0077">
    <TextBlock x:Name="TextBlockLocalScore" TextLineBounds="Full" Text="80" FontFamily="Courier New" FontSize="36" Foreground="#FF007AFF" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
    <Rectangle UseLayoutRounding="False" HorizontalAlignment="Center" Fill="White" Height="10" VerticalAlignment="Top" Width="1" Margin="-21,0,0,0" />
    <Rectangle UseLayoutRounding="False" HorizontalAlignment="Center" Fill="White" Height="10" VerticalAlignment="Bottom" Width="1" Margin="-21,0,0,0" />
</Grid>

将TextLineBounds 设置为Tight

将TextLineBounds 设置为Full

是的，在第一个上，数字 8 的底部边缘和Line 之间仍然有一点点差距（大约0.3 epx），但这主要是由于@ 987654324@ 和effective pixel snapping。我认为这对人眼来说是不明显的。 :)

附注您不能仅仅依靠检查 Blend Designer 的视觉效果，因为有时画板不会及时更新以提供正确的结果。您应该始终运行您的应用并从那里检查。

Answer 2

我已经测试了您的代码并重现了这种行为。如果您没有设置TextBlock 的高度和宽度，它将根据您的文本字体大小自动设置它们。 例如FontFamily为Courier New，字号为25，TextBlock的实际宽高为16.00244140625，29.3203125。当您将文本垂直居中时，它会产生偏差。但是，您可以通过修改 Padding 来手动更正它，就像下面一样