Выровнять элементы на панели стека?

148

Мне было интересно, могу ли я иметь 2 элемента управления в горизонтально ориентированной StackPanel, чтобы нужный элемент был пристыкован к правой стороне StackPanel.

Я попробовал следующее, но это не сработало:

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

В приведенном выше фрагменте я хочу, чтобы кнопка была пристыкована к правой стороне StackPanel.

Примечание: мне нужно сделать это с помощью StackPanel, а не Grid и т. Д.

Шимми Вайцхандлер
источник
Вы явно не упоминаете никаких сеток, но именно так я и сделал. Мне было бы интересно узнать, есть ли у кого-нибудь еще ответ без ответа на ваш вопрос, который соответствует моим собственным потребностям.
JMD
да, кто-то так дал мне проект, полный панелей стека, вот как он хочет, чтобы это было исправлено.
Шимми Вайцхандлер
3
Я знаю, что это (очень) поздно, но не могли бы вы установить док-панель внутри стековой панели?
Киан
1
@Kian, ты абсолютно прав с твоим комментарием, я сам об этом подумал, попробовал, и это сработало отлично.
Габриелий

Ответы:

221

Вы можете достичь этого с помощью DockPanel:

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

Разница заключается в том, что a StackPanelупорядочивает дочерние элементы в одну строку (либо по вертикали, либо по горизонтали), тогда как a DockPanelопределяет область, в которой вы можете упорядочить дочерние элементы по горизонтали или по вертикали относительно друг друга ( Dockсвойство изменяет положение элемента относительно других элементы в том же контейнере. Свойства выравнивания, такие как HorizontalAlignmentизменение позиции элемента относительно его родительского элемента).

Обновить

Как указано в комментариях, вы также можете использовать FlowDirectionсвойство a StackPanel. Смотрите ответ @ D_Bester .

Дирк Воллмар
источник
1
это то, что я имел в виду под «и т. д.» Я думаю, что ответ - нет, и придется сделать это жестким способом, прочитайте мой комментарий для JMD выше
Shimmy Weitzhandler
Ну, StackPanel просто не может сделать макет, который вы хотите. Сетка даст вам большую гибкость, но переход от StackPanel к DockPanel не кажется слишком сложным.
Дирк Воллмар
2
В Windows 8 нет DockPanel, есть другие решения?
Кристоф
@DirkVollmar На самом деле StackPanel работает довольно хорошо, смотрите мой ответ.
D_Bester
1
если вы хотите, чтобы элемент выровнялся по правому краю, установите LastChildFill="False"его <DockPanel LastChildFill="False">, см. stackoverflow.com/a/9599290/4573839
yu yang Jian
68

Йо можно установить FlowDirectionиз Stack panelк RightToLeft, а затем все элементы будут выровнены к правой стороне.

RusBog
источник
3
Однако обратите внимание, что это меняет (меняет) порядок элементов управления в StackPanel.
rumblefx0
1
@slattery Если FlowDirection является проблемой, просто поместите в другую StackPanel и укажите FlowDirection. Смотри мой ответ.
D_Bester
1
@ rumblefx0: обратите внимание, DockPanel также меняет порядок элементов управления, если они пристыкованы вправо или вниз. Это потому, что первый элемент управления закреплен первым.
Оливье Жако-Дескомб
29

Для тех, кто наткнулся на этот вопрос, вот как добиться этого макета с помощью Grid:

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

создает

Server:                                                                   http://127.0.0.1
mopsled
источник
18

Не удалось заставить это работать с использованием DockPanel так, как я хотел, и изменение направления потока StackPanel проблематично. Использование сетки не вариант, так как элементы внутри нее могут быть скрыты во время выполнения, и поэтому я не знаю общее количество столбцов во время разработки. Лучшее и самое простое решение, которое я мог бы найти:

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

Это приведет к тому, что элементы управления внутри StackPanel будут выровнены по правой стороне доступного пространства независимо от количества элементов управления - как во время разработки, так и во время выполнения. Ура! :)

Росс
источник
Если FlowDirection является проблемой, просто поместите в другую StackPanel и укажите FlowDirection. Смотри мой ответ.
D_Bester
Я думаю, что это гораздо более чистое решение, чем возиться с вложенными направлениями потока
Росс
5

Это прекрасно работает для меня. Просто сначала нажмите кнопку, так как вы начинаете справа. Если FlowDirection становится проблемой, просто добавьте вокруг него StackPanel и укажите FlowDirection = "LeftToRight" для этой части. Или просто укажите FlowDirection = "LeftToRight" для соответствующего элемента управления.

<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
источник
4
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Left"  />
    <Button Width="30" Grid.Column="1" >Right</Button>
</Grid>
Attif
источник
0

для Windows 10 используйте относительную панель вместо панели стека и используйте

relativepanel.alignrightwithpanel = "истина"

для содержащихся элементов.

Ahmed.Net
источник
0

Если у вас возникла проблема, подобная той, которая была у меня, когда метки были центрированы на моей вертикальной панели стеков, убедитесь, что вы используете элементы управления полной ширины. Удалите свойство Width или поместите кнопку в контейнер полной ширины, который позволяет выполнять внутреннее выравнивание. WPF - это использование контейнеров для управления макетом.

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

Вертикальная панель стека с левой меткой и правой кнопкой

Надеюсь, это поможет.

Кристофер Захробский
источник
-8

Может быть, это не то, что вам нужно, если вам нужно избегать жестко заданных значений размера, но иногда я использую «шим» (разделитель) для этого:

<Separator Width="42"></Separator>
Б. Клэй Шеннон
источник