¿Alinear elementos en un panel de pila?


Me preguntaba si puedo tener 2 controles en un StackPanel orientado horizontalmente para que el elemento correcto se acople al lado derecho del StackPanel.

Probé lo siguiente pero no funcionó:

<StackPanel Orientation="Horizontal">
    <TextBlock>Left</TextBlock>
    <Button Width="30" HorizontalAlignment="Right">Right<Button>
</StackPanel>

En el fragmento de código anterior quiero que el Botón esté acoplado al lado derecho del panel de apilamiento.

Nota: Necesito que se haga con StackPanel, no con Grid, etc.

Author: Shimmy, 2010-01-07

9 answers

Puedes lograr esto con un DockPanel:

<DockPanel Width="300">
    <TextBlock>Left</TextBlock>
    <Button HorizontalAlignment="Right">Right</Button>
</DockPanel>

La diferencia es que un StackPanel ordenará los elementos secundarios en una sola línea (ya sea vertical u horizontalmente) mientras que a DockPanel define un área donde puede organizar elementos secundarios, ya sea horizontal o verticalmente, en relación entre sí (la propiedad Dock cambia la posición de un elemento en relación con otros elementos dentro del mismo contenedor. Propiedades de alineación, como HorizontalAlignment, cambian la posición de un elemento relativo a su elemento padre).

Actualización

Como se señala en los comentarios, también puede usar la propiedad FlowDirection de a StackPanel. Ver la respuesta de @D_Bester .

 184
Author: Dirk Vollmar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-22 14:05:29

Puedes establecer FlowDirection de Stack panel a RightToLeft, y luego todos los elementos se alinearán hacia el lado derecho.

 54
Author: RusBog,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-12 12:21:31

Para aquellos que tropiezan con esta pregunta, aquí está cómo lograr este diseño con a Grid:

<Grid>
    <TextBlock Text="Server:"/>
    <TextBlock Text="http://127.0.0.1" HorizontalAlignment="Right"/>
</Grid>

Crea

Server:                                                                   http://127.0.0.1
 18
Author: mopsled,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-24 08:33:36

No pude hacer que esto funcionara usando un DockPanel de la manera que quería y revertir la dirección del flujo de un StackPanel es problemático. Usar una cuadrícula no es una opción, ya que los elementos dentro de ella pueden estar ocultos en tiempo de ejecución y, por lo tanto, no sé el número total de columnas en el tiempo de diseño. La mejor y más simple solución que se me ocurrió es:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="1" Orientation="Horizontal">
        <!-- Right aligned controls go here -->
    </StackPanel>
</Grid>

Esto resultará en que los controles dentro del StackPanel se alineen al lado derecho del espacio disponible, independientemente del número de controles, tanto en el diseño como en el tiempo de ejecución. Yay! :)

 13
Author: Ross,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-05 08:12:46
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Left"  />
    <Button Width="30" Grid.Column="1" >Right</Button>
</Grid>
 2
Author: Attiff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-08 07:07:03

Esto funciona perfectamente para mí. Solo tienes que poner el botón primero ya que estás empezando por la derecha. Si FlowDirection se convierte en un problema, simplemente agregue un StackPanel a su alrededor y especifique FlowDirection="LeftToRight" para esa parte. O simplemente especifique FlowDirection= "LeftToRight" para el control correspondiente.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" FlowDirection="RightToLeft">
    <Button Width="40" HorizontalAlignment="Right" Margin="3">Right</Button>
    <TextBlock Margin="5">Left</TextBlock>
    <StackPanel FlowDirection="LeftToRight">
        <my:DatePicker Height="24" Name="DatePicker1" Width="113" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" />    
    </StackPanel>
    <my:DatePicker FlowDirection="LeftToRight" Height="24" Name="DatePicker1" Width="113" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" />    
</StackPanel>
 1
Author: D_Bester,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-21 16:52:08

Para windows 10 use RelativePanel en lugar de stack panel, y use

Relativepanel.alignrightwithpanel = "true"

Para los elementos contenidos.

 0
Author: Ahmed.Net,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-17 14:00:28

Si tiene un problema como el que tuve cuando las etiquetas estaban centradas en mi panel de pila vertical, asegúrese de usar controles de ancho completo. Elimine la propiedad Width o coloque el botón en un contenedor de ancho completo que permita la alineación interna. WPF se trata de usar contenedores para controlar el diseño.

<StackPanel Orientation="Vertical">
    <TextBlock>Left</TextBlock>
    <DockPanel>
        <Button HorizontalAlignment="Right">Right</Button>
    </DockPanel>
</StackPanel>

Panel de apilamiento vertical con Etiqueta Izquierda seguida del Botón Derecho

Espero que esto ayude.

 0
Author: Christopher Zahrobsky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-21 17:10:04

Tal vez no sea lo que quieres si necesitas evitar los valores de tamaño de codificación rígida, pero a veces uso un "shim" (Separador) para esto:

<Separator Width="42"></Separator>
 -7
Author: B. Clay Shannon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-12 22:49:24