165

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

我尝试了以下但没有奏效：

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

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

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

4

9 回答 9

246

您可以通过以下方式实现DockPanel：

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

不同之处在于 aStackPanel将子元素排列成单行（垂直或水平），而 aDockPanel定义了一个区域，您可以在该区域中相对于彼此水平或垂直排列子元素（该Dock属性更改元素相对于其他元素的位置同一容器内的元素。对齐属性，例如HorizontalAlignment，改变元素相对于其父元素的位置）。

更新

正如评论中所指出的，您还可以使用FlowDirectiona 的属性StackPanel。请参阅@D_Bester 的回答。

于 2010-01-07T20:15:15.953 回答
75

哟可以设置FlowDirection到Stack panel，RightToLeft然后所有项目都将对齐到右侧。

于 2012-06-23T17:38:12.337 回答
35

对于那些偶然发现这个问题的人，这里是如何使用以下方法实现此布局Grid：

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

创建

Server:                                                                   http://127.0.0.1
于 2013-09-13T21:40:06.217 回答
20

无法按照我想要的方式使用 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 内部的控件与可用空间的右侧对齐，而不管控件的数量是多少 - 在设计和运行时都是如此。耶！:)

于 2017-01-05T08:12:46.160 回答
7

这对我来说非常有效。只需将按钮放在第一位，因为您从右侧开始。如果 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>
于 2017-10-20T15:51:09.713 回答
5 
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Left"  />
    <Button Width="30" Grid.Column="1" >Right</Button>
</Grid>
于 2014-12-31T14:00:32.660 回答
1

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

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

带有左标签和右按钮的垂直 StackPanel

我希望这有帮助。

于 2018-08-21T17:10:04.070 回答
0

对于 Windows 10，使用 relativePanel 而不是堆栈面板，并使用

relativepanel.alignrightwithpanel="true"

对于包含的元素。

于 2016-12-17T13:31:59.883 回答
-8

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

<Separator Width="42"></Separator>
于 2012-09-12T22:49:24.217 回答