对齐堆栈面板中的项目?

发布于 2024-08-17 06:52:16 字数 393 浏览 11 评论 0原文

我想知道是否可以在水平方向的 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(9

遗忘曾经 2024-08-24 06:52:16

您可以使用 DockPanel 来实现此目的:

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

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

更新

正如评论中所指出的,您还可以使用 StackPanelFlowDirection 属性。请参阅 @D_Bester 的答案

You can achieve this with a DockPanel:

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

The difference is that a StackPanel will arrange child elements into single line (either vertical or horizontally) whereas a DockPanel defines an area where you can arrange child elements either horizontally or vertically, relative to each other (the Dock property changes the position of an element relative to other elements within the same container. Alignment properties, such as HorizontalAlignment, 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 a StackPanel. See @D_Bester's answer.

锦欢 2024-08-24 06:52:16

您可以将Stack panelFlowDirection设置为RightToLeft,然后所有项目将向右对齐。

Yo can set FlowDirection of Stack panel to RightToLeft, and then all items will be aligned to the right side.

感情洁癖 2024-08-24 06:52:16

如何使用 Grid 实现此布局的方法:

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

对于那些偶然发现这个问题的人,以下是

Server:                                                                   http://127.0.0.1

For those who stumble upon this question, here's how to achieve this layout with a Grid:

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

creates

Server:                                                                   http://127.0.0.1
一身软味 2024-08-24 06:52:16

无法按照我想要的方式使用 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 内部的控件与可用空间的右侧对齐,无论控件的数量如何 - 无论是在设计还是运行时。耶! :)

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:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="1" Orientation="Horizontal">
        <!-- Right aligned controls go here -->
    </StackPanel>
</Grid>

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! :)

栀梦 2024-08-24 06:52:16

这对我来说非常有效。因为您从右侧开始,所以只需将按钮放在前面即可。如果 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>

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.

<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>
暮年 2024-08-24 06:52:16
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Left"  />
    <Button Width="30" Grid.Column="1" >Right</Button>
</Grid>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Left"  />
    <Button Width="30" Grid.Column="1" >Right</Button>
</Grid>
安静被遗忘 2024-08-24 06:52:16

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

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

带有左标签和右按钮的垂直 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.

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

Vertical StackPanel with Left Label followed by Right Button

I hope this helps.

一袭白衣梦中忆 2024-08-24 06:52:16

对于 Windows 10
使用relativePanel代替stack面板,并使用

relativepanel.alignrightwithpanel="true"

对于包含的元素。

for windows 10
use relativePanel instead of stack panel, and use

relativepanel.alignrightwithpanel="true"

for the contained elements.

深者入戏 2024-08-24 06:52:16

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

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

Maybe not what you want if you need to avoid hard-coding size values, but sometimes I use a "shim" (Separator) for this:

<Separator Width="42"></Separator>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文