Текстовое содержимое в кнопке WPF не центрируется по вертикали

Есть ли причина, по которой текстовое содержимое кнопки WPF появляется с нежелательным пространством над текстом?

У меня есть кнопка в StackPanel. Эта кнопка представляет собой простую кнопку закрытия, поэтому я хочу, чтобы она отображалась как квадратная кнопка с центром в ней. Я установил нулевое дополнение и установил как HorizontalContentAlign, так и VerticalContentAlign в центр, но "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 для кнопки "Растянуть" или "Вершина". Если я удаляю свойства Height и Weight, чтобы кнопка определяла его, тогда элемент управления не отображается как квадрат, а вертикальный прямоугольник, а "x" все еще не центрирован.

UPDATE: В то время как кнопка и контент теперь полностью центрированы, кнопка все еще отображается намного больше, чем она должна быть, как если бы применялась высокая добавка.

Мое определение стиля ресурса выглядит следующим образом:

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

Расширитель находится внутри StackPanel внутри GroupBox внутри DockPanel.

В представлении дизайна кнопки имеют правильный размер, а только X, но во время выполнения они становятся увеличенными. Как я могу исправить это?

Ответы

Ответ 1

Моя догадка заключается в том, что вы видите эту проблему, потому что существует конфликт между высотой, которую вы дали ей, и пространством, которое на самом деле нужно для правильного отображения.

Что вы можете сделать, чтобы решить эту проблему:

  • Воспроизведение с помощью свойства "Заполнение" кнопки. Это управляет пространством между текстом и границами кнопок.
  • Уменьшить размер шрифта.
  • Не устанавливайте явную высоту на кнопке или, по крайней мере, придавайте ей высоту, достаточную для размещения размера шрифта и требуемого дополнения.

Кроме того, как упоминал Хайнци в комментариях, вы должны, конечно, использовать прописную букву X.

Кстати, вот трюк, который вы можете использовать, если хотите, чтобы кнопка была правильной площадью, и убедитесь, что кнопка получает необходимый размер.

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

Это эффективно позволяет кнопке решить, какую высоту она нуждается, а затем вы устанавливаете значение Width для этого расчетного значения.

Ответ 2

Простым способом выполнить это с нижним регистром "x" является использование TextBlock как содержимого и игры с его верхним краем:

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