在堆叠面板中对齐项目?


148

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

我尝试了以下操作,但没有成功:

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

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

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


您明确提到没有网格,但这正是我完成此任务的方式。我很想看看别人是否对您的问题有一个符合我自己需求的非网格答案。
JMD 2010年

是的,我只是以这种方式给了我一个充满堆叠面板的项目,这就是他希望对其进行修复的方式。
Shimmy Weitzhandler,2010年

3
我知道这(很晚)了,但是您能不能将扩展坞放置在堆叠面板中?
肯(Kian)2012年

1
@Kian,您的意见绝对正确,我自己想到了,尝试了一下,效果很好。
Gabrielius

Answers:


221

您可以使用以下方法实现此目的DockPanel

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

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

更新资料

如注释中所指出的,您还可以使用的FlowDirection属性StackPanel。参见@D_Bester的答案


1
这就是我对“等”的意思。我想答案是否定的,将不得不采取艰难的方式,请阅读上面我对JMD的评论
Shimmy Weitzhandler,2010年

好吧,StackPanel根本无法做您想要的布局。网格将为您提供最大的灵活性,但是从StackPanel更改为DockPanel似乎并不困难。
Dirk Vollmar,2010年

2
Windows 8中没有DockPanel,还有其他解决方案吗?
Christoph

@DirkVollmar实际上StackPanel效果很好,请参阅我的答案。
D_Bester

1
如果要让项目最右对齐,则设置LastChildFill="False"<DockPanel LastChildFill="False">,请参见stackoverflow.com/a/9599290/4573839
yu yang Jian

68

呦可以设置FlowDirectionStack panelRightToLeft,然后所有项目将对准右侧。


3
但是请注意,这会更改(反转)StackPanel中控件的顺序。
rumblefx0 2014年

1
@slattery如果FlowDirection有问题,只需将其放在另一个StackPanel中并指定FlowDirection。看我的答案。
D_Bester

1
@ rumblefx0:请注意,如果控件停靠在右侧或底部,则DockPanel也会颠倒控件的顺序。这是因为第一个控件首先停靠。
奥利维尔·雅各布·德斯科姆斯

29

对于那些在这个问题谁绊倒,这里是如何做到这一点的布局Grid

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

创造

Server:                                                                   http://127.0.0.1

18

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

我认为这是比弄乱嵌套的流向更干净的解决方案
Ross

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>

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

0

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

relativepanel.alignrightwithpanel =“ true”

对于包含的元素。


0

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

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

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

我希望这有帮助。


-8

如果您需要避免对大小值进行硬编码,则可能不是您想要的,但是有时我为此使用“垫片”(分隔符):

<Separator Width="42"></Separator>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.