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

发布于 2025-01-12 03:44:19 字数 1738 浏览 0 评论 0原文

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

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

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

<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>

原文

I am using a ToggleSwitch control to display 2 exclusive options in the application. Unfortunately, when FontSize increases the "Content" part seems to be not centrally aligned vertically.
To verify the issue I tried with a simple ContentPresenter even though I have provided VerticalAlignment, VerticalContentAlignment, etc.

Not sure if it's an open issue or I am missing something here?

White line shows the center of the image here. This is just one case but as font size differs the alignment also changes. Thus we cannot provide a padding/margin as it is different for various 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>

As an update: I also tried modifying the ContentPresenter style as follows and applied it to the above ContentPresenter (still no change though)

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不甘平庸 2025-01-19 03:44:19

此问题是由字体规格引起的。字体规格决定字体上方/字体下方有多少空间以及字符之间有多少空间。不同的字体大小和字体系列将有不同的度量。

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

回复收藏 0 原文

南七夏 2025-01-19 03:44:19

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

Probably not the ideal answer; but you could always use the RenderTransform to adjust it to your liking.

<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>

回复收藏 0 原文

~没有更多了~