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

哟可以设置FlowDirectionStack panelRightToLeft然后所有项目都将对齐到右侧。

于 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 回答