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

Question

为什么WPF按钮的文本内容会出现不想要的空白?

我在一个StackPanel中有一个按钮，这是一个用于关闭界面的简单按钮，所以我希望它显示为一个正方形按钮，其中心有一个“x”字。我已将内边距设置为零，并将HorizontalContentAlign和VerticalContentAlign都设置为"Center"，但“x”仍然出现在按钮底部（或者如果我的FontSize相对于Height太大，则可能被截断）。好像在按钮顶部有一些填充物防止文本使用整个垂直空间。

我的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是完全相同的。如果我删除高度和宽度属性，让按钮自行决定，则控件不会显示为正方形，而是竖直矩形，并且"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>

Submit

<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内部的Expander。

在设计视图中，按钮的大小是正确的，只包含X，但在运行时它们会变得更大。 我该如何纠正这个问题？

- Val M

---

小写字母"x"在顶部有一些填充，因为它是小写字母。尝试使用大写字母"X"或使用WPF的绘图功能自己绘制X：http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/bcc46802-cfe8-46a6-a07e-9fbbeddc423a - Heinzi

Answer 1

使用小写字母"x"实现这一点的简单方法是使用 TextBlock 作为内容，并调整其上边距。

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

- BlazingFrog

---

我发现这个解决方案在类似的情况下更简单。我试图将非常大的“+”和“-”字符添加到两个按钮上，但每当我将字体大小调整到40以上时，上面接受的答案就无法正常工作了。使用负上边距的TextBlock完美地解决了问题！ - BMB

Answer 2

我猜想你见到这个问题是因为给按钮设置的高度和它实际需要渲染自身的空间之间存在冲突。

以下是解决此问题的方法：

• 调整按钮的填充属性（Padding）。这会控制文本和按钮边框之间的距离。
• 减小字体大小。
• 不要为按钮设置明确的高度，或者至少要给它一个足够大以容纳所需字体大小和填充的高度。

此外，正如 Heinzi 在评论中提到的那样，你当然应该使用大写字母 X。

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

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

这实际上让按钮决定它需要的高度，然后您将宽度设置为该计算值。

- Isak Savo

---

谢谢你们两位。这个方法非常有效。我之前只使用小写的“x”，因为大写的会被截断，但是现在我使用了Isak提供的代码，让按钮可以设置自己的高度，并利用它来得到正方形，现在一切都显示得很完美。 - Val M