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

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

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

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

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

Примечание. Мне нужно, чтобы это выполнялось с помощью StackPanel, а не с сеткой и т.д.

Ответ 1

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

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

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

Обновить

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

Ответ 2

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

Ответ 3

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

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

создает

Server:                                                                   http://127.0.0.1

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

Ответ 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>

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

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

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

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

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

Ответ 9

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

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