Model výpisu a podrobností

Vzor seznamu/podrobností obsahuje podokno seznamu (obvykle se zobrazením seznamu) a podokno podrobností pro obsah. Když je vybrána položka v seznamu, podokno podrobností se aktualizuje. Tento vzor se často používá pro e-maily a adresáře.

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

Příklad vzoru detailů seznamu

Návod

Pokud chcete použít ovládací prvek XAML, který tento vzor implementuje za vás, doporučujeme ovládací prvek ListDetailsView XAML ze sady nástrojů Windows Community Toolkit.

Je to správný vzor?

Vzor seznamu a podrobností funguje dobře, pokud chcete:

Vytvořte e-mailovou aplikaci, adresář nebo libovolnou aplikaci, která je založená na rozložení podrobností seznamu.
Vyhledejte a určete prioritu velké kolekce obsahu.
Umožňuje rychlé přidání a odebrání položek ze seznamu při práci mezi kontexty.

Výběr správného stylu

Při implementaci vzoru seznamu/podrobností doporučujeme použít buď skládaný styl, nebo styl vedle sebe na základě množství dostupného místa na obrazovce.

Dostupná šířka okna	Doporučený styl
320 epx-640 epx	Naskládaný
641 epx nebo širší	Vedle sebe

Skládaný styl

Ve skládaném stylu je najednou viditelné jenom jedno podokno: seznam nebo podrobnosti.

Podrobnosti seznamu v skládaném režimu

Uživatel začíná v podokně seznamu a podrobněji zkoumá podokno podrobností, když vybere položku v seznamu. Uživateli se zdá, že zobrazení seznamu a podrobností existují na dvou samostatných stránkách.

Vytvořte vzor skládaného seznamu/podrobností

Jedním ze způsobů, jak vytvořit vzor skládaného seznamu/podrobností, je použít samostatné stránky pro podokno seznamu a podokno podrobností. Umístěte zobrazení seznamu na jednu stránku a podokno podrobností na samostatné stránce.

Části pro podrobnosti seznamu se skládaným stylem

Pro stránku zobrazení seznamu funguje ovládací prvek zobrazení seznamu dobře pro prezentaci seznamů, které můžou obsahovat obrázky a text.

Pro stránku zobrazení podrobností použijte prvek obsahu , který dává největší smysl. Pokud máte hodně samostatných polí, zvažte použití rozložení mřížky k uspořádání prvků do formuláře.

Pro navigaci mezi stránkami viz historii navigace a zpětnou navigaci pro aplikace pro Windows.

Styl vedle sebe

V režimu vedle sebe jsou podokno seznamu a podokno podrobností viditelné současně.

Vzor seznamu/podrobností

Seznam v podokně seznamu obsahuje vizuál výběru, který označuje aktuálně vybranou položku. Výběrem nové položky v seznamu se aktualizuje podokno podrobností.

Vytvoření vzoru seznamu a podrobností vedle sebe

Jedním ze způsobů, jak vytvořit vzor seznamu a podrobností vedle sebe, je použít ovládací prvek rozděleného zobrazení . Umístěte zobrazení seznamu do podokna rozděleného zobrazení a zobrazení podrobností do obsahu rozděleného zobrazení.

části rozděleného pohledu na seznam podrobností

Pro podokno seznamu funguje ovládací prvek zobrazení seznamu dobře pro prezentaci seznamů, které můžou obsahovat obrázky a text.

Pro podrobnosti obsahu použijte takový prvek obsahu, který dává největší smysl. Pokud máte hodně samostatných polí, zvažte použití rozložení mřížky k uspořádání prvků do formuláře.

Adaptivní rozložení

Pokud chcete implementovat vzor seznamu/podrobností pro libovolnou velikost obrazovky, vytvořte responzivní uživatelské rozhraní s adaptivním rozložením.

adaptivní rozložení podrobností seznamu

Vytvořte vzor adaptivního seznamu a podrobností

Pokud chcete vytvořit adaptivní rozložení, definujte pro uživatelské rozhraní různé stavy VisualState a deklarujte zarážky pro různé stavy pomocí adaptivníchtriggerů.

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

Následující ukázky implementují model seznamu/podrobností s adaptivním rozložením a demonstrují datovou vazbu na statické, databázové a online prostředky: