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

Question

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

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

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

<StackPanel Orientation="Horizontal">

    <TextBlock>Left</TextBlock>

    <Button Width="30" HorizontalAlignment="Right">Right<Button>

</StackPanel>

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

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

684 9

alignment wpf layout wpf-controls stackpanel

9 ответов:

Comments

Ничего не найдено.

Dirk Vollmar · Accepted Answer · 2017-10-22 17:05:29

вы можете достичь этого с помощью DockPanel:
<DockPanel Width="300">
    <TextBlock>Left</TextBlock>
    <Button HorizontalAlignment="Right">Right</Button>
</DockPanel>
разница в том, что StackPanel организует дочерние элементы в одну строку (вертикально или горизонтально), тогда как DockPanel определяет область, в которой можно расположить дочерние элементы горизонтально или вертикально относительно друг друга (the Dock свойство изменяет положение элемента относительно других элементов в том же контейнере. Свойства выравнивания, такие как HorizontalAlignment, изменить положение элемента относительно его родительского элемента).

обновление

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

RusBog · Accepted Answer · 2015-08-12 15:21:31

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

mopsled · Accepted Answer · 2017-10-24 11:33:36

для тех, кто натыкается на этот вопрос, вот как достичь этого макета С a Grid:
<Grid>
    <TextBlock Text="Server:"/>
    <TextBlock Text="http://127.0.0.1" HorizontalAlignment="Right"/>
</Grid>
создает
Server:                                                                   http://127.0.0.1

Ross · Accepted Answer · 2017-01-05 10:12:46

не удалось получить эту работу с помощью DockPanel совсем так, как я хотел, и изменение направления потока StackPanel вызывает проблемы. Использование сетки не является опцией, поскольку элементы внутри нее могут быть скрыты во время выполнения, и поэтому я не знаю общее количество столбцов во время разработки. Лучшее и самое простое решение, которое я мог бы придумать, это:
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="1" Orientation="Horizontal">
        
    </StackPanel>
</Grid>
это приведет к тому, что элементы управления внутри StackPanel будут выровнены по правой стороне доступного пространства независимо от количество элементов управления-как при проектировании, так и во время выполнения. Ура! :)

Attiff · Accepted Answer · 2016-06-08 10:07:03

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

D_Bester · Accepted Answer · 2017-10-21 19:52:08

Это прекрасно работает для меня. Просто положите кнопку сначала, так как вы начинаете справа. Если 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>

Ahmed.Net · Accepted Answer · 2016-12-17 16:00:28

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

relativepanel.alignrightwithpanel= "true"

для элементов.

Christopher Zahrobsky · Accepted Answer · 2018-08-21 20:10:04

Если у вас возникла проблема, подобная той, которая была у меня, когда метки были центрированы в моей вертикальной панели стека, убедитесь, что вы используете элементы управления полной шириной. Удалите свойство Width или поместите кнопку в контейнер полной ширины, который позволяет внутреннее выравнивание. WPF-это все об использовании контейнеров для управления макетом.
<StackPanel Orientation="Vertical">
    <TextBlock>Left</TextBlock>
    <DockPanel>
        <Button HorizontalAlignment="Right">Right</Button>
    </DockPanel>
</StackPanel>
вертикальная панель стека с левой меткой, за которой следует правая кнопка

Я надеюсь, что это помогает.

B. Clay Shannon · Accepted Answer · 2012-09-13 01:49:24

может быть, не то, что вы хотите, если вам нужно избежать жесткого кодирования значений размера, но иногда я использую "прокладку" (разделитель) для этого:
<Separator Width="42"></Separator>