Text content in a WPF button not being centred vertically

Question

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

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.

My XAML is:

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

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.

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?

Answer 1

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

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

Answer 2

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.

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.