Sdílet prostřednictvím

Ovládací prvek Rozdělené zobrazení

Ovládací prvek rozděleného zobrazení má rozbalitelné nebo sbalitelné podokno a oblast obsahu.

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

Tady je příklad aplikace Microsoft Edge, která k zobrazení centra používá SplitView.

Příklad rozděleného zobrazení Microsoft Edge

Oblast obsahu rozděleného zobrazení je vždy viditelná. Podokno se může rozbalit a sbalit, může být otevřené a může být zobrazeno na levé nebo na pravé straně okna aplikace. Podokno má čtyři režimy:

  • Překrytí

    Panel je skrytý, dokud se neotevře. ** Když je podokno otevřené, překrývá oblast obsahu.

  • Vložený

    Panel je vždy viditelný a nepřekrývá oblast obsahu. Panel a oblasti obsahu rozdělují dostupný prostor na obrazovce.

  • CompactOverlay

    V tomto režimu je vždy viditelná úzká část podokna, dostatečně široká na to, aby zobrazovala ikony. Výchozí uzavřená šířka podokna je 48 pixelů, kterou lze upravit pomocí CompactPaneLength. Pokud je podokno otevřené, překryje obsahovou oblast.

  • CompactInline

    V tomto režimu je vždy viditelná úzká část podokna, dostatečně široká na to, aby zobrazovala ikony. Výchozí uzavřená šířka podokna je 48 pixelů, kterou lze upravit pomocí CompactPaneLength. Pokud je podokno otevřeno, zmenší se dostupné místo pro obsah a ten bude odsunut.

Je to správná kontrola?

Ovládací prvek rozděleného zobrazení lze použít k vytvoření jakéhokoliv "zásuvkového" uživatelského rozhraní, kde uživatelé mohou otevírat a zavírat doplňkové podokno. K vytvoření vzoru seznamu a podrobností můžete například použít SplitView.

Pokud chcete vytvořit navigační nabídku s tlačítkem rozbalit/sbalit a seznamem navigačních položek, použijte ovládací prvek NavigationView .

Examples

Galerie WinUI 2
Galerie WinUI

Pokud máte nainstalovanou aplikaci Galerie WinUI 2 , kliknutím sem otevřete aplikaci a podívejte se na SplitView v akci.

Vytvoření rozděleného zobrazení

Tady je ovládací prvek SplitView s otevřeným podoknem, které se zobrazuje jako inline vedle obsahu.

<SplitView IsPaneOpen="True"
           DisplayMode="Inline"
           OpenPaneLength="296">
    <SplitView.Pane>
        <TextBlock Text="Pane"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <Grid>
        <TextBlock Text="Content"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </Grid>
</SplitView>

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

  • Last updated on