Kolekce a seznamy

Kolekce i seznamy odkazují na reprezentaci více souvisejících datových položek, které se zobrazují společně. Kolekce lze reprezentovat několika způsoby různými ovládacími prvky kolekce (může se také označovat jako zobrazení kolekce). Ovládací prvky kolekce zobrazují a umožňují interakce s obsahem založeným na kolekci, jako je seznam kontaktů, seznam kalendářních dat, kolekce obrázků atd.

Důležitá rozhraní API: ItemsView, ListView – třída, GridView – třída, FlipView – třída, Třída TreeView, ItemsRepeater – třída

Mezi ovládací prvky popsané v tomto článku patří:

Řízení	Primární použití
ItemsView	zobrazení kolekcí pomocí flexibilního systému rozložení
ListView	zobrazení kolekcí obsahu bohatých na text
GridView	zobrazení kolekcí obsahu náročných na obrázky
FlipView	pro zobrazení sbírek obsahu s velkým množstvím obrázků, které vyžadují, aby byla najednou přesně jedna položka ve fokusu
TreeView	zobrazení kolekcí obsahu náročných na text v určité hierarchii
ItemsRepeater	jako přizpůsobitelný stavební blok pro vytvoření vlastních ovládacích prvků kolekce

Pokyny, funkce a příklady návrhu jsou uvedeny níže pro každý ovládací prvek.

Každý z těchto ovládacích prvků (s výjimkou ItemsRepeater) poskytuje integrovaný styl a interakci. Pokud ale chcete vzhled vizuálu a položek uvnitř kolekce ještě více přizpůsobit, použije se objekt DataTemplate . Podrobné informace o šablonách dat a přizpůsobení vzhledu zobrazení kolekce najdete na stránce Kontejnery položek a šablony .

Každý z těchto ovládacích prvků (s výjimkou ItemsRepeater) má také integrované chování, které umožňuje výběr jedné nebo více položek. Další informace najdete v přehledu režimů výběru .

Zobrazení položek

Zobrazení položek můžete použít k zobrazení datových položek náročných na text nebo obrázek v různých flexibilních rozloženích, která se dají za běhu prohodit.

Je to správná kontrola?

Zobrazení položek umožňuje:

• Umožňuje zobrazit kolekci, která se primárně skládá z textových položek, kde by všechny položky měly mít stejné chování vizuálu a interakce.
• Zobrazí kolekci obsahu, ve které je ústředním bodem každé položky obrázek a každá položka by měla mít stejné chování vizuálu a interakce.
• Zobrazení knihoven obsahu
• Přizpůsobte různé případy použití, včetně následujících běžných případů:
  • Vytvořte seznam kontaktů.
  • Uživatelské rozhraní typu Storefront (tj. procházení aplikací, skladeb, produktů)
  • Interaktivní knihovny fotek

Examples

Tady je zobrazení položek, které zobrazuje kolekci fotek v jednotném rozložení mřížky.

Jedná se o stejnou kolekci zobrazenou v 'stack layout'. Fokus je na textu, ne na fotce.

Související články

Téma	Description
Zobrazení položek	Přečtěte si základní informace o používání zobrazení položek v aplikaci.
kontejnery položek a šablony	Položky, které zobrazíte v seznamu nebo mřížce, můžou hrát hlavní roli v celkovém vzhledu aplikace. Díky přizpůsobení vzhledu položek kolekce úpravou šablon ovládacích prvků a šablon dat můžete aplikaci skvěle vypadat.

Zobrazení seznamu

Zobrazení seznamu představují položky s velkým množstvím textu, obvykle v jednom sloupci ve svislém stohu. Umožňují kategorizovat položky a přiřazovat záhlaví skupin, přetahovat položky, kurátorovat obsah a měnit pořadí položek.

Je to správná kontrola?

Zobrazení seznamu umožňuje:

• Umožňuje zobrazit kolekci, která se primárně skládá z textových položek, kde by všechny položky měly mít stejné chování vizuálu a interakce.
• Představuje jednu nebo kategorizovanou kolekci obsahu.
• Přizpůsobte různé případy použití, včetně následujících běžných případů:
  • Vytvořte seznam zpráv nebo protokolu zpráv.
  • Vytvořte seznam kontaktů.
  • Vytvořte podokno seznamu v vzoru seznam/podrobnosti. Vzor seznamu/podrobností se často používá v e-mailových aplikacích, ve kterém je v jednom podokně seznam vybraných položek, zatímco druhé podokno (podrobnosti) obsahuje podrobné zobrazení vybrané položky.

Poznámka:

Pokud potřebujete zpracovat události ukazatele pro UIElement v posuvném zobrazení (například ScrollViewer nebo ListView), musíte explicitně zakázat podporu událostí manipulace s elementem v zobrazení voláním UIElement.CancelDirectmanipulation. Pokud chcete v zobrazení znovu povolit události manipulace, zavolejte UIElement.TryStartDirectManipulation.

Examples

Tady je jednoduché zobrazení seznamu, které zobrazuje seznam kontaktů a seskupuje položky dat abecedně. Záhlaví skupiny (každé písmeno abecedy v tomto příkladu) lze také přizpůsobit tak, aby zůstalo "fixní", protože se při posouvání vždy zobrazí v horní části ListView.

Toto je ListView, který byl převrácen, aby zobrazoval záznam zpráv, přičemž nejnovější zprávy se zobrazují na spodní části. U invertovaného objektu ListView se položky zobrazí v dolní části obrazovky s integrovanou animací.

Související články

Téma	Description
Zobrazení seznamu a zobrazení mřížky	Seznamte se se základy používání zobrazení seznamu nebo zobrazení mřížky ve vaší aplikaci.
kontejnery položek a šablony	Položky, které zobrazíte v zobrazení seznamu nebo mřížky, můžou hrát významnou roli v celkovém vzhledu vaší aplikace. Díky přizpůsobení vzhledu položek kolekce úpravou šablon ovládacích prvků a šablon dat můžete aplikaci skvěle vypadat.
Šablony položek pro zobrazení seznamu	Pomocí těchto ukázkových šablon položek pro ListView získáte vzhled běžných typů aplikací.
Invertované seznamy	Invertované seznamy mají nové položky přidané v dolní části, například v chatovací aplikaci. Postupujte podle pokynů v tomto článku a použijte invertovaný seznam ve vaší aplikaci.
Aktualizace na vyžádání	Mechanismus pull-to-refresh umožňuje uživateli stáhnout si seznam dat pomocí dotykového ovládání, aby mohl načíst další data. Článek popisuje, jak implementovat funkci aktualizace tažením v zobrazení seznamu.
Vnořené uživatelské rozhraní	Vnořené uživatelské rozhraní je uživatelské rozhraní, které zpřístupňuje ovládací prvky s možností akce uzavřené uvnitř kontejneru, se kterým může uživatel také provádět akce. Můžete mít například položku zobrazení seznamu, která obsahuje tlačítko, a uživatel může vybrat položku seznamu nebo stisknout tlačítko vnořené do něj. Postupujte podle těchto osvědčených postupů a poskytněte uživatelům nejlepší prostředí vnořeného uživatelského rozhraní.

Zobrazení mřížky

Zobrazení mřížky jsou vhodná pro uspořádání a procházení kolekcí obsahu založených na obrázcích. Rozložení zobrazení mřížky se posouvá svisle a přesouvá se vodorovně. Položky jsou v zalomeném uspořádání, jak se zobrazují zleva doprava a poté shora dolů.

Je to správná kontrola?

Pomocí zobrazení mřížky můžete:

• Zobrazí kolekci obsahu, ve které je ústředním bodem každé položky obrázek a každá položka by měla mít stejné chování vizuálu a interakce.
• Zobrazení knihoven obsahu
• Naformátujte dvě zobrazení obsahu přidružená k sémantickému přiblížení.
• Přizpůsobte různé případy použití, včetně následujících běžných případů:
  • Uživatelské rozhraní typu Storefront (tj. procházení aplikací, skladeb, produktů)
  • Interaktivní knihovny fotek

Poznámka:

Pokud potřebujete zpracovat události ukazatele pro UIElement v posuvném zobrazení (například ScrollViewer nebo ListView), musíte explicitně zakázat podporu událostí manipulace s elementem v zobrazení voláním UIElement.CancelDirectmanipulation(). Pokud chcete v zobrazení znovu povolit události manipulace, zavolejte UIElement.TryStartDirectManipulation().

Examples

Tento příklad ukazuje typické rozložení zobrazení mřížky, v tomto případě pro procházení aplikací. Metadata položek zobrazení mřížky jsou obvykle omezena na několik řádků textu a hodnocení položek.

Zobrazení mřížky je ideální řešení pro knihovnu obsahu, která se často používá k prezentaci médií, jako jsou obrázky a videa. V knihovně obsahu uživatelé očekávají, že budou moct klepnout na položku a vyvolat akci.

Související články

Téma	Description
Zobrazení seznamu a zobrazení mřížky	Seznamte se se základy používání zobrazení seznamu nebo zobrazení mřížky ve vaší aplikaci.
kontejnery položek a šablony	Položky, které zobrazíte v zobrazení seznamu nebo mřížky, můžou hrát významnou roli v celkovém vzhledu vaší aplikace. Díky přizpůsobení vzhledu položek kolekce úpravou šablon ovládacích prvků a šablon dat můžete aplikaci skvěle vypadat.
Šablony položek pro zobrazení mřížky	Pomocí těchto ukázkových šablon položek pro ListView získáte vzhled běžných typů aplikací.
Vnořené uživatelské rozhraní	Vnořené uživatelské rozhraní je uživatelské rozhraní, které zpřístupňuje ovládací prvky s možností akce uzavřené uvnitř kontejneru, se kterým může uživatel také provádět akce. Můžete mít například položku zobrazení seznamu, která obsahuje tlačítko, a uživatel může vybrat položku seznamu nebo stisknout tlačítko vnořené do něj. Postupujte podle těchto osvědčených postupů a poskytněte uživatelům nejlepší prostředí vnořeného uživatelského rozhraní.

Překlopit zobrazení

Překlápěcí zobrazení jsou vhodná pro procházení obrazových kolekcí obsahu, konkrétně tam, kde je záměrem zobrazení jen jediného obrázku najednou. Zobrazení překlopení umožňuje uživateli přesunout nebo "překlopit" položky kolekce (svisle nebo vodorovně), přičemž každá položka se zobrazí po jedné po interakci uživatele.

Je to správná kontrola?

Zobrazení překlopení umožňuje:

• Zobrazit malou až střední kolekci (méně než 25 položek), kde se kolekce skládá z obrázků s málo nebo žádnými metadaty.
• Umožňuje zobrazit položky po jednom a umožnit koncovému uživateli překlopit položky vlastním tempem.
• Přizpůsobte různé případy použití, včetně následujících běžných případů:
  • Fotogalerie
  • Galerie produktů nebo prezentace

Examples

Následující dva příklady ukazují FlipView, který se překlápí vodorovně a svisle, každý v daném pořadí.

Související články

Téma	Description
Překlápění zobrazení	Přečtěte si základní informace o používání překlopení zobrazení v aplikaci a také o tom, jak přizpůsobit vzhled položek v zobrazení překlopení.

Stromové zobrazení

Stromová zobrazení jsou vhodná pro zobrazení textových kolekcí, které mají důležitou hierarchii, kterou je potřeba prezentovat. Položky stromového zobrazení jsou sbalitelné nebo rozbalitelné, jsou zobrazeny ve vizuální hierarchii, mohou být doplněny ikonami a lze je přetáhnout a přetáhnout mezi stromové zobrazení. Stromová zobrazení umožňují vnořování na úrovni N.

Je to správná kontrola?

Pomocí stromového zobrazení můžete:

• Zobrazí kolekci vnořených položek, jejichž kontext a význam závisí na hierarchii nebo konkrétním řetězci organizace.
• Přizpůsobte různé případy použití, včetně následujících běžných případů:
  • Prohlížeč souborů
  • Organizační diagram společnosti

Examples

Tady je příklad stromového zobrazení, které představuje file explorer a zobrazuje mnoho různých vnořených položek doplněných ikonami.

Související články

Téma	Description
Stromové zobrazení	Seznamte se se základy použití stromového zobrazení v aplikaci a zjistěte, jak přizpůsobit vzhled a interakci položek ve stromovém zobrazení.

ItemsRepeater

ItemsRepeater se liší od zbytku ovládacích prvků kolekce zobrazených na této stránce, protože neposkytuje žádný styl ani interakci, tj. když se jednoduše umístí na stránku bez definování jakýchkoli vlastností. ItemsRepeater je spíše stavební blok, který můžete jako vývojář použít k vytvoření vlastního ovládacího prvku kolekce, konkrétně jeden, který nelze dosáhnout pomocí ostatních ovládacích prvků v tomto článku. ItemsRepeater je panel řízený daty a vysoce výkonný panel, který je možné přizpůsobit tak, aby vyhovoval vašim přesným potřebám.

Návod

Ovládací prvek ItemsView je postaven na ItemsRepeater a poskytuje mnoho výhod ItemsRepeater, aniž by bylo potřeba vytvořit vlastní kolekci ovládací prvek.

Je to správná kontrola?

Použijte ItemsRepeater, pokud:

• Máte specifické uživatelské rozhraní a uživatelské prostředí, které nelze vytvořit pomocí existujících ovládacích prvků kolekce.
• Máte existující zdroj dat pro vaše položky (například data získaná z internetu, databáze nebo předem vytvořená kolekce ve vašem programovém kódu).

Examples

Následující tři příklady jsou všechny ovládací prvky ItemsRepeater vázané na stejný zdroj dat (kolekce čísel). Kolekce čísel je reprezentována třemi způsoby, přičemž každý z objektů ItemsRepeaters níže používá jiné vlastní rozložení a jiný vlastní ItemTemplate.

Související články

Téma	Description
ItemsRepeater	Seznamte se se základy používání itemsRepeater ve vaší aplikaci a zjistěte, jak implementovat všechny nezbytné interakce a vizuální komponenty pro zobrazení kolekce.

Kontrolní seznam pro globalizaci a lokalizaci

• Obtékání: Povolí dva řádky pro popisek seznamu.
• Vodorovné rozšíření: Ujistěte se, že pole můžou obsahovat rozšíření textu a že se dají posunout.
• Svislé mezery: Používejte pro svislé mezery jiné znaky než latinku, aby se zajistilo, že se skripty bez latinky správně zobrazí.

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

• Ukázka galerieWinUI 3 – podívejte se na všechny ovládací prvky XAML v interaktivním formátu.

Související články

Pokyny k návrhu a uživatelskému prostředí

• Seznam/podrobnosti
• Navigační podokno
• Sémantické přiblížení
• Přetáhněte a pusťte
• Miniatury

Referenční materiály k rozhraní API

• třída ListView
• třída GridView
• třída ComboBox
• třída ListBox