列表框项目中的第一个元素与第二个元素重叠

Question

我有一个列表框，每个列表框项都包含一个带有两个元素 TextBlock 和一个标签的 DockPanel。以下是 xaml 代码 -

        <ListBox HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
           <ListBoxItem>
            <DockPanel>
                <TextBlock Text="Ted its so wonderfull I am gere asdf asdf asdf adsf asdf asdf asdfasf asfd asf asdf asdf asdf asdf asdasfd asf " TextWrapping="Wrap"></TextBlock>
                <Label Content="Click Me" HorizontalAlignment="Right"></Label>
            </DockPanel>                
        </ListBoxItem>

        <ListBoxItem>
            <DockPanel>
                <TextBlock Text="Ted its so wonderfull Ted its so wonderfull I am gere asdf asdf asdf adsf asdf asdf asdfasf asfd asf asdf asdf asdf asdf asdasfd asf" TextWrapping="Wrap"></TextBlock>
                <Label Content="Click Me" HorizontalAlignment="Right"></Label>
            </DockPanel>
        </ListBoxItem>
    </ListBox>

所以我期待一个窗口，其中每行将有两个元素，第一个列是文本块，下一个是标签。我为标签添加了 Horizo​​natalContentAlignment=stretch 和 Horizo​​ntalAlignment=Right，当用户调整窗口大小时，标签应该移到右端。

但是我在上面的代码中面临的问题是，当我调整窗口大小并且文本块开始换行时，Textblock 隐藏/重叠了 Label 元素。在某些情况下，当文本块中的单词与窗口的右端完全对齐时，标签会完全隐藏，还是部分隐藏？

为什么第二个元素会重叠或隐藏？我想始终显示点击我的标签，如何实现？

Answer 1

只是要指出，在其他场景中，例如 unknown number of Elements 要添加到 ListBoxItem 内容中，例如，使用 DockPanel 并非如此不好。

例子：

• ListBox 中的第一项，我想要一个Text 和一个Label。
• 第二个项目，我想要一个Text、一个Label和一个Button。
• 等等……

使用Grid，除非您添加很多东西（使用 ContentTemplate 和 Bindings 甚至是代码隐藏），否则它将无法工作，而这正是 DockPanel 有用的地方。

你的方法有什么问题是你把TextBlock 之前 Label。在 DockPanel 中，顺序很重要，第一项优先于第二项，第二项优先于第三项……如果前一项占用了所有剩余空间（您的 TextBlock 使用其很长的Text 值进行了处理），那么任何其他以下项目不会按预期绘制。

别忘了指定Docking 模式。

所以，为了澄清起见，在这里使用 DockPanel 并没有错，但物品顺序很重要。

<ListBox HorizontalContentAlignment="Stretch" 
    ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBoxItem>
        <DockPanel>
            <!-- Declare your Label first and dock it to the right -->
            <Label 
                DockPanel.Dock="Right" />
            <TextBlock 
                Text="Ted its so wonderfull I am gere asdf asdf asdf adsf asdf asdf asdfasf asfd asf asdf asdf asdf asdf asdasfd asf " TextWrapping="Wrap" />
        </DockPanel>                
    </ListBoxItem>

    <!-- ... -->

</ListBox>

某些 UIElement（如 Label）在停靠在 DockPanel 中时（实际上）不需要 HorizontalAlignment。在这种情况下，只有VerticalAlignment 很重要。

规则是：

• 请记住，DockPanel 会为每个项目分配一个矩形区域。
• 项目按顺序获取分配的区域。
• DockPanel 默认停靠在左侧。
• DockPanel 可以更好地处理占用一小块区域的项目列表，这些项目先声明并相应停靠，然后是可变大小的最后一个项目以填充剩余空间如果有的话。
• 当可用区域不够宽时，DockPanel 将始终尝试至少显示每个项目的一小部分（因此，当您希望项目保持完全可见时，请小心添加约束，例如将 DockPanel 放在里面 网格列或行 ;) )

最后，这是一个解释标签为什么是的答案 与 TextBlock 重叠 – 供其他想要掌握 停靠面板。

但是，是的，当我已经知道我将拥有多少物品时 容器，我会使用 Grid，99% 的时间，因为我可以绑定 Row 和列大小直接，而使用 DockPanel、StackPanel 等，我 必须一一引用每个包含的项目。

我同意接受的答案:)

Answer 2

您可以使用网格。第一列使用所有可用空间，第二列为“点击”标签保留空间。

        <ListBoxItem>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="Ted its so wonderfull I am gere asdf asdf asdf adsf asdf asdf asdfasf asfd asf asdf asdf asdf asdf asdasfd asf " TextWrapping="Wrap"></TextBlock>
                <Label Grid.Column="1" Content="Click Me" HorizontalAlignment="Right"></Label>
            </Grid>
        </ListBoxItem>

下图显示了网格与停靠方法的比较。