WPF 按钮中的文本内容未垂直居中

Posted 2023-04-12

【中文标题】WPF 按钮中的文本内容未垂直居中

【英文标题】：Text content in a WPF button not being centred vertically

【发布时间】：2011-04-19 20:54:20

【问题描述】：

是否存在 WPF 按钮的文本内容在文本上方出现多余空格的原因？

我在 StackPanel 中有一个按钮。这个按钮是一个简单的关闭按钮，所以我希望它显示为一个方形按钮，中间有一个“x”。我已将填充设置为零并将 Horizo​​ntalContentAlign 和 VerticalContentAlign 都设置为 Center，但“x”仍然出现在按钮的底部（如果我的 FontSize 相对于我的高度太大，甚至会被截断）。就好像按钮顶部有一些填充物阻止了文本使用完整的垂直空间。

我的 XAML 是：

<StackPanel Orientation="Horizontal">
        <Label Content="Binding GenderFilter.Title" FontWeight="Bold" Width="60" />
        <Button Padding="0" Width="15" Height="15" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="12">x</Button>
        <Label Content="Binding GenderFilterExpander.SelectedValue" />
</StackPanel>

如果我将按钮 VerticalContentAlign 属性设置为 Stretch 甚至 Top，问题完全一样。如果我删除了 Height 和 Weight 属性，以便按钮确定它自己的属性，那么控件不会显示为正方形，而是一个直立的矩形，并且“x”仍然没有居中。

更新： 虽然按钮和内容现在都完美居中，但按钮仍然显示得比它需要的大得多，就好像正在应用高填充一样。

我的资源样式定义现在如下：

<Style x:Key="ClearFilterButtonStyle" TargetType="x:Type Button">
    <Setter Property="Padding" Value="0" />
    <Setter Property="Width" Value="Binding RelativeSource=x:Static RelativeSource.Self, Path=ActualHeight" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="Content" Value="X" />
    <Setter Property="FontSize" Value="8" />
</Style>

按钮本身定义为：

<Expander.Header>
    <StackPanel Orientation="Horizontal">
            <Label Content="Binding GenderFilter.Title" FontWeight="Bold" Width="60" />
            <Button Style="StaticResource ClearFilterButtonStyle"
                                    Visibility="Binding GenderFilterExpander.ClearFilterVisibility" />
            <Label Content="Binding GenderFilterExpander.SelectedValue"
                                   Visibility="Binding GenderFilterExpander.SelectedValueVisibility" />
    </StackPanel>
</Expander.Header>

扩展器位于 DockPanel 内的 GroupBox 内的 StackPanel 内。

在设计视图中，按钮大小正确，仅包含 X，但在运行时它们会放大。我该如何纠正？

【问题讨论】：

小写的“x”在顶部有一些填充，仅仅是因为它是一个小写字母。尝试使用大写的“X”或使用 WPF 的绘图功能自己绘制 X：social.msdn.microsoft.com/Forums/en-US/wpf/thread/…

【参考方案1】：

使用小写“x”完成此操作的一种简单方法是使用TextBlock 作为内容并使用其上边距进行播放：

<Button Command="Binding myCommand">
    <TextBlock Text="x" Margin="0,-3,0,0"/>
</Button>

【讨论】：

我发现这个解决方案在类似的场景下要简单得多。我试图在两个按钮上添加非常大的“+”和“-”字符，每当我将字体大小设置为 40 以上时，上面接受的答案都不起作用。上边距为负的 TextBlock 效果很好！

【参考方案2】：

我猜你看到这个问题是因为你给它的高度和它正确渲染自己实际需要的空间之间存在冲突。

你可以做些什么来解决这个问题：

使用按钮的 Padding 属性。这控制文本和按钮边框之间的空间。 减小字体大小。 不要在按钮上设置明确的高度，或者至少给它一个足够大的高度以适应所需的字体大小和填充。

此外，正如 Heinzi 在 cmets 中提到的，您当然应该使用大写的 X。

顺便说一句，如果您想让按钮成为合适的正方形，同时确保按钮获得所需的大小，可以使用以下技巧。

<Button Padding="0" 
    Width="Binding RelativeSource=x:Static RelativeSource.Self, Path=ActualHeight" 
    HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
    FontSize="12" Content="X" />

这有效地让按钮决定它需要什么高度，然后将宽度设置为该计算值。

【讨论】：

谢谢，两位。这工作得很好。我只使用小写字母“x”，因为大写字母被截断，但现在我使用 Isak 提供的代码来允许按钮设置自己的高度并使用它来获取所有出现的正方形正如我所愿。