Contenido de texto en un botón WPF que no está centrado verticalmente

Question

¿Hay alguna razón por la cual el contenido de texto de un botón WPF aparece con espacio no deseado encima del texto?

Tengo un botón en un StackPanel. Este botón es un botón de cierre simple, así que quiero que aparezca como un botón cuadrado con una "x" centrada en él. Configuré mi relleno en cero y configuré HorizontalContentAlign y VerticalContentAlign en Center, pero la "x" todavía aparece en la parte inferior del botón (o incluso truncada si tengo FontSize demasiado grande en relación con mi altura). Es como si hubiera algo de relleno en la parte superior del botón que impida que el texto use todo el espacio vertical.

Mi XAML es:

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

El problema es exactamente el mismo debería configurar el botón de mi propiedad VerticalContentAlign a cualquiera de estiramiento o incluso superior. Si elimino las propiedades de Altura y Peso para que el botón lo determine, entonces el control no aparece como un cuadrado sino como un rectángulo vertical y la "x" todavía no está centrada.

ACTUALIZACIÓN: Mientras que el botón y el contenido están ahora centrados perfectamente, el botón todavía se muestra mucho más grande de lo que debería ser, como si se estuviera aplicando un alto relleno.

definición Mi estilo de recursos es ahora de la siguiente manera:

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

El botón mismo se define como:

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

El expansor estar dentro de un StackPanel dentro de un GroupBox dentro de un DockPanel.

En la vista de diseño, los botones tienen el tamaño correcto, solo contienen la X, pero en el tiempo de ejecución se agrandan. ¿Cómo puedo corregir eso?

Answer 1

Supongo que verá este problema porque hay un conflicto entre la altura que le dio y el espacio que realmente necesita para renderizarse correctamente.

cosas que puede hacer para solucionar esto:

• Juego con la propiedad Relleno del botón. Esto controla el espacio entre el texto y los bordes del botón.
• Reduzca el tamaño de la fuente.
• No coloque una altura explícita en el botón, o al menos déle una altura lo suficientemente grande como para acomodarse al tamaño de fuente y relleno que desee.

Además, como se ha mencionado por Heinzi en los comentarios que usted debe, por supuesto, utilizar una mayúscula X.

Por cierto, esto es un truco que puede utilizar si desea que el botón sea un tiempo cuadrado adecuada asegurándose de que el botón tenga el tamaño que necesita.

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

Esto permite que el botón decida efectivamente la altura que necesita y luego establece el ancho en ese valor calculado.

Answer 2

Una manera sencilla de lograr esto con una letra minúscula "x" es el uso de un TextBlock como contenido y jugar con su margen superior:

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