Поделиться через

Перевернутые списки

  • Статья

Вы можете использовать представление списка для представления беседы в чате с элементами, которые визуально отличаются для представления отправителя или получателя. Использование различных цветов и горизонтального выравнивания для разделения сообщений от отправителя или получателя помогает пользователю быстро ориентироваться в беседе.

Важные API: класс ListView, класс 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>

Рекомендации

  • Выравнивайте сообщения от отправителя или получателя на противоположных сторонах, чтобы сделать поток беседы понятным для пользователей.
  • Анимируйте существующие сообщения из способа отображения последнего сообщения, если пользователь уже находится в конце беседы, ожидая следующего сообщения.
  • Не нарушайте фокус пользователей, перемещая элементы, если они не читают конец беседы.

Получение кода примера