Aligner les é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 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 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 .

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

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

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! :)

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>

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

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

relativepanel.alignrightwithpanel = "true"

pour les éléments contenus.

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.

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>