Textinhalt in einer WPF-Schaltfläche, die nicht vertikal zentriert wird

Question

Gibt es einen Grund, warum der Textinhalt einer WPF-Schaltfläche mit unerwünschtem Leerzeichen über dem Text angezeigt wird?

Ich habe eine Schaltfläche in einem StackPanel. Diese Schaltfläche ist eine einfache Schaltfläche zum Schließen, sodass ich sie als eine quadratische Schaltfläche mit einem zentrierten "x" anzeigen möchte. Ich habe mein Padding auf Null gesetzt und sowohl HorizontalContentAlign als auch VerticalContentAlign auf Mitte gesetzt, aber das "x" erscheint immer noch am unteren Rand der Schaltfläche (oder wird abgeschnitten, wenn meine FontSize zu groß im Verhältnis zu meiner Höhe ist). Es ist, als ob oben auf der Schaltfläche ein Padding vorhanden ist, das verhindert, dass der Text den gesamten vertikalen Abstand einnimmt.

Meine XAML ist:

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

Das Problem ist genau das gleiche sollte ich meine Taste VerticalContentAlign Eigenschaft entweder Stretch oder sogar Top. Wenn ich die Eigenschaften "Height" und "Weight" entferne, so dass die Schaltfläche ihre eigenen bestimmt, erscheint das Steuerelement nicht als Quadrat, sondern als aufrechtes Rechteck und das "x" ist immer noch nicht zentriert.

UPDATE: Während Knopf und Inhalt nun beide perfekt zentriert sind, wird der Knopf immer noch viel größer angezeigt, als es sein müsste, als ob ein hoher Padding angewendet wird.

Meine Definition Ressource Stil ist nun wie folgt:

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

Der Knopf selbst ist definiert als:

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

Der Expander innerhalb eines Stackpanel innerhalb eines DockPanel innerhalb eines GroupBox zu sein.

In der Entwurfsansicht sind die Schaltflächen richtig dimensioniert, sie enthalten nur das X, aber zur Laufzeit werden sie vergrößert. Wie kann ich das korrigieren?

Answer 1

Meine Vermutung ist, dass Sie dieses Problem sehen, weil es einen Konflikt zwischen der Höhe gibt, die Sie ihm gegeben haben, und dem Raum, den es tatsächlich benötigt, um sich richtig zu rendern.

Dinge, die Sie dieses Problem zu lösen können:

• Wiedergabe mit der Padding-Eigenschaft der Schaltfläche. Dies steuert den Abstand zwischen dem Text und den Schaltflächenrändern.
• Reduzieren Sie die Schriftgröße.
• Legen Sie keine explizite Höhe auf die Schaltfläche, oder geben Sie ihr mindestens eine Höhe, die groß genug für die gewünschte Schriftgröße und das Padding ist.

Auch, wie durch Heinzi in den Kommentaren erwähnen Sie natürlich ein Groß X.

Durch die Art und Weise verwendet werden sollen, ist hier ein Trick können Sie verwenden, wenn Sie die Taste ein richtiger Platz, während sein zu wollen Stellen Sie sicher, dass die Schaltfläche die benötigte Größe erhält.

Damit kann die Schaltfläche effektiv entscheiden, welche Höhe benötigt wird, und dann wird die Breite auf diesen berechneten Wert festgelegt.

Answer 2

Ein einfacher Weg, dies mit einem geringeren Fall zu erreichen „x“ ist ein TextBlock als Inhalt zu verwenden und mit seinem oberen Rande spielen:

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