xaml - ContentPresenter 的“内容”未在 UWP 控件中垂直居中对齐

Question

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

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

白线在这里显示图像的中心。这只是一种情况，但随着字体大小的不同，对齐方式也会发生变化。因此，我们无法提供填充/边距，因为它对于各种 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>