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

Question

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

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

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

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

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

Answer 1

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

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

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

Обновление

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

Answer 2

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

Answer 3

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

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

создает

Server:                                                                   http://127.0.0.1

Answer 4

Не удалось заставить это работать с использованием 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 будут выровнены по правой стороне доступного пространства независимо от количества элементов управления - как во время разработки, так и во время выполнения. Ура! :)

Answer 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>

Answer 6

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

Answer 7

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

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

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

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

Answer 8

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

relativepanel.alignrightwithpanel = "истинный"

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

Answer 9

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

<Separator Width="42"></Separator>