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 直接绘制文本,但可能会很复杂。
我正在使用 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 直接绘制文本,但可能会很复杂。