Elemente in einem Stapelfenster ausrichten?

148

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.

Shimmy Weitzhandler
quelle
Sie erwähnen ausdrücklich keine Gitter, aber genau so habe ich das erreicht. Es würde mich interessieren, ob jemand anderes eine Antwort ohne Raster für Ihre Frage hat, die meinen eigenen Bedürfnissen entspricht.
JMD
Ja, jemand hat mir auf diese Weise ein Projekt voller Stack-Panels gegeben. So möchte er, dass es repariert wird.
Shimmy Weitzhandler
3
Ich weiß, dass dies (extrem) spät ist, aber könnten Sie kein Dockpanel in das Stackpanel einfügen?
Kian
1
@Kian, du hast absolut Recht mit deinem Kommentar, ich habe selbst darüber nachgedacht, es versucht und es hat perfekt funktioniert.
Gabrielius

Antworten:

221

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 .

Dirk Vollmar
quelle
1
das habe ich mit dem 'etc.' gemeint Ich denke, die Antwort ist nein und muss es auf die harte
Tour machen.
Nun, StackPanel kann einfach nicht das gewünschte Layout erstellen. Ein Grid bietet Ihnen die größte Flexibilität, aber ein Wechsel von StackPanel zu DockPanel scheint nicht allzu schwierig zu sein.
Dirk Vollmar
2
Es gibt kein DockPanel in Windows 8, andere Lösungen?
Christoph
@DirkVollmar Eigentlich funktioniert StackPanel ganz gut, siehe meine Antwort.
D_Bester
1
Wenn Sie möchten, dass das Element am weitesten rechts ausgerichtet LastChildFill="False"ist <DockPanel LastChildFill="False">, stellen Sie dies ein
yu yang Jian
68

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

RusBog
quelle
3
Beachten Sie jedoch, dass dies die Reihenfolge der Steuerelemente im StackPanel ändert (umkehrt).
rumblefx0
1
@slattery Wenn FlowDirection ein Problem darstellt, fügen Sie einfach ein anderes StackPanel ein und geben Sie die FlowDirection an. Siehe meine Antwort.
D_Bester
1
@ rumblefx0: Beachten Sie, dass das DockPanel auch die Reihenfolge der Steuerelemente umkehrt, wenn sie rechts oder unten angedockt sind. Dies liegt daran, dass das erste Steuerelement zuerst angedockt wird.
Olivier Jacot-Descombes
29

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
gewischt
quelle
18

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

Ross
quelle
Wenn FlowDirection ein Problem darstellt, fügen Sie einfach ein anderes StackPanel ein und geben Sie die FlowDirection an. Siehe meine Antwort.
D_Bester
Ich denke, dies ist eine viel sauberere Lösung als mit verschachtelten Strömungsrichtungen herumzuspielen
Ross
5

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

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

relativepanel.alignrightwithpanel = "true"

für die enthaltenen Elemente.

Ahmed.Net
quelle
0

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.

Christopher Zahrobsky
quelle
-8

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>
B. Clay Shannon
quelle