XAML 的 UWP 自下而上聊天列表视图

Question

因此，我正在制作一个 UWP 应用程序，您可以将其视为聊天客户端。所以这里的问题是如何使我的 XAML 中的列表视图自下而上而不是自上而下。换句话说， listview 的项目必须从底部到顶部而不是像现在这样从上到下添加。我已经完成了我所知道的一切，并且我遵循了互联网上的许多说明，包括微软的文档，但我无法让它工作。我需要注意代码运行并且没有给出任何错误，但列表是从上到下而不是相反。

这是我的 XAML 中的可能 PageResource:

   <DataTemplate x:Key="MessageListDataTemplate" x:DataType="disc:IMessage">
        <Border Background="#2C2F33" CornerRadius="5">
            <StackPanel Margin="5">
                <StackPanel Orientation="Horizontal" Margin="5,2,0,0">
                    <TextBlock TextAlignment="Left" Text="{x:Bind Author,Mode=OneWay}" Foreground="White" FontSize="14"/>
                    <TextBlock TextAlignment="Left" Margin="5,3,0,0" Text="{x:Bind Timestamp,Mode=OneWay,Converter={StaticResource TimeToStringConverter}}" Foreground="LightGray" FontSize="10"/>
                </StackPanel>
                <TextBlock TextAlignment="Left" Margin="10,2,0,0" TextWrapping="WrapWholeWords" Text="{x:Bind Content, Mode=OneWay}" Foreground="#99AAB5" FontSize="20" />
            </StackPanel>
        </Border>
    </DataTemplate>

这是我的 ListView:

                    <ListView VerticalContentAlignment="Bottom" ItemsSource="{x:Bind ChatViewModel.MessageList, Mode=OneWay}" SelectionMode="None" ItemTemplate="{StaticResource MessageListDataTemplate}">
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                                <Setter Property="Margin" Value="0,0,5,5"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                    </ListView>

如果您需要澄清等，请先发表评论。谢谢:)

Answer 1

基本上，我找到的解决问题的方法就是简单地放置在我的 ObservableCollection 后面。从服务器接收集合的方式与我打算使用的方式相反。换句话说，接收到的集合在索引 0 处有最新消息，在索引 n 处有第一条消息（取决于您加载的消息数）。我观察到，当我使用 .add() 在该集合上添加一条消息时，它会将它添加到它的末尾，因此 n+1。所以它似乎不是自下而上的主要原因是集合被颠倒了。添加的新消息现在应该位于底部。感谢大家的帮助！

我用什么来逆转它：

        for (int i=0; i < messageList.Count/2; i++)
        {
            IMessage temp = messageList[i];
            messageList[i] = messageList[messageList.Count - i - 1];
            messageList[messageList.Count - i - 1]= temp;
        }

XAML 的 UWP 自下而上聊天列表视图

UWP Bottom-Up Chat ListView with XAML

xaml

listview

chat

datatemplate

uwp-xaml