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>