Invertované seznamy

Pomocí zobrazení seznamu můžete prezentovat konverzaci v chatovém prostředí s položkami, které jsou vizuálně odlišné pro reprezentaci odesílatele nebo příjemce. Použití různých barev a vodorovného zarovnání k oddělení zpráv od odesílatele nebo příjemce pomáhá uživateli rychle se orientovat v konverzaci.

Důležitá rozhraní API: ListView – třída, ItemsStackPanel – třída, ItemsUpdatingScrollMode – vlastnost

Obvykle budete muset seznam prezentovat tak, aby se zvětšil odspodu nahoru, a ne z horního dolů. Předchozí zprávy se posunou nahoru, aby udělaly místo pro novou zprávu, která tímto přitahuje pozornost uživatele na poslední příchod. Pokud se ale uživatel posune nahoru a zobrazí předchozí odpovědi, nesmí příchod nové zprávy způsobit vizuální posun, který by narušil fokus.

Chatovací aplikace s invertovaným seznamem

Vytvoření invertovaného seznamu

Chcete-li vytvořit invertovaný seznam, použijte zobrazení seznamu s itemsStackPanel jako panel položek. Na ItemsStackPanel nastavte ItemsUpdatingScrollMode na KeepLastItemInView.

Tento příklad ukazuje, jak zarovnat položky zobrazení seznamu na dolní okraj a zajistit, aby při změně položek zůstala poslední položka stále viditelná.

XAML

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

Recommendations

  • Zarovnejte zprávy od odesílatele nebo příjemce na opačných stranách, aby byl tok konverzace uživatelům jasný.
  • Animujte stávající zprávy mimo způsob zobrazení nejnovější zprávy, pokud uživatel už na konci konverzace čeká na další zprávu.
  • Nenarušujte fokus uživatelů přesunutím položek, pokud nepřečtou konec konverzace.

Získání ukázkového kódu

  • Ukázka seznamu XAML zdola nahoru