¿Alinear elementos en un panel de pila?


148

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

Intenté lo siguiente pero no funcionó:

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

En el fragmento de arriba, quiero que el botón esté acoplado al lado derecho del StackPanel.

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


Usted menciona explícitamente que no hay cuadrículas, pero así es exactamente como lo logré. Estaré interesado en ver si alguien más tiene una respuesta no cuadriculada para su pregunta que se ajuste a mis propias necesidades.
JMD

Sí, alguien me acaba de dar un proyecto lleno de paneles de esta forma, así es como él quiere que se arregle.
Shimmy Weitzhandler

3
Sé que esto es (extremadamente) tarde, pero ¿no podría poner un panel de acoplamiento dentro del panel de pila?
Kian

1
@Kian, tienes toda la razón con tu comentario, lo pensé yo mismo, lo intenté y funcionó perfectamente.
Gabrielius

Respuestas:


221

Puedes lograr esto con DockPanel:

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

La diferencia es que a StackPanelorganizará los elementos secundarios en una sola línea (ya sea vertical u horizontalmente) mientras que a DockPaneldefine un área donde puede organizar los elementos secundarios, ya sea horizontal o verticalmente, entre sí (la Dockpropiedad cambia la posición de un elemento en relación con otro elementos dentro del mismo contenedor Las propiedades de alineación, como HorizontalAlignment, cambian la posición de un elemento con respecto a su elemento padre).

Actualizar

Como se señaló en los comentarios, también puede usar la FlowDirectionpropiedad de a StackPanel. Ver la respuesta de @ D_Bester .


1
esto es lo que quise decir con el 'etc.' Supongo que la respuesta es no, y tendré que hacerlo de la manera difícil, lea mi comentario para JMD arriba
Shimmy Weitzhandler el

Bueno, StackPanel simplemente no puede hacer el diseño que desea. Una cuadrícula le dará la mayor flexibilidad, pero un cambio de StackPanel a DockPanel no parece demasiado difícil.
Dirk Vollmar

2
No hay DockPanel en Windows 8, ¿alguna otra solución?
Christoph

@DirkVollmar En realidad StackPanel funciona bastante bien, mira mi respuesta.
D_Bester

1
Si desea permitir que align elemento más a la derecha, conjunto LastChildFill="False"que es <DockPanel LastChildFill="False">, ver stackoverflow.com/a/9599290/4573839
Yu Yang Jian

68

Puede configurar FlowDirectionde Stack panela RightToLeft, y luego todos los elementos se alinearán al lado derecho.


3
Sin embargo, tenga en cuenta que esto cambia (invierte) el orden de los controles en el StackPanel.
rumblefx0

1
@slattery Si FlowDirection es un problema, simplemente coloque otro StackPanel y especifique FlowDirection. Mira mi respuesta.
D_Bester

1
@ rumblefx0: nota, el DockPanel también invierte el orden de los controles, si están acoplados a la derecha o al fondo. Esto se debe a que el primer control se acopla primero.
Olivier Jacot-Descombes

29

Para los que se tropiezan con esta pregunta, aquí está la forma de lograr este diseño con un Grid:

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

crea

Server:                                                                   http://127.0.0.1

18

No pude hacer que esto funcionara con un DockPanel de la manera que quería e invertir la dirección del flujo de un StackPanel es problemático. El uso de 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 tiempo de diseño. La mejor y más simple solución que se me ocurre 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 dará como resultado que los controles dentro del StackPanel se alineen al lado derecho del espacio disponible, independientemente de la cantidad de controles, tanto en el diseño como en el tiempo de ejecución. ¡Hurra! :)


Si FlowDirection es un problema, simplemente coloque otro StackPanel y especifique FlowDirection. Mira mi respuesta.
D_Bester

Creo que esta es una solución mucho más limpia que jugar con las direcciones de flujo anidadas
Ross

5

Esto funciona perfectamente para mi. Simplemente ponga el botón primero ya que está comenzando a 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 relevante.

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

4
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Left"  />
    <Button Width="30" Grid.Column="1" >Right</Button>
</Grid>

0

para Windows 10 use relativePanel en lugar de stack panel, y use

relativepanel.alignrightwithpanel = "true"

para los elementos contenidos.


0

Si tiene un problema como el que tenía donde las etiquetas estaban centradas en mi panel de pila vertical, asegúrese de usar controles de ancho completo. Elimine la propiedad Ancho 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>

StackPanel vertical con etiqueta izquierda seguida de botón derecho

Espero que esto ayude.


-8

Tal vez no sea lo que desea si necesita evitar valores de tamaño de codificación rígida, pero a veces uso un "separador" para esto:

<Separator Width="42"></Separator>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.