wpf grid example xaml

WPF: Alineación de la línea de base de una etiqueta y su cuadro de texto

Question

Digamos que tengo un TextBox simple al lado de una Etiqueta:

<StackPanel>
<StackPanel Orientation="Horizontal">
<Label Margin="3">MyLabel</Label>
<TextBox Margin="3" Width="100">MyText</TextBox>
</StackPanel>
...
</StackPanel>

Esto produce el siguiente resultado:

Como puede ver, las líneas base de MyLabel y MyText no están alineadas, lo que se ve feo. Por supuesto, podría empezar a jugar con los márgenes hasta que coincidan, pero como este es un requisito tan común, estoy seguro de que WPF ofrece una solución mucho más fácil y más elegante, que aún no he encontrado ...

Answer 1

¿Qué piensas?

<StackPanel Orientation="Horizontal">
<Label Margin="3" VerticalContentAlignment="Center">MyLabel</Label>
<TextBox Margin="3" VerticalContentAlignment="Center" Width="100">MyText</TextBox>
</StackPanel>

Answer 2

Este comportamiento es, creo, causado por el hecho de que el TextBox defecto una alineación vertical de Stretch , lo que hace que ocupe el espacio disponible y tenga el par de píxeles adicionales debajo del texto. Si usa esto en su lugar:

<StackPanel>
<StackPanel Orientation="Horizontal">
<Label >MyLabel</Label>
<TextBox VerticalAlignment="Center" Width="100">MyText</TextBox>
</StackPanel>
</StackPanel>

... debería ver un resultado más limpio.

Answer 3

Logré esa mirada en Kaxaml con:

<StackPanel Orientation="Horizontal">
<Label Margin="3" VerticalAlignment="Center">MyLabel</Label>
<TextBox Margin="3" Width="100" VerticalAlignment="Center">MyText</TextBox>
</StackPanel>

Answer 4

Sé que esta es una respuesta antigua, pero aquí hay un ejemplo para aquellos que buscan otra manera, donde no necesitan depender de un ancho de texto fijo:

En lugar de StackPanel, use DockPanel y .Dock .

Esto resulta ser muy útil cuando se usa dentro de una rejilla.

<DockPanel Grid.Column="2" Grid.Row="2">
<Label Content="SomeTitle:" DockPanel.Dock="Left"></Label>
<TextBox x:Name="SomeValueTextBox" VerticalAlignment="Center" DockPanel.Dock="Right"></TextBox>
</DockPanel>