WPF Dockpanel 不会正确对齐

Posted 2023-02-23

【中文标题】WPF Dockpanel 不会正确对齐

【英文标题】：WPF Dockpanel won't align right

【发布时间】：2013-03-08 07:51:41

【问题描述】：

我有这段代码，我在 Button.Content 上使用了 DockPanel。但是它不允许我右对齐最后一张图片（小箭头）。

<Button Height="70"
                    HorizontalContentAlignment="Left">
              <Button.Content>
                <DockPanel LastChildFill="False">
                  <Image DockPanel.Dock="Left"
                    Height="50"
                         Width="50"
                         Source="StaticResource Placeholder"
                         Stretch="UniformToFill"
                         Margin="5" />
                  <TextBlock DockPanel.Dock="Left"
                             Text="Dummy text"
                             VerticalAlignment="Center"
                             Margin="5" />
                  <Image DockPanel.Dock="Right"
                         Height="24"
                         Width="24"
                         Source="StaticResource Right_Arrow_24"
                         VerticalAlignment="Center"
                         HorizontalAlignment="Right"
                         Stretch="UniformToFill"
                         Margin="5" />
                </DockPanel>
              </Button.Content>
            </Button>

它现在给了我这个：

所以右边的小箭头应该放在按钮的右边，而不是放在TextBlock之后。 我发现了一些类似的问题，看起来我做对了，但不知何故不是..

我在这里做错了什么？

【问题讨论】：

使 Horizo​​ntalContentAlignment 拉伸

【参考方案1】：

尝试将按钮的HorizontalContentAlignment 设置为“Stretch”。否则，您的 DockPanel 将使用其内容所需的大小，然后左对齐。您可以通过为您的TextBlocks 使用不同的文本长度来确认此行为

【参考方案2】：

您只需在没有 DockPanel.Dock 属性的情况下将一个额外的子项附加到 DockPanel（例如一个空的 Canvas），以便将所有剩余空间分配给它。 一般来说，DockPanel 只有在其最后一个子节点没有 Dock 约束时才能正常工作

【讨论】：

虽然这行得通，但对我来说似乎更像是一种黑客行为。添加额外的 UI 元素，只是为了获得您想要的布局。这对我来说感觉不对。不过我投了赞成票，因为它解决了问题，并显示了内在的 XAML 行为。

@MikedeKlerk：是的，一开始我也觉得很奇怪，但如果你认为额外的 Canvas 作为 DockPanel 中未使用（因此仍然可用）房间的占位符，听起来会好一些。

如果您的父元素没有HorizontalContentAlignmentproperty，这也是解决方案

添加额外的 UI 元素有一个简单的替代方法：将 DockPanel LastChildFill 属性设置为 False

【参考方案3】：

尝试设置

Horizo​​ntalContentAlignment="拉伸"

在您的按钮上。