对齐堆栈面板中的项目？

Posted 2023-03-05

【中文标题】对齐堆栈面板中的项目？

【英文标题】：Align items in a stack panel?

【发布时间】：2011-01-02 15:38:53

【问题描述】：

我想知道我是否可以在水平方向的 StackPanel 中有 2 个控件，以便正确的项目应该停靠在 StackPanel 的右侧。

我尝试了以下方法，但没有成功：

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

在上面的 sn-p 中，我希望 Button 停靠在 StackPanel 的右侧。

注意：我需要使用 StackPanel，而不是 Grid 等来完成。

【问题讨论】：

您明确提到没有网格，但这正是我实现此目的的方式。我很想看看其他人是否有适合我自己需求的非网格答案。

是的，我刚刚有人给了我一个这样的堆栈面板项目，这就是他想要修复它的方式。

我知道这（非常）晚了，但你能不能在堆栈面板中放置一个停靠面板？

@Kian，你的评论完全正确，我自己想出来的，试过了，效果很好。

【参考方案1】：

如果您遇到的问题类似于我在垂直堆栈面板中的标签居中的问题，请确保使用全宽度控件。删除 Width 属性，或将按钮放在允许内部对齐的全角容器中。 WPF 就是使用容器来控制布局。

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

Vertical StackPanel with Left Label followed by Right Button

我希望这会有所帮助。

【参考方案2】：

对于那些偶然发现这个问题的人，以下是如何使用Grid：

实现此布局

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

创造

Server:                                                                   http://127.0.0.1

【参考方案3】：

您可以通过DockPanel 实现此目的：

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

区别在于StackPanel will arrange child elements into single line（垂直或水平）而DockPanel defines an area where you can arrange child elements either horizontally or vertically, relative to each other（Dock 属性会更改元素相对于同一容器中其他元素的位置。对齐属性，例如@987654330 @，改变元素相对于其父元素的位置）。

更新

正如 cmets 中所指出的，您还可以使用 StackPanel 的 FlowDirection 属性。请参阅@D_Bester 的answer。

【讨论】：

这就是我所说的“等”。我想答案是否定的，并且必须以艰难的方式做到这一点，请阅读我上面对 JMD 的评论

好吧，StackPanel 根本做不到你想要的布局。 Grid 将为您提供最大的灵活性，但从 StackPanel 更改为 DockPanel 似乎并不太难。

Windows 8没有DockPanel，还有其他解决办法吗？

@DirkVollmar 实际上 StackPanel 效果很好，请参阅我的回答。

如果想让item最右对齐，设置LastChildFill="False"即<DockPanel LastChildFill="False">，见***.com/a/9599290/4573839

【参考方案4】：

这对我来说非常有效。只需将按钮放在第一位，因为您从右侧开始。如果 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>

【参考方案5】：

无法按照我想要的方式使用 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。看我的回答。

我认为这是一个比弄乱嵌套流向更清洁的解决方案

【参考方案6】：

适用于 Windows 10 使用 relativePanel 代替堆栈面板，并使用

relativepanel.alignrightwithpanel="true"

对于包含的元素。

【参考方案7】：

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

【讨论】：

对于我的内容，我在第一个 columnDefinition 上使用了 Width="*"，在第二个 columnDefinition 上使用了 Width="Auto"。这样一来，第一列占用的空间就比第二列少了。

【参考方案8】：

你可以将Stack panel中的FlowDirection设置为RightToLeft，然后所有的项目都会向右对齐。

【讨论】：

但是请注意，这会改变（反转）StackPanel 中控件的顺序。

@slattery 如果 FlowDirection 有问题，只需放入另一个 StackPanel 并指定 FlowDirection。看我的回答。

@rumblefx0：注意，如果控件停靠在右侧或底部，DockPanel 也会反转控件的顺序。这是因为第一个控件首先停靠。

【参考方案9】：

如果您需要避免硬编码大小值，这可能不是您想要的，但有时我为此使用“垫片”（分隔符）：

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