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.


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


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.


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

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


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>

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

0

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

Relativepanel.alignrightwithpanel = "true"

dla zawartych elementów.


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.


-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>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.