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

  • Статья

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

Важные 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>

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

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

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