Gyűjtemények és listák

A gyűjtemények és a listák egyaránt több egymáshoz kapcsolódó adatelem ábrázolására vonatkoznak, amelyek együtt jelennek meg. A gyűjtemények többféleképpen is megjeleníthetők különböző gyűjteményvezérlőkkel (más néven gyűjteménynézetekkel). A gyűjteményvezérlők megjelenítik és engedélyezik a gyűjteményalapú tartalommal való interakciókat, például a partnerek listáját, a dátumok listáját, a képek gyűjteményét stb.

Fontos API-k: ItemsView, ListView osztály, GridView osztály, FlipView osztály, TreeView osztály, ItemsRepeater osztály

A cikkben tárgyalt vezérlők a következők:

Vezérlő	Elsődleges használat
ItemsView	gyűjtemények megjelenítése rugalmas elrendezési rendszerrel
ListView	szövegben gazdag tartalomgyűjtemények megjelenítése
GridView	képekben gazdag tartalomgyűjtemények megjelenítése
FlipView	olyan képigényes tartalomgyűjtemények megjelenítéséhez, amelyekhez pontosan egy elemnek kell egyszerre a fókuszban lennie
TreeView	szövegkézbesítésű tartalomgyűjtemények megjelenítése egy adott hierarchiában
ItemsRepeater	testre szabható építőelemként egyéni gyűjteményvezérlők létrehozásához

Az alábbi tervezési irányelvek, funkciók és példák az egyes vezérlőkhöz tartoznak.

Ezek a vezérlők (az ItemsRepeater kivételével) beépített stílust és interakciót biztosítanak. A gyűjteménynézet és a benne lévő elemek vizuális megjelenésének további testreszabásához azonban egy DataTemplate-et használunk. Az adatsablonokkal és a gyűjteménynézetek megjelenésének testreszabásával kapcsolatos részletes információk az Elemtárolók és -sablonok lapon találhatók.

Ezen vezérlők mindegyike (az ItemsRepeater kivételével) beépített működéssel rendelkezik, amely lehetővé teszi egy vagy több elem kiválasztását. További információért tekintse meg a Kijelölési módok áttekintését .

Elemek nézete

Az elemek nézetével szöveg- vagy képigényes adatelemeket jeleníthet meg különböző rugalmas elrendezésekben, amelyek futtatáskor felcserélhetők.

Ez a megfelelő vezérlő?

Elemek nézet használata:

• Olyan gyűjtemény megjelenítése, amely elsősorban szövegalapú elemekből áll, ahol az összes elemnek azonos vizualizációs és interakciós viselkedéssel kell rendelkeznie.
• Megjeleníthet egy tartalomgyűjteményt, amelyben az egyes elemek fókuszpontja egy kép, és minden elemnek azonos vizualizációs és interakciós viselkedéssel kell rendelkeznie.
• Tartalomtárak megjelenítése.
• Számos használati esetet alkalmazhat, beleértve a következő gyakori eseteket is:
  • Hozzon létre egy partnerlistát.
  • Storefront típusú felhasználói felület (például alkalmazások, dalok, termékek böngészése)
  • Interaktív fényképtárak

Példák

Íme egy elemnézet, amely egységes rácselrendezésben jeleníti meg a fényképek gyűjteményét.

Ez ugyanaz a gyűjtemény, amely egy halom elrendezésben látható. A fókusz itt a szövegen van, nem pedig a fényképen.

Kapcsolódó cikkek

Téma	Description
Elemek megtekintése	Ismerje meg az elemnézetek alkalmazásbeli használatának alapvető elemeit.
Elemtárolók és -sablonok	A listában vagy rácsban megjelenített elemek jelentős szerepet játszhatnak az alkalmazás általános megjelenésében. A vezérlősablonok és adatsablonok módosításával testre szabhatja a gyűjteményelemek megjelenését.

Lista nézet

A listanézetek szöveges elemeket jelölnek, általában egyoszlopos, függőlegesen halmozott elrendezésben. Lehetővé teszik az elemek kategorizálását és csoportfejlécek hozzárendelését, az elemek húzásával és ejtésével, a tartalom kurálásával és az elemek átrendezésével.

Ez a megfelelő vezérlő?

Listanézet használatával:

• Olyan gyűjtemény megjelenítése, amely elsősorban szövegalapú elemekből áll, ahol az összes elemnek azonos vizualizációs és interakciós viselkedéssel kell rendelkeznie.
• Egyetlen vagy kategorizált tartalomgyűjteményt jelöl.
• Számos használati esetet alkalmazhat, beleértve a következő gyakori eseteket is:
  • Hozzon létre egy üzenetlistát vagy üzenetnaplót.
  • Hozzon létre egy partnerlistát.
  • Hozza létre a listapanelt a lista/részletek mintájában. A levelezőalkalmazásokban gyakran használnak lista-/részletmintát, amelyben az egyik panelen kiválasztható elemek listája, a másik panel (részletek) pedig a kijelölt elem részletes nézetével rendelkezik.

Megjegyzés:

Ha görgethető nézetben (például ScrollViewer vagy ListView) kell kezelnie egy UIElement mutatóeseményeit, a UIElement.CancelDirectmanipulation meghívásával explicit módon le kell tiltania a nézet elemének manipulációs eseményeinek támogatását. Ha újra engedélyezni szeretné a nézetben a manipulációs eseményeket, hívja meg UIElement.TryStartDirectManipulation.

Példák

Íme egy egyszerű listanézet, amely egy partnerlistát jelenít meg, és betűrendben csoportosítja az adatelemeket. A csoportfejlécek (ebben a példában az ábécé betűi) is testre szabhatók, hogy "ragadósak" maradjanak, mivel görgetés közben mindig megjelennek a ListView tetején.

Ez egy ListView, amely az üzenetek naplójának megjelenítésére lett fordítva, a legújabb üzenetek pedig alul jelennek meg. Invertált ListView esetén az elemek egy beépített animációval jelennek meg a képernyő alján.

Kapcsolódó cikkek

Téma	Description
Listanézet és rácsnézet	Ismerje meg a listanézetek vagy rácsnézetek alkalmazásbeli használatának alapvető elemeit.
Elemtárolók és -sablonok	A lista- vagy rácsnézetben megjelenített elemek jelentős szerepet játszhatnak az alkalmazás általános megjelenésében. A vezérlősablonok és adatsablonok módosításával testre szabhatja a gyűjteményelemek megjelenését.
Listanézet elemeinek sablonjai	A ListView-hoz készült alábbi példaelemsablonokkal megismerheti a gyakori alkalmazástípusok megjelenését.
Fordított listák	Az invertált listák alján új elemek vannak hozzáadva, például egy csevegőalkalmazásban. A cikk útmutatását követve fordított listát használhat az alkalmazásban.
Húzással frissít	A lekéréses frissítési mechanizmus lehetővé teszi, hogy a felhasználók érintéssel lekérjenek egy adatlistát, hogy több adatot kérjenek le. Használja ezt a cikket a húzással való frissítés implementálásához a listanézetében.
Beágyazott felhasználói felület	A beágyazott felhasználói felület egy felhasználói felület (UI), amely olyan tárolóban található végrehajtható vezérlőket tesz elérhetővé, amelyeken a felhasználó is műveletet hajthat végre. Előfordulhat például, hogy van egy gombot tartalmazó listanézetelem, és a felhasználó kijelölheti a listaelemet, vagy lenyomhatja a benne lévő gombot. Kövesse ezeket az ajánlott eljárásokat, hogy a legjobb beágyazott felhasználói felület legyen a felhasználók számára.

Rácsnézet

A rácsnézetek képalapú tartalomgyűjtemények rendezésére és böngészésére alkalmasak. A rácsnézeti elrendezés függőlegesen görgethető és vízszintesen mozgatható. Az elemek burkolt elrendezésben vannak, mivel balról jobbra, majd felülről lefelé olvasási sorrendben jelennek meg.

Ez a megfelelő vezérlő?

Rácsnézet használata a következőhöz:

• Megjeleníthet egy tartalomgyűjteményt, amelyben az egyes elemek fókuszpontja egy kép, és minden elemnek azonos vizualizációs és interakciós viselkedéssel kell rendelkeznie.
• Tartalomtárak megjelenítése.
• Formázza a szemantikai nagyításhoz társított két tartalomnézetet.
• Számos használati esetet alkalmazhat, beleértve a következő gyakori eseteket is:
  • Storefront típusú felhasználói felület (például alkalmazások, dalok, termékek böngészése)
  • Interaktív fényképtárak

Megjegyzés:

Ha görgethető nézetben (például ScrollViewer vagy ListView) kell kezelnie egy UIElement mutatóeseményeit, a UIElement.CancelDirectmanipulation() meghívásával explicit módon le kell tiltania a nézet elemének manipulációs eseményeinek támogatását. Ha újra engedélyezni szeretné a nézetben a manipulációs eseményeket, hívja meg a UIElement.TryStartDirectManipulation()-t.

Példák

Ez a példa egy tipikus rácsnézet-elrendezést mutat be, ebben az esetben az alkalmazások böngészéséhez. A rácsnézetelemek metaadatai általában néhány sornyi szövegre és egy elemminősítésre korlátozódnak.

A rácsnézet ideális megoldás egy tartalomtárhoz, amelyet gyakran használnak médiatartalmak, például képek és videók bemutatására. A tartalomtárakban a felhasználók várhatóan képesek lesznek koppintani egy elemre egy művelet meghívásához.

Kapcsolódó cikkek

Téma	Description
Listanézet és rácsnézet	Ismerje meg a listanézetek vagy rácsnézetek alkalmazásbeli használatának alapvető elemeit.
Elemtárolók és -sablonok	A lista- vagy rácsnézetben megjelenített elemek jelentős szerepet játszhatnak az alkalmazás általános megjelenésében. A vezérlősablonok és adatsablonok módosításával testre szabhatja a gyűjteményelemek megjelenését.
Elemsablonok rácsos nézethez	A ListView-hoz készült alábbi példaelemsablonokkal megismerheti a gyakori alkalmazástípusok megjelenését.
Beágyazott felhasználói felület	A beágyazott felhasználói felület egy felhasználói felület (UI), amely olyan tárolóban található végrehajtható vezérlőket tesz elérhetővé, amelyeken a felhasználó is műveletet hajthat végre. Előfordulhat például, hogy van egy gombot tartalmazó listanézetelem, és a felhasználó kijelölheti a listaelemet, vagy lenyomhatja a benne lévő gombot. Kövesse ezeket az ajánlott eljárásokat, hogy a legjobb beágyazott felhasználói felület legyen a felhasználók számára.

Nézet váltás

A tükrözési nézetek képalapú tartalomgyűjtemények böngészéséhez használhatók, különösen akkor, ha a kívánt élmény csak egy kép megjelenítése egyszerre. A tükrözési nézet lehetővé teszi a felhasználó számára, hogy a gyűjteményelemek között (függőlegesen vagy vízszintesen) mozogjon vagy "tükröződjön", és mindegyik elem egyenként jelenjen meg a felhasználói beavatkozás után.

Ez a megfelelő vezérlő?

Lapozó nézet használata a következőhöz:

• Kis és közepes (25-nél kevesebb elemből álló) gyűjteményt jelenít meg, ahol a gyűjtemény olyan képekből áll, amelyekhez kevés a metaadat.
• Egyenként jelenítse meg az elemeket, és tegye lehetővé, hogy a végfelhasználó a saját tempójában lapozhasson át az elemek között.
• Számos használati esetet alkalmazhat, beleértve a következő gyakori eseteket is:
  • Fotógalériák
  • Termékgalériák vagy bemutatók

Példák

Az alábbi két példa egy FlipView nézetet mutat be, amely vízszintesen, illetve függőlegesen lapoz.

Kapcsolódó cikkek

Téma	Description
Nézet tükrözése	Megismerheti a tükrözés nézet használatának alapvető elemeit az alkalmazásban, valamint azt, hogy miként szabhatja testre az elemek megjelenését egy tükröző nézetben.

Fa nézet

A fa nézetek alkalmasak szövegalapú gyűjtemények megjelenítésére, amelyek fontos hierarchiát mutatnak be. A fa nézet elemei összecsukhatók/bővíthetők, vizuális hierarchiában jelennek meg, ikonokkal kiegészíthetők, és a fa nézetek között húzhatók és ejthetők. A fanézetek lehetővé teszik az N szintű beágyazást.

Ez a megfelelő vezérlő?

Fanézet használata a következőhöz:

• Beágyazott elemek gyűjteménye, amelyek környezete és jelentése egy hierarchia vagy egy adott szervezeti lánc függvénye.
• Számos használati esetet alkalmazhat, beleértve a következő gyakori eseteket is:
  • Fájlböngésző
  • Vállalati szervezeti diagram

Példák

Íme egy példa egy fa nézetre, amely egy fájlkezelőt jelképez, és számos beágyazott elemet jelenít meg ikonokkal kiegészítve.

Kapcsolódó cikkek

Téma	Description
Fa nézet	Megismerheti a fanézetek alkalmazásbeli használatának alapjait, valamint azt, hogy miként szabhatja testre az elemek megjelenését és interakciós viselkedését egy fanézetben.

ItemsRepeater

Az ItemsRepeater eltér az ezen a lapon látható gyűjteményvezérlőktől, mivel nem biztosít semmilyen stílust vagy interakciót, például egyszerűen egy oldalra helyezve, tulajdonságok megadása nélkül. Az ItemsRepeater inkább egy építőelem, amellyel fejlesztőként létrehozhat saját egyéni gyűjteményvezérlőt, különösen olyant, amelyet a jelen cikkben szereplő többi vezérlővel nem lehet elérni. Az ItemsRepeater egy adatvezérelt és nagy teljesítményű panel, amely a pontos igényeknek megfelelően testre szabható.

Jótanács

Az ItemsView vezérlő az ItemsRepeaterre épül, és az ItemsRepeater számos előnyét biztosítja anélkül, hogy saját egyéni gyűjteményvezérlőt kellene létrehoznia.

Ez a megfelelő vezérlő?

Használjon ItemsRepeatert, ha:

• Olyan felhasználói felülettel és felhasználói élménnyel rendelkezik, amely nem hozható létre meglévő gyűjteményvezérlők használatával.
• Van egy meglévő adatforrása az elemeihez (például az internetről lekért adatokhoz, egy adatbázishoz vagy egy már meglévő gyűjteményhez a kód hátterében).

Példák

Az alábbi három példa mind olyan ItemsRepeater-vezérlő, amely ugyanahhoz az adatforráshoz (egy számból álló gyűjteményhez) van kötve. A számok gyűjteménye háromféleképpen jelenik meg, az alábbi ItemsRepeaters mindegyike különböző egyéni elrendezést és különböző egyéni ItemTemplate-t használ.

Kapcsolódó cikkek

Téma	Description
ItemsRepeater	Ismerje meg az ItemsRepeater alkalmazásbeli használatának alapvető elemeit, valamint azt, hogyan implementálhatja a gyűjteménynézethez szükséges összes interakciót és vizuális összetevőt.

Globalizációs és honosítási ellenőrzőlista

• Körbefuttatás: Két sor engedélyezése a listacímkéhez.
• Vízszintes bővítés: Győződjön meg arról, hogy a mezők képesek a szövegbővítésre, és görgethetők.
• Függőleges térköz: A függőleges térközhöz használjon nem latin karaktereket, hogy a nem latin nyelvű szkriptek megfelelően jelenjenek meg.

A mintakód lekérése

• WinUI 3 katalógusminta – Az összes XAML-vezérlő megjelenítése interaktív formátumban.

Kapcsolódó cikkek

Tervezési és UX-irányelvek

• Lista/részletek
• Navigációs ablaktábla
• Szemantikai nagyítás
• Húzd és dobd le
• Miniatűr képek

API-referencia

• ListView osztály
• GridView osztály
• ComboBox (Kombinált lista) osztály
• ListBox osztály