Aligner les éléments dans un panneau de pile?


148

Je me demandais si je pouvais avoir 2 contrôles dans un StackPanel orienté horizontalement afin que le bon élément soit ancré sur le côté droit du StackPanel.

J'ai essayé ce qui suit mais cela n'a pas fonctionné:

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

Dans l'extrait de code ci-dessus, je veux que le Button soit ancré sur le côté droit de StackPanel.

Remarque: j'ai besoin que cela soit fait avec StackPanel, pas Grid, etc.


Vous ne mentionnez explicitement aucune grille, mais c'est exactement comme cela que j'ai accompli cela. Je serai intéressé de voir si quelqu'un d'autre a une réponse hors grille à votre question qui correspond à mes propres besoins.
JMD

ouais, quelqu'un vient de me donner un projet plein de panneaux de pile de cette façon, c'est comme ça qu'il veut que ça répare.
Shimmy Weitzhandler

3
Je sais que c'est (extrêmement) tard, mais ne pourriez-vous pas mettre un dockpanel dans le stackpanel?
Kian

1
@Kian, vous avez tout à fait raison avec votre commentaire, j'y ai pensé moi-même, j'ai essayé et cela a parfaitement fonctionné.
Gabrielius

Réponses:


221

Vous pouvez y parvenir avec DockPanel:

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

La différence est que a StackPanelorganisera les éléments enfants en une seule ligne (verticale ou horizontale) tandis que a DockPaneldéfinit une zone dans laquelle vous pouvez organiser les éléments enfants horizontalement ou verticalement, les uns par rapport aux autres (la Dockpropriété change la position d'un élément par rapport à l'autre éléments dans le même conteneur. Les propriétés d'alignement, telles que la HorizontalAlignmentmodification de la position d'un élément par rapport à son élément parent).

Mettre à jour

Comme indiqué dans les commentaires, vous pouvez également utiliser la FlowDirectionpropriété de a StackPanel. Voir la réponse de @ D_Bester .


1
c'est ce que je voulais dire avec le 'etc.' Je suppose que la réponse est non, et devra le faire de la manière la plus difficile, lisez mon commentaire pour JMD ci
Shimmy Weitzhandler

Eh bien, StackPanel ne peut tout simplement pas faire la mise en page que vous souhaitez. Une grille vous donnera le plus de flexibilité, mais un changement de StackPanel à DockPanel ne semble pas trop difficile.
Dirk Vollmar

2
Il n'y a pas de DockPanel dans Windows 8, d'autres solutions?
Christoph

@DirkVollmar En fait, StackPanel fonctionne assez bien, voyez ma réponse.
D_Bester

1
si vous voulez laisser l'élément s'aligner le plus à droite, définissez LastChildFill="False"-le <DockPanel LastChildFill="False">, voir stackoverflow.com/a/9599290/4573839
yu yang Jian

68

Yo peut mettre FlowDirectionde Stack panelà RightToLeft, puis tous les articles seront alignés sur le côté droit.


3
Notez cependant que cela modifie (inverse) l'ordre des contrôles dans le StackPanel.
rumblefx0

1
@slattery Si FlowDirection est un problème, insérez simplement un autre StackPanel et spécifiez FlowDirection. Voyez ma réponse.
D_Bester

1
@ rumblefx0: notez que le DockPanel inverse également l'ordre des contrôles, s'ils sont ancrés à droite ou en bas. Cela est dû au fait que le premier contrôle est ancré en premier.
Olivier Jacot-Descombes

29

Pour ceux qui trébuchent sur cette question, voici comment réaliser cette mise en page avec un Grid:

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

crée

Server:                                                                   http://127.0.0.1

18

Impossible de faire fonctionner cela en utilisant un DockPanel tout à fait comme je le souhaitais et inverser le sens du flux d'un StackPanel est gênant. L'utilisation d'une grille n'est pas une option car les éléments à l'intérieur peuvent être cachés au moment de l'exécution et je ne connais donc pas le nombre total de colonnes au moment de la conception. La solution la meilleure et la plus simple que je puisse trouver est:

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

Cela entraînera l'alignement des contrôles à l'intérieur du StackPanel sur le côté droit de l'espace disponible quel que soit le nombre de contrôles, à la fois lors de la conception et de l'exécution. Yay! :)


Si FlowDirection est un problème, placez simplement un autre StackPanel et spécifiez FlowDirection. Voyez ma réponse.
D_Bester

Je pense que c'est une solution beaucoup plus propre que de jouer avec les directions d'écoulement imbriquées
Ross

5

Cela fonctionne parfaitement pour moi. Mettez simplement le bouton en premier puisque vous commencez par la droite. Si FlowDirection devient un problème, ajoutez simplement un StackPanel autour de lui et spécifiez FlowDirection = "LeftToRight" pour cette partie. Ou spécifiez simplement FlowDirection = "LeftToRight" pour le contrôle pertinent.

<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

pour Windows 10, utilisez relativePanel au lieu de stack panel et utilisez

relativepanel.alignrightwithpanel = "true"

pour les éléments contenus.


0

Si vous rencontrez un problème comme celui que j'ai eu à l'endroit où les étiquettes étaient centrées dans mon panneau de pile verticale, assurez-vous d'utiliser des contrôles pleine largeur. Supprimez la propriété Width ou placez votre bouton dans un conteneur pleine largeur qui permet un alignement interne. WPF consiste à utiliser des conteneurs pour contrôler la disposition.

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

Vertical StackPanel avec étiquette gauche suivie du bouton droit

J'espère que ça aide.


-8

Peut-être pas ce que vous voulez si vous devez éviter les valeurs de taille de codage en dur, mais parfois j'utilise un "shim" (séparateur) pour cela:

<Separator Width="42"></Separator>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.