【问题标题】:WPF Dockpanel won't align rightWPF Dockpanel 不会正确对齐
【发布时间】: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 拉伸

标签: wpf dockpanel


【解决方案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="拉伸"

    在您的按钮上。

    【讨论】:

      猜你喜欢
      • 2016-04-04
      • 2013-07-10
      • 1970-01-01
      • 2013-07-08
      • 1970-01-01
      • 2018-10-09
      • 2014-01-04
      • 1970-01-01
      • 2018-04-14
      相关资源
      最近更新 更多