如何将列表框设置为从下到上显示并自动换行？

Question

我正在创建一个非常简单的聊天程序（主要是为了自学 WPF），我正在尝试制作一个列表框，其中的元素（代表聊天记录的字符串）从下到上显示，其中的文本列表框换行。我已经分别看到了针对这两个问题的一些解决方案，但它们似乎需要设置 ListBox.ItemsPanel，而我只能设置一次。因为我对 WPF 还是很陌生，所以我不确定如何真正让这两个东西一起工作的功能。 VirtualizingStackPanel 上是否有一个属性可以简单地设置为执行此操作？我需要创建数据模板来实现吗？

这是我的 XAML，ListBox 中的内容实际上是从底部到顶部的。

<ListBox x:Name="lbChatHistory" ItemsSource="{Binding History}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel VerticalAlignment="Bottom" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Answer 1

您需要为每个项目使用的 ListBox 指定一个 ItemTemplate。然后在该模板中需要有一个 TextBlock 其属性 TextWrapping 设置为 Wrap.

但下面要解决的真正问题是，当第一次绘制时，TextBlock 会扩展到所需的 space。但在那之后它不会调整大小。

通过绑定到可以调整大小的父项（请注意，并非所有事物都不会自动调整大小）我们可以获得这样的更改。

在设计阶段我喜欢做的一件事是为要设计样式的项目指定特定的颜色，以确定如何绘制事物。

代码

<Grid Background="DarkGreen">
    <ListBox x:Name="lbChatHistory"
             ItemsSource="{StaticResource Orders}"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             Background="DarkBlue"
             Margin="10">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel VerticalAlignment="Bottom" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding CustomerName, FallbackValue=Unknown}"
                            FontSize="14"
                            Foreground="White"
                            TextWrapping="Wrap"
                            Width="{Binding ElementName=lbChatHistory, Path=ActualWidth}"
                            VerticalAlignment="Stretch"
                            HorizontalAlignment="Stretch"
                            Background="DarkRed"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

为了这个示例的完整性，控件绑定到具有明显属性的 Orders 列表，但您的数据当然会有所不同。

<Page.Resources>
    <model:Orders x:Key="Orders">
        <model:Order CustomerName="Alpha"
                        OrderId="997"
                        InProgress="True" />
        <model:Order CustomerName="Beta"
                        OrderId="998"
                        InProgress="False" />
        <model:Order CustomerName="Omega"
                        OrderId="999"
                        InProgress="True" />
        <model:Order CustomerName="The rain in spain falls mainly"
                        OrderId="1000"
                        InProgress="False" />
    </model:Orders>
</Page.Resources>

这个答案与我给出的答案相似 ListBoxItem HorizontalContentAlignment To Stretch Across Full Width of ListBox 当您为周围的文本块着色时，您的下一个问题可能需要这个答案。

如何将列表框设置为从下到上显示并自动换行？

How can I set a ListBox to Display Bottom to Top WITH Word Wrapping?

wpf

listbox

word-wrap