Listázási/részletezési mintázat

A lista/részletek minta egy listapanellel (általában listanézettel) és a tartalom részleteit tartalmazó panellel rendelkezik. Ha kijelöl egy elemet a listában, a részletek panel frissül. Ezt a mintát gyakran használják e-mail- és címjegyzékekhez.

Fontos API-k: ListView osztály, SplitView osztály

Példa a lista részleteinek mintájára

Jótanács

Ha olyan XAML-vezérlőt szeretne használni, amely megvalósítja ezt a mintát, javasoljuk, hogy a Windows Community Toolkit listDetailsView XAML-vezérlője legyen.

Ez a helyes minta?

A lista/részletek minta jól működik, ha a következőkre van szüksége:

Létrehozhat egy e-mail-alkalmazást, címjegyzéket vagy bármely olyan alkalmazást, amely listarészlet-elrendezésen alapul.
Nagy mennyiségű tartalom megkeresése és rangsorolása.
Lehetővé teszi az elemek gyors hozzáadását és eltávolítását egy listából, miközben a környezetek között előre-hátra dolgozik.

A megfelelő stílus kiválasztása

A lista/részletek minta megvalósításakor azt javasoljuk, hogy a rendelkezésre álló képernyőterület alapján használja a halmozott stílust vagy az egymás melletti stílust.

Elérhető ablakszélesség	Ajánlott stílus
320 epx-640 epx	Halmozott
641 epx vagy szélesebb	Egymás mellett

Halmozott stílus

A halmozott stílusban egyszerre csak egy panel látható: a lista vagy a részletek.

Listarészlet halmozott módban

A felhasználó a listapanelen indul, és a lista egy elemének kiválasztásával a részletek panelre lép. A felhasználó számára úgy tűnik, mintha a lista és a részletek nézetei két külön oldalon léteznek.

Halmozott lista/részletminta létrehozása

A halmozott lista/részletminta létrehozásának egyik módja, ha külön oldalakat használ a listapanelhez és a részletek panelhez. Helyezze a listanézetet egy oldalra, a részletek panelt pedig egy külön oldalra.

Halmozott stílusú lista részleteinek elemei

A listanézeti lapon a listanézet vezérlő jól használható képeket és szöveget tartalmazó listák megjelenítéséhez.

A részletek nézetoldalához használja a legértelmesebb tartalomelemet . Ha sok külön mezővel rendelkezik, fontolja meg a Rács elrendezés használatát az elemek űrlapba rendezéséhez.

A lapok közötti navigáláshoz tekintse meg a Windows-alkalmazások navigációs előzményeit és a visszamenőleges navigációt.

Egymás melletti stílus

Az egymás melletti stílusban a listapanel és a részletek ablaktábla egyszerre látható.

A lista/részletminta

A listapanelen található lista egy kijelölési vizualizációval jelzi az aktuálisan kijelölt elemet. Ha kiválaszt egy új elemet a listában, az frissíti a részletek panelt.

Egymás melletti lista/részletminta létrehozása

Az egymás melletti lista/részletminta létrehozásának egyik módja az osztott nézet vezérlő használata. Helyezze a listanézetet az osztott nézet panelre, a részletek nézetet pedig a felosztott nézet tartalmába.

lista részleteinek felosztása nézetrészek

A listapanelen a listanézet-vezérlő jól használható képeket és szöveget tartalmazó listák megjelenítéséhez.

A részletes tartalomhoz használja a legértelmesebb tartalomelemet . Ha sok külön mezővel rendelkezik, fontolja meg a Rács elrendezés használatát az elemek űrlapba rendezéséhez.

Adaptív elrendezés

Ha bármilyen képernyőmérethez szeretne lista-/részletmintát implementálni, hozzon létre egy rugalmas felhasználói felületet adaptív elrendezéssel.

adaptív lista részletes elrendezése

Adaptív lista/részletminta létrehozása

Adaptív elrendezés létrehozásához definiáljon különböző VisualStates-eket a felhasználói felületen, és deklaráljon töréspontokat a különböző állapotokhoz az AdaptiveTriggers használatával.

A mintakód lekérése

Az alábbi minták adaptív elrendezésekkel implementálják a lista-/részletmintát, és bemutatják a statikus, adatbázis- és online erőforrásokhoz való adatkötést: