wpf - xaml pdf español

El contenido del texto en un botón WPF no se centra verticalmente

Question

¿Hay alguna razón por la que el contenido de texto de un botón WPF aparezca con un espacio no deseado sobre el 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. He establecido mi relleno en cero y he establecido tanto HorizontalContentAlign como VerticalContentAlign to Center, pero la "x" sigue apareciendo en la parte inferior del botón (o incluso truncada si mi tamaño de letra es demasiado grande en relación con mi altura). Es como si hubiera algún relleno en la parte superior del botón que impide que el texto use el espacio vertical completo.

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 si debo configurar mi botón VerticalContentAlign como Estirar o incluso Superior. Si elimino las propiedades Altura y Peso para que el botón determine las suyas, el control no aparece como un cuadrado, sino un rectángulo vertical y la "x" aún no está centrada.

ACTUALIZACIÓN: mientras que el botón y el contenido ahora están centrados a la perfección, el botón aún se muestra mucho más grande de lo que debe ser, como si se estuviera aplicando un relleno alto.

La definición de mi estilo de recurso es ahora como sigue:

<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 en sí 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 Expander está 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 tiempo de ejecución se amplían. ¿Cómo puedo corregir eso?

Answer 1

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

Cosas que puedes hacer para resolver esto:

• Juega con la propiedad Padding del botón. Esto controla el espacio entre el texto y los bordes de los botones.
• Reducir 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 adaptarse al tamaño de fuente y al relleno que desee.

Además, como lo mencionó Heinzi en los comentarios, debería, por supuesto, utilizar una X mayúscula.

Por cierto, aquí hay un truco que puedes usar si quieres que el botón se convierta en el cuadrado correcto mientras te aseguras de que 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 efectivamente permite que el botón decida qué altura necesita y luego establece el Ancho a ese valor calculado.

Answer 2

Una forma sencilla de lograr esto con una "x" minúscula es usar un TextBlock como contenido y jugar con su margen superior:

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