Treść tekstowa przycisku WPF nie jest wyśrodkowana w pionie

Question

Czy istnieje powód, dla którego zawartość tekstowa przycisku WPF pojawia się z niechcianym miejscem nad tekstem?

Mam przycisk w StackPanel. Ten przycisk jest prostym przyciskiem zamykania, więc chcę, aby wyglądał jak kwadratowy przycisk z "x" w środku. Ustawiłem wyściółkę na zero i ustawię HorizontalContentAlign i VerticalContentAlign na Center, ale "x" nadal pojawia się na dole przycisku (lub nawet obcięte, jeśli mam zbyt duży rozmiar czcionki w stosunku do mojego wzrostu). Wygląda to tak, jakby na górze przycisku znajdowało się dopełnienie, które zapobiega tekstowi przy użyciu pełnej pionowej przestrzeni.

Mój XAML jest:

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

Problemem jest to dokładnie to samo powinno mogę ustawić przycisk nieruchomość VerticalContentAlign albo Stretch lub nawet początku. Jeśli usunę właściwości Wysokości i Wagi tak, że przycisk określa swój własny, to kontrolka nie pojawi się jako prostokąt, ale pionowy prostokąt i "x" nadal nie jest wyśrodkowane.

AKTUALIZACJA: Podczas gdy przycisk i zawartość są teraz idealnie wyśrodkowane, przycisk wciąż jest wyświetlany znacznie większy niż powinien być, tak jakby zastosowano wysokie wypełnienie.

definicja Mój styl zasób jest teraz następująco:

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

Sam przycisk jest zdefiniowany jako:

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

ekspandera będąc wewnątrz StackPanel w groupbox obrębie DockPanel.

W widoku projektu przyciski mają właściwy rozmiar, zawierają tylko X, ale w czasie wykonywania stają się powiększone. Jak mogę to poprawić?

Answer 1

Domyślam się, że widzisz ten problem, ponieważ istnieje konflikt między wysokością, którą mu dałeś, a przestrzenią, której potrzebuje do poprawnego wyrenderowania.

Co można zrobić, aby rozwiązać ten problem:

• grać z własności dopełnienia przycisku. Kontroluje to odstęp między tekstem a granicami przycisków.
• Zmniejsz rozmiar czcionki.
• Nie umieszczaj wyraźnej wysokości na przycisku lub przynajmniej nadaj mu wysokość wystarczająco dużą, aby pomieścić odpowiedni rozmiar czcionki i dopełnienie.

Ponadto, jak wspomniano przez Heinzi w komentarzach należy oczywiście użyć X. wielką

Nawiasem mówiąc, tu jest trick można użyć, jeśli chcesz, aby przycisk być właściwy kwadrat podczas upewniając się, że przycisk ma odpowiedni rozmiar.

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

To skutecznie pozwala przyciskowi zdecydować, jakiej wysokości potrzebuje, a następnie ustawić szerokość do tej wyliczonej wartości.

Answer 2

Prostym sposobem do osiągnięcia tego z małymi literami „x” jest użycie TextBlock jako treści i bawić się z jego górnym marginesie:

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