Wyrównać elementy w panelu stosu?

148

Zastanawiałem się, czy mogę mieć 2 kontrolki w poziomym panelu StackPanel, tak aby właściwy element był zadokowany po prawej stronie StackPanel.

Próbowałem następujących rzeczy, ale nie zadziałało:

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

W powyższym fragmencie chcę, aby przycisk był zadokowany po prawej stronie StackPanel.

Uwaga: muszę to zrobić za pomocą StackPanel, a nie Grid itp.

Shimmy Weitzhandler
źródło
Wyraźnie wspomniałeś o braku siatek, ale dokładnie tak to osiągnąłem. Będę zainteresowany, czy ktoś inny nie ma odpowiedzi na Twoje pytanie, która pasuje do moich potrzeb.
JMD,
tak, ktoś właśnie dał mi projekt pełen paneli stosu w ten sposób, tak chce, aby to naprawić.
Shimmy Weitzhandler
3
Wiem, że to (bardzo) późno, ale czy nie mógłbyś umieścić dockpanelu w stackpanelu?
Kian,
1
@Kian, masz absolutną rację ze swoim komentarzem, sam o tym pomyślałem, próbowałem i zadziałało idealnie.
Gabrielius,

Odpowiedzi:

221

Możesz to osiągnąć dzięki DockPanel:

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

Różnica polega na tym, że a StackPanelspowoduje ułożenie elementów podrzędnych w jednej linii (w pionie lub w poziomie), podczas gdy a DockPaneldefiniuje obszar, w którym można układać elementy potomne w poziomie lub w pionie względem siebie ( Dockwłaściwość zmienia położenie elementu względem siebie elementy w tym samym kontenerze. Właściwości wyrównania, takie jak HorizontalAlignmentzmiana pozycji elementu względem jego elementu nadrzędnego).

Aktualizacja

Jak wskazano w komentarzach, możesz również użyć FlowDirectionwłaściwości a StackPanel. Zobacz @ D_Bester za odpowiedź .

Dirk Vollmar
źródło
1
to właśnie miałem na myśli mówiąc „itd.” Myślę, że odpowiedź brzmi nie i będę musiał to zrobić w trudny sposób, przeczytaj mój komentarz dotyczący JMD powyżej
Shimmy Weitzhandler
Cóż, StackPanel po prostu nie może zrobić układu, który chcesz. Siatka zapewnia największą elastyczność, ale zmiana ze StackPanel na DockPanel nie wydaje się zbyt trudna.
Dirk Vollmar
2
W systemie Windows 8 nie ma DockPanel, jakieś inne rozwiązania?
Christoph,
@DirkVollmar Właściwie StackPanel działa całkiem dobrze, zobacz moją odpowiedź.
D_Bester
1
jeśli chcesz, aby element był najbardziej wyrównany, ustaw LastChildFill="False"to <DockPanel LastChildFill="False">, patrz stackoverflow.com/a/9599290/4573839
yu yang Jian.
68

Yo można ustawić FlowDirectionod Stack paneldo RightToLeft, a następnie wszystkie elementy zostaną wyrównane do prawej strony.

RusBog
źródło
3
Należy jednak pamiętać, że zmienia to (odwraca) kolejność kontrolek w StackPanel.
rumblefx0
1
@slattery Jeśli FlowDirection jest problemem, po prostu umieść inny StackPanel i określ FlowDirection. Zobacz moją odpowiedź.
D_Bester
1
@ rumblefx0: uwaga, panel DockPanel również odwraca kolejność elementów sterujących, jeśli są zadokowane po prawej lub u dołu. Dzieje się tak, ponieważ pierwsza kontrolka jest zadokowana jako pierwsza.
Olivier Jacot-Descombes
29

Dla tych, którzy natkną się na to pytanie, oto jak osiągnąć ten układ za pomocą Grid:

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

tworzy

Server:                                                                   http://127.0.0.1
mopsled
źródło
18

Nie mogłem tego uruchomić przy użyciu DockPanel w taki sposób, w jaki chciałem, a odwrócenie kierunku przepływu StackPanel jest kłopotliwe. Korzystanie z siatki nie jest opcją, ponieważ elementy w niej zawarte mogą być ukryte w czasie wykonywania, a zatem nie znam całkowitej liczby kolumn w czasie projektowania. Najlepsze i najprostsze rozwiązanie jakie mogłem wymyślić to:

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

Spowoduje to wyrównanie formantów wewnątrz StackPanel do prawej strony dostępnego miejsca, niezależnie od liczby kontrolek - zarówno podczas projektowania, jak i wykonywania. Yay! :)

Ross
źródło
Jeśli FlowDirection jest problemem, po prostu umieść inny StackPanel i określ FlowDirection. Zobacz moją odpowiedź.
D_Bester
Myślę, że jest to znacznie czystsze rozwiązanie niż mieszanie z zagnieżdżonymi kierunkami przepływu
Ross
5

U mnie to działa idealnie. Po prostu umieść przycisk jako pierwszy, ponieważ zaczynasz po prawej stronie. Jeśli FlowDirection stanie się problemem, po prostu dodaj wokół niego StackPanel i określ FlowDirection = "LeftToRight" dla tej części. Lub po prostu określ FlowDirection = "LeftToRight" dla odpowiedniej kontrolki.

<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
źródło
4
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Left"  />
    <Button Width="30" Grid.Column="1" >Right</Button>
</Grid>
Attif
źródło
0

w systemie Windows 10 użyj panelu RelativePanel zamiast panelu stosu i użyj

Relativepanel.alignrightwithpanel = "true"

dla zawartych elementów.

Ahmed.Net
źródło
0

Jeśli masz problem taki jak ten, który miałem, w którym etykiety były wyśrodkowane w moim panelu stosu pionowego, upewnij się, że używasz elementów sterujących pełną szerokością. Usuń właściwość Width lub umieść przycisk w kontenerze o pełnej szerokości, który umożliwia wewnętrzne wyrównanie. WPF polega na używaniu kontenerów do kontrolowania układu.

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

Vertical StackPanel z lewą etykietą, po której następuje prawy przycisk

Mam nadzieję, że to pomoże.

Christopher Zahrobsky
źródło
-8

Może nie to, czego chcesz, jeśli chcesz uniknąć zakodowanych na stałe wartości rozmiaru, ale czasami używam do tego „podkładki” (separatora):

<Separator Width="42"></Separator>
B. Clay Shannon
źródło