对齐堆栈面板中的项目？

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

我尝试了以下方法，但没有效果:

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

在上面的代码片段中，我希望按钮停靠在 StackPanel 的右侧。

注意: 我需要它做的 StackPanel，而不是网格等。

195778 次浏览
小开
最佳答案

你可以通过 DockPanel来实现这一点:

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

不同之处在于，StackPanel将子元素排列成单行(垂直或水平)而 DockPanel定义了一个区域，您可以在这个区域中相对于彼此水平或垂直地排列子元素(Dock属性改变元素相对于同一容器中其他元素的位置。对齐属性(如 HorizontalAlignment)会改变元素相对于其父元素的位置)。

更新

正如注释中指出的，你也可以使用 StackPanel的 FlowDirection属性。

小开

你可以设置 Stack panel的 FlowDirection到 RightToLeft，然后所有的项目将对齐到右边。

小开

如果您需要避免硬编码大小值，也许不是您想要的，但有时我使用“ shim”(分隔符) :

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

对于那些偶然发现这个问题的人，这里是如何实现这个布局 和 a Grid:

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

创造

Server:                                                                   http://127.0.0.1
小开 
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="Left"  />
<Button Width="30" Grid.Column="1" >Right</Button>
</Grid>
小开

窗口10 使用 relativePanel 代替栈面板，并使用

Alignright = “ true”

所包含的元素。

小开

使用 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 内的控件与可用空间的右侧对齐，而不管设计和运行时的控件数量如何。耶！:)

小开

这对我来说再合适不过了。把按钮放在第一位，因为你从右边开始。如果 FlowDirect 出现问题，只需在其周围添加一个 StackPanel，并为该部分指定 FlowDirect = “ LeftToRight”。或者简单地为相关控件指定 FlowDirect = “ 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>
小开

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

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

带左标签的垂直堆栈面板，后跟右按钮

希望这个能帮上忙。


提交答案