다음을 통해 공유


반전된 목록

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

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

일반적으로 위에서 아래로가 아니라 아래쪽에서 위로 증가하는 것처럼 보이도록 목록을 표시해야 합니다. 새 메시지가 도착하여 끝에 추가되면 이전 메시지들은 자동으로 위로 밀려 올라가며 사용자의 시선이 최신 도착 메시지로 집중되게 됩니다. 그러나 사용자가 이전 회신을 보기 위해 위로 스크롤한 경우 새 메시지의 도착으로 인해 포커스가 중단되는 시각적 전환이 발생해서는 안됩니다.

반전된 목록이 있는 채팅 앱

반전된 목록 만들기

반전된 목록을 만들려면 ItemsStackPanel 이 있는 목록 보기를 해당 항목 패널로 사용합니다. ItemsStackPanel에서 ItemsUpdatingScrollModeKeepLastItemInView로 설정합니다.

중요합니다

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

이 예제에서는 목록 보기의 항목을 아래쪽에 맞추는 방법을 보여 하며 항목이 변경되면 마지막 항목이 보기에 남아 있어야 함을 나타냅니다.

XAML

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

Recommendations

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

샘플 코드 가져오기