Текстовое содержимое в кнопке WPF не центрируется вертикально - PullRequest
18 голосов
/ 01 октября 2010

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

У меня есть кнопка в StackPanel.Эта кнопка - простая кнопка закрытия, поэтому я хочу, чтобы она отображалась в виде квадратной кнопки с центрированной буквой "х".Я установил для своего отступа ноль и установил для 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>

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

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

Ответы [ 2 ]

17 голосов
/ 22 апреля 2011

Простой способ сделать это с помощью строчной буквы "x" - это использовать TextBlock в качестве контента и играть с его верхним полем:

<Button Command="{Binding myCommand}">
    <TextBlock Text="x" Margin="0,-3,0,0"/>
</Button>
11 голосов
/ 01 октября 2010

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

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

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

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

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

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

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

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