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 náročných na text
GridView	zobrazení kolekcí obsahu náročných na obrázky
FlipView (Převrátit)	zobrazení kolekcí obsahu s velkými nároky na obrázky, které vyžadují, aby byla najednou přesně jedna položka v fokusu
Pohled na strom	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 .

Jedním ze scénářů, které nejsou popsané v tomto článku, je zobrazení kolekcí v tabulce nebo ve více sloupcích. Pokud chcete zobrazit kolekci v tomto formátu, zvažte použití ovládacího prvku DataGrid ze sady nástrojů Windows Community Toolkit.

Examples

Galerie WinUI 2
	Pokud máte nainstalovanou aplikaci Galerie WinUI 2, podívejte se v akci na ListView, GridView, FlipView, TreeView a ItemsRepeater. Stáhněte si aplikaci WinUI 2 Gallery (Microsoft Store) Získejte zdrojový kód (GitHub)

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řichytáte 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 rozložení zásobníku. 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 náročné na text, obvykle v rozložení s jedním sloupcem ve svislém skládaném rozložení. 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řichytáte 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) je také možné přizpůsobit tak, aby zůstaly "rychlé", protože se při posouvání vždy zobrazí v horní části listview.

Toto je ListView, který byl invertován k zobrazení protokolu zpráv s nejnovějšími zprávami, které se zobrazují v dolní čá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. Tento článek slouží k implementaci aktualizace pull-to-refresh 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 posune svisle a vodorovně posune. Položky jsou v zabalené rozložení, jak se zobrazují v levém to pravém a pak v pořadí čtení 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řichytáte 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í

Zobrazení překlopení jsou vhodná pro procházení kolekcí obsahu založených na obrázku, konkrétně tam, kde je požadované prostředí určené jenom pro zobrazení jednoho 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:

• Umožňuje zobrazit malou až střední kolekci (méně než 25 položek), kde se kolekce skládá z obrázků s malými až 2 metadaty.
• Umožňuje zobrazit položky po jednom a umožnit koncovému uživateli překlopit položky vlastním tempem.
• Přichytáte 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ý překlopí vodorovně a svisle, v uvedené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řichytáte 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 průzkumníka souborů 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

ItemsView ovládací prvek je postaven na ItemsRepeater a poskytuje mnoho výhod ItemsRepeater bez nutnosti vytvořit vlastní kolekci ovládací prvek.

Je to správná kontrola?

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 načítaná z internetu, databáze nebo existující kolekce v 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 galerie WinUI – 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řetažení
• Miniatury

Referenční materiály k rozhraní API

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