WPF 按钮中的文本内容未垂直居中 [英] Text content in a WPF button not being centred vertically

问题描述

WPF 按钮的文本内容在文本上方出现不需要的空间是否有原因?

Is there a reason why the text content of a WPF button is appearing with unwanted space above the text?

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

I have a button in a StackPanel. This button is a simple close button so I want it to appear as a square button with an "x" centred in it. I have set my padding to zero and set both the HorizontalContentAlign and VerticalContentAlign to Center but the "x" still appears at the bottom of the button (or even truncated should I have my FontSize too big relative to my Height). It's as if there is some padding at the top of the button that prevents the text using the full vertical space.

我的 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"仍未居中.

The problem is exactly the same should I set my button VerticalContentAlign property to either Stretch or even Top. If I remove the Height and Weight properties so that the button determines its own then the control does not appear as a square but an upright rectangle and the "x" is still not centred.

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

UPDATE: While the button and content are now both centred perfectly the button is still being displayed far bigger than it needs to be, as if a high Padding is being applied.

我的资源样式定义如下:

My resource style definition is now as follows:

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

The Expander being within a StackPanel within a GroupBox within a DockPanel.

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

In the design view the buttons are correctly sized, only just containing the X, but at run-time they become enlarged. How can I correct that?

推荐答案

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

My guess is that you see this problem because there's a conflict between the height you gave it and the space it actually needs to render itself properly.

你可以做的事情来解决这个问题:

Things you can do to solve this:

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

另外，正如 Heinzi 在评论中提到的，你当然应该使用大写的 X.

Also, as mentioned by Heinzi in the comments you should of course use an uppercase X.

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

By the way, here's a trick you can use if you want to make the button be a proper square while making sure the button gets the size it needs.

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

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

This effectively lets the button decide what height it needs and then you set the Width to that calculated value.

这篇关于WPF 按钮中的文本内容未垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！