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

Question

我正在使用 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>

Answer 1

可能不是理想的答案；但您始终可以根据自己的喜好使用 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>

Answer 2

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

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

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

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

xaml

uwp

winrt-xaml

contentpresenter

toggleswitch