垂直居中文本（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>

我使用了线高和文字线界限，但我无法理解为什么在更改字体后让文字保持垂直居中的方法。

更新了重现问题的代码：

<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 的底边和0.3之间仍然有一点点差距（大约Line epx），但这是主要归功于layout rounding和effective pixel snapping。我觉得人眼看不出来。 ：）

P.S。您不能完全依赖于检查Blend Designer中的视觉效果，因为有时画板不会及时更新以获得正确的结果。您应该始终运行您的应用并从那里进行检查。

Answer 2

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

一样