反転リスト

リスト ビューを使用すると、送信者/受信者を表すために視覚的に異なるアイテムを使用してチャット エクスペリエンスで会話を表示できます。 異なる色と水平方向の配置を使用して、メッセージを送信者/受信者から分離すると、ユーザーは会話の方向をすばやく調整できます。

重要な API: ListView クラス、 ItemsStackPanel クラス、 ItemsUpdatingScrollMode プロパティ

通常は、一覧を表示して、上から下ではなく下から上に拡大するようにする必要があります。 新しいメッセージが到着し、最後に追加されると、前のメッセージがスライドアップして、最新の到着にユーザーの注意を引くスペースを作ります。 ただし、ユーザーが上にスクロールして以前の返信を表示した場合、新しいメッセージが到着しても、フォーカスを中断する視覚的なシフトが発生しないようにする必要があります。

反転リストを作成する

反転リストを作成するには、 ItemsStackPanel を項目パネルとして含むリスト ビューを使用します。 ItemsStackPanel で、 ItemsUpdatingScrollMode を KeepLastItemInView に設定します。

Important

KeepLastItemInView 列挙値は、Windows 10 バージョン 1607 以降で使用できます。 アプリが以前のバージョンの Windows 10 で実行されている場合は、この値を使用できません。

次の使用例は、リスト ビューの項目を下部に配置し、項目に変更がある場合に最後の項目を表示したままにする方法を示します。

XAML

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

推奨事項

• 送信者/受信者からのメッセージを反対側に配置して、会話の流れをユーザーに明確にします。
• ユーザーが次のメッセージを待っている会話の最後にすでにいる場合は、最新のメッセージを表示するために、既存のメッセージをアニメーションで移動させます。
• 会話の最後を読んでいなければ、アイテムを移動してユーザーのフォーカスを中断しないでください。

サンプル コードを取得する

• XAML ボトムアップ リストのサンプル