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

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

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

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

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

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

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

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

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

Обновить

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

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

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

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

создает

Server:                                                                   http://127.0.0.1

Не удалось заставить это работать с использованием 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 = "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>

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

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

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

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

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

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

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

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

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

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