使用 XAML 的 UWP 自下而上聊天 ListView答案

【问题标题】：UWP Bottom-Up Chat ListView with XAML使用 XAML 的 UWP 自下而上聊天 ListView
【发布时间】：2017-03-13 21:43:15
【问题描述】：

所以，我正在制作一个 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>

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

【问题讨论】：

在这里查看ChatListView。我认为它完全符合您的需要。
你想实现拉取加载以前的消息还是只是反转列表？
这是关于发送、向列表添加消息和滚动刷新等的 c# 代码。我只是想找出是否可以简单地反转列表视图。拉动刷新是我以后可以考虑的事情。谢谢:)
您可以反转您绑定到 ListView 的列表吗？你想让我发布那个代码吗？
我可以这样做，但我的问题是我做错了什么。微软在 XAML 中内置了反转它的能力，但就我而言，我真的不知道该怎么做。有没有办法在 XAML 中做到这一点而根本不使用列表？再次感谢您的宝贵时间！

标签： xaml listview chat datatemplate uwp-xaml

【解决方案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;
        }

【讨论】：