wpf - content - Alinear elementos en un panel de pila?

stackpanel content alignment

Question

Me preguntaba si puedo tener 2 controles en un StackPanel orientado horizontalmente para que el elemento correcto se acople 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 anterior, quiero que el Botón esté acoplado al lado derecho de StackPanel.

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

Answer 1

Esto funciona perfectamente para mi. Simplemente coloque 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>

Answer 2

No pude hacer funcionar esto usando un DockPanel de la manera que yo quería y revertir la dirección de flujo de un StackPanel es problemático. Usar una grilla no es una opción ya que los elementos dentro de ella pueden estar ocultos en el tiempo de ejecución y, por lo tanto, no sé el número total de columnas en el momento del diseño. La mejor y más simple solución que podría encontrar 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 hará que los controles dentro del StackPanel se alineen con el lado derecho del espacio disponible, independientemente de la cantidad de controles, tanto en el diseño como en el tiempo de ejecución. ¡Hurra! :)

Answer 3

Para aquellos que tropiezan con esta pregunta, aquí se muestra cómo lograr este diseño con una Grid :

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

crea

Server:                                                                   http://127.0.0.1

Answer 4

Puede configurar FlowDirection del Stack panel en RightToLeft , y luego todos los elementos se alinearán en el lado derecho.

Answer 5

Puedes lograr esto con un DockPanel :

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

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

Actualizar

Como se señaló en los comentarios, también puede usar la propiedad FlowDirection de un StackPanel . Ver la answer de @D_Bester.

Answer 6

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

<Separator Width="42"></Separator>

Answer 7

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

relativepanel.alignrightwithpanel = "true"

para los elementos contenidos

Answer 8

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