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

Text content in a WPF button not being centred vertically

提问by Val M

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

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

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.

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

My XAML is:

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

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.

如果我将按钮 VerticalContentAlign 属性设置为 Stretch 或什至 Top，问题就完全相同。如果我删除 Height 和 Weight 属性以便按钮确定它自己的属性，则控件不会显示为正方形，而是显示为直立的矩形，并且“x”仍未居中。

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>

The button itself is defined as:

按钮本身定义为：

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

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

Expander 位于 DockPanel 内 GroupBox 内的 StackPanel 内。

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?

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

采纳答案by Isak Savo

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:

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

• Play with the Padding property of the button. This controls the space between the text and the button borders.
• Reduce the font size.
• Don't put an explicit height on the button, or at least give it a height large enough to accommodate for the font size and padding you want.

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

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

另外，正如 Heinzi 在评论中提到的，您当然应该使用大写的 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.

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

回答by BlazingFrog

A simple way to accomplish this with a lower case "x" is to use a TextBlockas content and play with its upper margin:

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

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