Question

我有一个列表框，每个列表框项包含一个带有两个元素TextBlock和一个Label的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>

所以我期待一个窗口，其中每一行都有两个元素，首先是文本块，下一个是标签。我为标签添加了HorizonatalContentAlignment = stretch和HorizontalAlignment = Right，当用户调整窗口时，标签应该转到右端。

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

为什么第二个元素会重叠或隐藏？我想始终显示click me标签，如何实现这一目标？

Answer 1

要指出，在其他方案中，例如未知数量的元素要添加到ListBoxItem内容，例如，使用{{1}并不是那么糟糕。

示例：

DockPanel中的第一项，我想要ListBox和Text。
Secund项目，我想要Label，Text 和Label 。
等......

使用Button，除非你添加很多东西（使用ContentTemplate和Bindings甚至是后面的代码），否则它将无效。这就是Grid有用的地方。

您的方法中出现的问题是，您DockPanel之前的TextBlock 。Label。在DockPanel中，订单事项和第一项优先于secund，secund优先于第三项......如果前一项已占用所有剩余空间（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>

当像HorizontalAlignment停靠在DockPanel中时，像Label这样的一些UIElements（实际上）不需要Left/Right。在这种情况下，仅 VerticalAlignment很重要。

规则是：

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

最后，这是解释Label为何的答案   与TextBlock重叠 - 对于想要掌握a的其他读者   DockPanel中。

但是，是的，当我已经知道我将会有多少物品时   容器，我将使用网格，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>

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

enter image description here

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

2 个答案: