倒排列表

可以使用列表视图在聊天体验中展示对话,其中的项目在视觉上有明显区别,以代表发送方和接收方。 使用不同的颜色和水平对齐方式将消息与发送方/接收方分开,可帮助用户在对话中快速定位自己。

重要 APIListView 类ItemsStackPanel 类ItemsUpdatingScrollMode 属性

通常需要显示列表,以便它似乎从底部向上增长,而不是从上到下。 当新消息到达并置于消息末尾时,之前的消息会向上滑动,以便用户可以注意到最新的消息。 但是,如果用户已向上滚动以查看以前的答复,则新邮件的到来不能导致视觉转移,这会中断其焦点。

带倒排列表的聊天应用

创建倒排列表

若要创建倒排列表,请使用 包含 ItemsStackPanel 的列表视图作为其项面板。 在 ItemsStackPanel 上,将 ItemsUpdatingScrollMode 设置为 KeepLastItemInView

重要

KeepLastItemInView 枚举值从 Windows 10 版本 1607 开始可用。 当应用在早期版本的 Windows 10 上运行时,不能使用此值。

本示例演示如何将列表视图的项与底部对齐,并指示当对最后一个项目进行更改时,最后一项应保留在视图中。

XAML

<ListView>
   <ListView.ItemsPanel>
       <ItemsPanelTemplate>
           <ItemsStackPanel VerticalAlignment="Bottom"
                            ItemsUpdatingScrollMode="KeepLastItemInView"/>
       </ItemsPanelTemplate>
   </ListView.ItemsPanel>
</ListView>

Recommendations

  • 使来自对方发送方/接收方的消息保持一致,使聊天流对用户清晰。
  • 如果用户已在等待下一条消息的会话末尾,则对现有消息进行动画处理,以显示最新消息。
  • 如果用户未阅读对话结束内容,请不要通过移动元素来干扰用户的注意力。

获取示例代码