반전된 목록

리스트 뷰를 사용하여 발신자/수신자를 나타내는 시각적으로 고유한 항목을 사용하여 채팅 경험에서 대화를 표시할 수 있습니다. 다른 색과 가로 맞춤을 사용하여 보낸 사람/수신자와 메시지를 구분하면 사용자가 보다 쉽게 대화에서 빠르게 방향을 지정할 수 있습니다.

중요 API: ListView 클래스, ItemsStackPanel 클래스, ItemsUpdatingScrollMode 속성

통상 위에서 아래로가 아니라 아래쪽에서 위로 증가하는 것처럼 보이도록 목록을 표시해야 합니다. 새 메시지가 도착하여 끝에 추가되면, 사용자가 최신 도착 메시지에 관심을 둘 수 있게 이전 메시지가 위로 올라가 공간이 생깁니다. 그러나 사용자가 이전에 도착한 메시지를 보기 위해 위로 스크롤한 경우, 새 메시지가 도착해 포커스가 중단되는 시각적 전환이 발생해서는 안됩니다.

반전된 목록 만들기

반전된 목록을 만들려면 ItemsStackPanel 이 있는 리스트 뷰를 해당 항목 패널로 사용합니다. ItemsStackPanel에서 ItemsUpdatingScrollMode 를 KeepLastItemInView로 설정합니다.

Important

Windows 10 버전 1607을 시작으로 KeepLastItemInView 열거형 값을 사용할 수 있습니다. 앱이 이전 버전의 Windows 10에서 실행되는 경우에는 이 값을 사용할 수 없습니다.

이 예제에서는 리스트 뷰의 항목을 아래쪽에 정렬하고 항목이 변경되면 마지막 항목은 뷰에 남아있어야 한다는 것을 나타내는 방법을 보여 줍니다.

XAML

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

권장 사항

• 발신자/수신자의 메시지를 서로 반대쪽에 정렬하여 대화 흐름을 사용자에게 명확하게 표시합니다.
• 사용자가 대화를 마쳐서 이미 다음 메시지를 기다리고 있는 경우, 기존 메시지에 애니메이션 효과를 주어 최신 메시지를 표시합니다.
• 대화 마지막 부분까지 아직 읽지 않는 경우, 항목을 이동하여 사용자의 포커스를 방해하지 마세요.

샘플 코드 가져오기

• XAML 상향식 목록 샘플