对齐堆栈面板中的项目?
我想知道是否可以在水平方向的 StackPanel 中拥有 2 个控件,以便正确的项目应该停靠在 StackPanel 的右侧。
我尝试了以下方法,但没有成功:
<StackPanel Orientation="Horizontal">
<TextBlock>Left</TextBlock>
<Button Width="30" HorizontalAlignment="Right">Right<Button>
</StackPanel>
在上面的代码片段中,我希望将按钮停靠在 StackPanel 的右侧。
注意:我需要用 StackPanel 来完成,而不是 Grid 等。
I was wondering if I can have 2 controls in a horizontal-oriented StackPanel so that the right item should be docked to the right side of the StackPanel.
I tried the following but it didn't work:
<StackPanel Orientation="Horizontal">
<TextBlock>Left</TextBlock>
<Button Width="30" HorizontalAlignment="Right">Right<Button>
</StackPanel>
In the snippet above I want the Button to be docked to the right side of the StackPanel.
Note: I need it to be done with StackPanel, not Grid etc.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(9)
您可以使用
DockPanel
来实现此目的:不同之处在于
StackPanel
会将子元素排列成单行(垂直或水平),而DockPanel
定义一个区域,您可以在其中水平或垂直排列子元素,相对于彼此 (Dock
属性更改元素相对于同一容器内其他元素的位置。对齐属性,例如HorizontalAlignment
,更改元素相对于其元素的位置父元素)。更新
正如评论中所指出的,您还可以使用
StackPanel
的FlowDirection
属性。请参阅 @D_Bester 的答案。You can achieve this with a
DockPanel
:The difference is that a
StackPanel
will arrange child elements into single line (either vertical or horizontally) whereas aDockPanel
defines an area where you can arrange child elements either horizontally or vertically, relative to each other (theDock
property changes the position of an element relative to other elements within the same container. Alignment properties, such asHorizontalAlignment
, change the position of an element relative to its parent element).Update
As pointed out in the comments you can also use the
FlowDirection
property of aStackPanel
. See @D_Bester's answer.您可以将
Stack panel
的FlowDirection
设置为RightToLeft
,然后所有项目将向右对齐。Yo can set
FlowDirection
ofStack panel
toRightToLeft
, and then all items will be aligned to the right side.如何使用
Grid
实现此布局的方法:对于那些偶然发现这个问题的人,以下是
For those who stumble upon this question, here's how to achieve this layout with a
Grid
:creates
无法按照我想要的方式使用 DockPanel 来完成此工作,并且反转 StackPanel 的流向很麻烦。使用网格不是一个选项,因为网格内部的项目可能在运行时隐藏,因此我不知道设计时的总列数。我能想到的最好、最简单的解决方案是:
这将导致 StackPanel 内部的控件与可用空间的右侧对齐,无论控件的数量如何 - 无论是在设计还是运行时。耶! :)
Could not get this working using a DockPanel quite the way I wanted and reversing the flow direction of a StackPanel is troublesome. Using a grid is not an option as items inside of it may be hidden at runtime and thus I do not know the total number of columns at design time. The best and simplest solution I could come up with is:
This will result in controls inside of the StackPanel being aligned to the right side of the available space regardless of the number of controls - both at design and runtime. Yay! :)
这对我来说非常有效。因为您从右侧开始,所以只需将按钮放在前面即可。如果 FlowDirection 成为问题,只需在其周围添加一个 StackPanel 并为该部分指定 FlowDirection="LeftToRight" 即可。或者简单地为相关控件指定 FlowDirection="LeftToRight"。
This works perfectly for me. Just put the button first since you're starting on the right. If FlowDirection becomes a problem just add a StackPanel around it and specify FlowDirection="LeftToRight" for that portion. Or simply specify FlowDirection="LeftToRight" for the relevant control.
如果您遇到像我一样的问题,即标签在垂直堆栈面板中居中,请确保使用全宽控件。删除 Width 属性,或将按钮放入允许内部对齐的全宽容器中。 WPF 就是使用容器来控制布局。
带有左标签和右按钮的垂直 StackPanel
我希望这会有所帮助。
If you are having a problem like the one I had where labels were centered in my vertical stack panel, make sure you use full width controls. Delete the Width property, or put your button in a full-width container that allows internal alignment. WPF is all about using containers to control the layout.
Vertical StackPanel with Left Label followed by Right Button
I hope this helps.
对于 Windows 10
使用relativePanel代替stack面板,并使用
对于包含的元素。
for windows 10
use relativePanel instead of stack panel, and use
for the contained elements.
如果您需要避免硬编码大小值,也许不是您想要的,但有时我为此使用“垫片”(分隔符):
Maybe not what you want if you need to avoid hard-coding size values, but sometimes I use a "shim" (Separator) for this: