Question

WPF按钮的文本内容是否出现在文本上方不需要的空格中？

我在StackPanel中有一个按钮。这个按钮是一个简单的关闭按钮，所以我希望它显示为一个方形按钮，其中有一个“x”。我已将我的填充设置为零，并将HorizontalContentAlign和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，问题就完全一样了。如果我删除“高度”和“权重”属性以使按钮确定其自身，则控件不会显示为正方形而是直立的矩形，并且“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，但在运行时它们会变大。我该如何纠正？

Answer 1

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

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

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

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

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

2 个答案: