Elemente in einem Stapelfenster ausrichten?

Ich habe mich gefragt, ob ich zwei Steuerelemente in einem horizontal ausgerichteten StackPanel haben kann, damit das richtige Element an die rechte Seite des StackPanels angedockt wird.

Ich habe Folgendes versucht, aber es hat nicht funktioniert:

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

Im obigen Snippet soll der Button an der rechten Seite des StackPanels angedockt sein.

Hinweis: Ich muss es mit StackPanel machen, nicht mit Grid usw.

Sie können dies erreichen mit DockPanel:

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

Der Unterschied besteht darin, dass a StackPaneluntergeordnete Elemente in einer einzigen Linie (entweder vertikal oder horizontal) anordnet, während a DockPaneleinen Bereich definiert, in dem Sie untergeordnete Elemente entweder horizontal oder vertikal relativ zueinander anordnen können (die DockEigenschaft ändert die Position eines Elements relativ zu anderen Elemente innerhalb desselben Containers. Ausrichtungseigenschaften (z. B. HorizontalAlignmentÄndern der Position eines Elements relativ zu seinem übergeordneten Element).

Aktualisieren

Wie in den Kommentaren erwähnt, können Sie auch die FlowDirectionEigenschaft von a verwenden StackPanel. Siehe die Antwort von @ D_Bester .

Yo kann so eingestellt FlowDirectionvon Stack panelzu RightToLeft, und dann werden alle Elemente auf der rechten Seite ausgerichtet werden.

Für diejenigen, die über diese Frage stolpern, ist hier, wie man dieses Layout mit einem erreicht Grid:

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

schafft

Server:                                                                   http://127.0.0.1

Mit einem DockPanel konnte dies nicht so funktionieren, wie ich es wollte, und das Umkehren der Flussrichtung eines StackPanels ist problematisch. Die Verwendung eines Rasters ist keine Option, da Elemente in diesem Raster zur Laufzeit möglicherweise ausgeblendet sind und ich daher die Gesamtzahl der Spalten zur Entwurfszeit nicht kenne. Die beste und einfachste Lösung, die ich finden könnte, ist:

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

Dies führt dazu, dass Steuerelemente im StackPanel unabhängig von der Anzahl der Steuerelemente - sowohl zum Entwurf als auch zur Laufzeit - auf der rechten Seite des verfügbaren Speicherplatzes ausgerichtet werden. Yay! :) :)

Das funktioniert perfekt für mich. Legen Sie einfach den Knopf an die erste Stelle, da Sie rechts beginnen. Wenn FlowDirection zu einem Problem wird, fügen Sie einfach ein StackPanel hinzu und geben Sie FlowDirection = "LeftToRight" für diesen Teil an. Oder geben Sie einfach FlowDirection = "LeftToRight" für das entsprechende Steuerelement an.

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

Verwenden Sie für Windows 10 relativePanel anstelle von Stack Panel und verwenden Sie

relativepanel.alignrightwithpanel = "true"

für die enthaltenen Elemente.

Wenn Sie ein Problem wie das haben, bei dem Beschriftungen in meinem vertikalen Stapelfenster zentriert waren, stellen Sie sicher, dass Sie Steuerelemente in voller Breite verwenden. Löschen Sie die Width-Eigenschaft oder legen Sie Ihre Schaltfläche in einem Container voller Breite ab, der eine interne Ausrichtung ermöglicht. Bei WPF geht es darum, Container zur Steuerung des Layouts zu verwenden.

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

Vertikales StackPanel mit linker Beschriftung, gefolgt von rechter Schaltfläche

Ich hoffe das hilft.

Vielleicht nicht das, was Sie wollen, wenn Sie hartcodierte Größenwerte vermeiden müssen, aber manchmal verwende ich dafür einen "Shim" (Separator):

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