Инвертированные списки

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

Важные API: класс ListView, класс ItemsStackPanel, свойство ItemsUpdatingScrollMode

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

Создание инвертированного списка

Чтобы создать инвертированный список, используйте представление списка с ItemsStackPanel в качестве панели элементов. В ItemsStackPanel задайте для ItemsUpdatingScrollMode значение KeepLastItemInView.

В этом примере показано, как выровнять элементы представления списка в нижней части и указать, что при изменении элементов последний элемент должен оставаться в представлении.

XAML

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

Recommendations

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

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

• Пример нижнего вверх списка XAML