ContentPresenter 的 "Content" 未在 UWP 控件中垂直居中对齐

ContentPresenter's "Content" not centrally aligned vertically in UWP Controls

我正在使用 ToggleSwitch 控件在应用程序中显示 2 个独占选项。不幸的是,当 FontSize 增加时,“内容”部分似乎没有垂直居中对齐。 为了验证这个问题,我尝试使用简单的 ContentPresenter,尽管我提供了 VerticalAlignment、VerticalContentAlignment 等

不确定这是一个未解决的问题还是我遗漏了什么?

此处白线显示图像的中心。这只是一种情况,但随着字体大小的不同,对齐方式也会发生变化。因此我们无法提供 padding/margin,因为它对于不同的 FontSizes 是不同的。

<Page
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="Green">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="30">
        <ToggleSwitch Background="Red" OnContent="ABRA" OffContent="KADABRA" FontSize="72"/>
        <ContentPresenter Background="Red" Content="KADABRA" FontSize="58" 
                          HorizontalAlignment="Center" 
                          HorizontalContentAlignment="Center"
                          VerticalAlignment="Center" VerticalContentAlignment="Center" />
    </StackPanel>
</Page>

作为更新:我也尝试如下修改 ContentPresenter 样式并将其应用于上面的 ContentPresenter(但仍然没有变化)

<Style x:Key="ContentPresenterStyle1" TargetType="ContentPresenter">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
    </Style>

可能不是理想的答案;但您始终可以根据自己的喜好使用 RenderTransform 对其进行调整。

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="30"  >
    <ToggleSwitch Background="Red"  >
        <ToggleSwitch.OffContent>
            <TextBlock Text="KADABRA" FontSize="72" VerticalAlignment="Center">
                <TextBlock.RenderTransform>
                    <TranslateTransform Y="-5"/>
                </TextBlock.RenderTransform>
            </TextBlock>
        </ToggleSwitch.OffContent>
        <ToggleSwitch.OnContent>
            <TextBlock Text="KADABRA" FontSize="72" VerticalAlignment="Center">
                <TextBlock.RenderTransform>
                    <TranslateTransform Y="-5"/>
                </TextBlock.RenderTransform>
            </TextBlock>
        </ToggleSwitch.OnContent>
    </ToggleSwitch>
</StackPanel>

此问题是由字体指标引起的。字体指标决定 space 在 font/below 字体上方的程度以及 space 在字符之间的程度。不同的字体大小和字体系列会有不同的指标。

目前,我们对此无能为力。使用带边距的 TranslateTransform 或 TextBlock 是解决此问题的方法。另一种可能的方法是使用 Win2D 直接绘制文本,但可能会很复杂。