web-dev-qa-db-fra.com

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

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 ci-dessus, je souhaite que le bouton soit ancré à droite du StackPanel.

Remarque: il faut que ce soit fait avec StackPanel, pas avec Grid, etc.

wpflayoutwpf-controlsstackpanelalignment
119
Shimmy

Vous pouvez y parvenir avec une DockPanel:

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

La différence est que StackPanel organisera les éléments enfants en une seule ligne (verticale ou horizontale), tandis que DockPanel définit une zone dans laquelle vous pouvez organiser les éléments enfants horizontalement ou verticalement (le La propriété Dock modifie la position d'un élément par rapport aux autres éléments du même conteneur (les propriétés d'alignement, telles que HorizontalAlignment, modifient la position d'un élément par rapport à son élément parent).

Mettre à jour

Comme indiqué dans les commentaires, vous pouvez également utiliser la propriété FlowDirection de StackPanel. Voir @ D_Bester's answer .

189
Dirk Vollmar

Vous pouvez définir FlowDirection de Stack panel sur RightToLeft et tous les éléments seront alors alignés sur le côté droit.

57
RusBog

Pour ceux qui tombent sur cette question, voici comment réaliser cette présentation avec a Grid:

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

crée

Server:                                                                   http://127.0.0.1
20
mopsled

Impossible d’obtenir un résultat satisfaisant avec DockPanel et inverser le sens de circulation d’un StackPanel est gênant. L'utilisation d'une grille n'est pas une option, car les éléments qu'elle contient peuvent être masqués au moment de l'exécution et, par conséquent, je ne connais pas le nombre total de colonnes au moment de la conception. La solution la meilleure et la plus simple que je pourrais 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 de StackPanel sur le côté droit de l'espace disponible, quel que soit le nombre de contrôles - à la conception et à l'exécution. Yay! :)

14
Ross

Cela fonctionne parfaitement pour moi. Il suffit de mettre le bouton en premier puisque vous commencez à droite. Si FlowDirection devient un problème, ajoutez simplement un StackPanel et spécifiez FlowDirection = "LeftToRight" pour cette partie. Ou simplement, spécifiez FlowDirection = "LeftToRight" pour le contrôle correspondant.

<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>
3
D_Bester
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Left"  />
    <Button Width="30" Grid.Column="1" >Right</Button>
</Grid>
2
Attif

pour Windows 10 , utilisez relativePanel au lieu du panneau d'empilement, et utilisez 

relativepanel.alignrightwithpanel = "true"

pour les éléments contenus.

0
Ahmed.Net

Si vous rencontrez un problème similaire à celui que j'avais lorsque les étiquettes étaient centrées dans mon panneau de piles verticales, veillez à utiliser des contrôles de largeur totale. Supprimez la propriété Width ou placez votre bouton dans un conteneur pleine largeur permettant un alignement interne. WPF consiste à utiliser des conteneurs pour contrôler la mise en page.

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

StackPanel vertical avec étiquette gauche suivi du bouton droit

J'espère que ça aide.

0
Christopher Zahrobsky