Question

我正在创建一个非常简单的聊天程序（主要是为了自学WPF），我试图创建一个ListBox，其中元素（代表聊天记录的字符串）从下到上显示列表框内的文本换行。我已经分别看到了这两个问题的一些解决方案，但它们似乎需要设置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

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

但实际上，下面解决的问题是，遇到的情况是，首次绘制时TextBlock会扩展到所需的空间。但之后它不会调整大小。

通过绑定到可以调整大小的父级（注意并非所有内容都不会自动调整大小），我们可以进行这样的更改。

在设计阶段，我喜欢做的一件事是将项目设置为特定颜色，以确定绘制的方式。

<强>代码

<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，在您为下一个问题着色时可能需要这个答案。

如何设置ListBox以使用Word Wrapping从下到上显示？

1 个答案: