wake-up-neo.net

Elemente in einem Stapelbedienfeld ausrichten?

Ich habe mich gefragt, ob ich 2 Steuerelemente in einem horizontal ausgerichteten StackPanel verwenden kann, sodass das richtige Element an der rechten Seite des StackPanels angedockt werden sollte.

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 Ausschnitt möchte ich, dass der Button an der rechten Seite des StackPanels angedockt ist.

Hinweis: Ich brauche es mit StackPanel, nicht mit Grid usw.

wpflayoutwpf-controlsstackpanelalignment
119
Shimmy

Sie können dies mit einer DockPanel erreichen:

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

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

Update

Wie in den Kommentaren dargelegt, können Sie auch die FlowDirection-Eigenschaft einer StackPanel verwenden. Siehe @ D_Besters Antwort .

189
Dirk Vollmar

Sie können FlowDirection von Stack panel auf RightToLeft setzen und dann werden alle Elemente auf der rechten Seite ausgerichtet.

57
RusBog

Für diejenigen, die auf diese Frage stoßen, erfahren Sie hier, wie Sie dieses Layout mit einer Grid erreichen:

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

schafft

Server:                                                                   http://127.0.0.1
20
mopsled

Mit einem DockPanel konnte ich nicht so arbeiten, wie ich es wollte, und das Umkehren der Flussrichtung eines StackPanels ist mühsam. Die Verwendung eines Rasters ist keine Option, da Elemente darin zur Laufzeit ausgeblendet werden können und daher die Gesamtanzahl der Spalten zur Entwurfszeit nicht bekannt ist. Die beste und einfachste Lösung, die ich mir vorstellen kann, 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 hat zur Folge, dass Steuerelemente im StackPanel unabhängig von der Anzahl der Steuerelemente auf der rechten Seite des verfügbaren Speicherbereichs ausgerichtet werden - und zwar sowohl beim Entwurf als auch zur Laufzeit. Yay! :)

14
Ross

Das funktioniert perfekt für mich. Setzen Sie einfach den Knopf zuerst, 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>
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

für Windows 10 verwenden Sie relativePanel anstelle des Stack-Panels und verwenden Sie 

relativepanel.alignrightwithpanel = "true"

für die enthaltenen Elemente.

0
Ahmed.Net

Wenn bei Ihnen ein Problem auftritt, bei dem die Beschriftungen in meinem vertikalen Stapelbereich zentriert waren, sollten Sie sicherstellen, dass Sie die gesamte Breite verwenden. Löschen Sie die Width-Eigenschaft, oder platzieren Sie die Schaltfläche in einem Container mit voller Breite, der eine interne Ausrichtung zulässt. Bei WPF dreht sich alles um die Steuerung des Layouts.

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

Vertikales StackPanel mit Left Label gefolgt von Right Button

Ich hoffe das hilft.

0
Christopher Zahrobsky