Zobrazení se dvěma podokny

Zobrazení se dvěma podokny je ovládací prvek rozložení, který vám pomůže spravovat zobrazení aplikací, které mají 2 různé oblasti obsahu, jako je zobrazení seznamu nebo podrobností.

Je to správná kontrola?

Zobrazení se dvěma podokny použijte, pokud máte dvě odlišné, ale související oblasti obsahu a:

• Obsah by se měl automaticky přeuspořádat a změnit jeho velikost tak, aby se co nejlépe přizpůsobil oknem.
• Sekundární oblast obsahu by se měla zobrazovat nebo skrýt na základě dostupného místa.

Pokud potřebujete zobrazit dvě oblasti obsahu, ale nepotřebujete změnu velikosti a uspořádání, které poskytuje zobrazení se dvěma podokny, zvažte místo toho použití rozděleného zobrazení .

Pro možnosti navigace použijte navigační zobrazení.

Jak to funguje

Zobrazení se dvěma podokny obsahuje dvě podokna, kam umístíte obsah. Upraví velikost a uspořádání podoken v závislosti na prostoru dostupném pro okno. Možná rozložení podokna jsou definována výčtovým typem TwoPaneViewMode:

Hodnota výčtu	Description
SinglePane	Zobrazí se pouze jedno podokno, jak je určeno vlastností PanePriority .
Wide	Podokna se zobrazují vedle sebe nebo se zobrazí jedno podokno, jak je určeno vlastností WideModeConfiguration .
Tall	Podokna se zobrazují shora dolů nebo se zobrazí jedno podokno, jak je určeno vlastností TallModeConfiguration .

Aplikace je ve širokém režimu.

Aplikace ve vysokém režimu

Zobrazení se dvěma podokny nakonfiguruje nastavením PanePriority tak, aby určilo, které podokno se zobrazí, když je místo jenom pro jedno podokno. Potom určíte, zda Pane1 se zobrazí v horní nebo dolní části pro vysoká okna, nebo vlevo nebo vpravo pro široká okna.

Zobrazení se dvěma podokny zpracovává velikost a uspořádání podoken, ale přesto potřebujete, aby se obsah uvnitř podokna přizpůsobil změnám velikosti a orientace. Další informace o vytváření adaptivního uživatelského rozhraní najdete v tématu Responzivní rozložení pomocí panelů XAML a Rozložení .

Vytvořte zobrazení se dvěma podokny

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

Tento XAML ukazuje, jak vytvořit základní TwoPaneView.

<TwoPaneView>
    <TwoPaneView.Pane1>
        <Grid Background="{ThemeResource LayerFillColorDefaultBrush}">
            <TextBlock Text="Pane 1" Margin="24"
                       Style="{ThemeResource HeaderTextBlockStyle}"/>
        </Grid>
    </TwoPaneView.Pane1>

    <TwoPaneView.Pane2>
        <Grid Background="{ThemeResource LayerFillColorAltBrush}">
            <TextBlock Text="Pane 2" Margin="24"
                       Style="{ThemeResource HeaderTextBlockStyle}"/>
        </Grid>
    </TwoPaneView.Pane2>
</TwoPaneView>

TwoPaneView nemusí být kořenovým prvkem rozložení stránky. Ve skutečnosti ho často použijete v ovládacím prvku NavigationView , který poskytuje celkovou navigaci pro vaši aplikaci. TwoPaneView se přizpůsobí odpovídajícím způsobem bez ohledu na to, kde se nachází ve stromu XAML.

Přidat obsah do panelů

Každé podokno ve dvoupanelovém zobrazení může obsahovat jeden XAML UIElement. Pokud chcete přidat obsah, obvykle umístíte panel rozložení XAML do každého podokna a pak na panel přidáte další ovládací prvky a obsah. Podokna můžou měnit velikost a přepínat mezi širokými a vysokým režimy, takže je potřeba zajistit, aby se obsah v jednotlivých podoknech přizpůsobil těmto změnám. Další informace o vytváření adaptivního uživatelského rozhraní najdete v tématu Responzivní rozložení pomocí panelů XAML a Rozložení .

Tento příklad vytvoří jednoduché uživatelské rozhraní aplikace s obrázky a informacemi, které se zobrazilo dříve. Obsah se dá zobrazit ve dvou podoknech nebo zkombinovat do jednoho podokna v závislosti na tom, kolik místa je k dispozici. (Pokud je k dispozici jenom místo pro jedno podokno, přesunete obsah Podokna2 do podokna1 a umožníte uživateli posunout zobrazení skrytého obsahu. Kód pro tento kód se zobrazí později v části Reagování na změny režimu .)

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" MinHeight="40"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <CommandBar DefaultLabelPosition="Right">
        <AppBarButton x:Name="Share" Icon="Share" Label="Share" Click="Share_Click"/>
        <AppBarButton x:Name="Print" Icon="Print" Label="Print" Click="Print_Click"/>
    </CommandBar>

    <TwoPaneView
        x:Name="MyTwoPaneView"
        Grid.Row="1"
        MinWideModeWidth="959"
        MinTallModeHeight="863"
        ModeChanged="TwoPaneView_ModeChanged">

        <TwoPaneView.Pane1>
            <Grid x:Name="Pane1Root">
                <ScrollViewer>
                    <StackPanel x:Name="Pane1StackPanel">
                        <Image Source="Assets\LandscapeImage8.jpg"
                               VerticalAlignment="Top" HorizontalAlignment="Center"
                               Margin="16,0"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </TwoPaneView.Pane1>

        <TwoPaneView.Pane2
            <Grid x:Name="Pane2Root">
                <ScrollViewer x:Name="DetailsContent">
                    <StackPanel Padding="16">
                        <TextBlock Text="Mountain.jpg" MaxLines="1"
                                       Style="{ThemeResource HeaderTextBlockStyle}"/>
                        <TextBlock Text="Date Taken:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="8/29/2019 9:55am"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Dimensions:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="800x536"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Resolution:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="96 dpi"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Description:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna."
                                       Style="{ThemeResource SubtitleTextBlockStyle}"
                                       TextWrapping="Wrap"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </TwoPaneView.Pane2>
    </TwoPaneView>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TwoPaneViewStates">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="Wide">
                <VisualState.Setters>
                    <Setter Target="MyTwoPaneView.Pane1Length"
                            Value="2*"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

Určení podokna, které se má zobrazit

Pokud zobrazení se dvěma podokny může zobrazit pouze jedno podokno, pomocí vlastnosti PanePriority určí, které podokno se má zobrazit. Ve výchozím nastavení je PanePriority nastaveno na Pane1. Tady je postup, jak tuto vlastnost nastavit v XAML nebo v kódu.

<TwoPaneView x:Name="MyTwoPaneView" PanePriority="Pane2">

MyTwoPaneView.PanePriority = TwoPaneViewPriority.Pane2;

Změna velikosti podokna

Velikost podoken je určena atributy Pane1Length a Pane2Length. Tyto hodnoty GridLength podporují automatickou a hvězdičkovou(*) velikost. Vysvětlení automatického a hvězdicového nastavení najdete v části Vlastnosti rozložení pro responzivní rozložení pomocí XAML.

Ve výchozím nastavení je Pane1Length nastaven tak, aby se jeho velikost přizpůsobila obsahu Auto. Pane2Length je nastaveno na * a využívá veškerý zbývající prostor.

Podokna s výchozím nastavením velikosti

Výchozí hodnoty jsou užitečné pro typické rozložení seznamu/podrobností, kde máte seznam položek Pane1a mnoho podrobností v Pane2. V závislosti na obsahu ale můžete místo rozdělit jinak. Zde je Pane1Length nastaven na 2*, takže získá dvakrát více prostoru než Pane2.

<TwoPaneView x:Name="MyTwoPaneView" Pane1Length="2*">

Velikost panelů 2* a *

Pokud nastavíte podokno na použití automatického nastavení velikosti, můžete i přesto řídit jeho velikost nastavením výšky a šířky Panel, který obsahuje obsah podokna. V takovém případě možná budete muset zpracovat ModeChanged událost a nastavit omezení výšky a šířky obsahu podle aktuálního režimu.

Zobrazení v širokoúhlém nebo vysokém režimu

Režim zobrazení ve dvou panelovém zobrazení na jediné obrazovce je určen vlastnostmi MinWideModeWidth a MinTallModeHeight. Obě vlastnosti mají výchozí hodnotu 641px, stejnou jako NavigationView.CompactThresholdWidth.

Tato tabulka ukazuje, jak Height a WidthTwoPaneView určují, který režim zobrazení se používá.

Podmínka TwoPaneView	Mode
Width > MinWideModeWidth	Režim Wide se používá
Width <= MinWideModeWidth, a Height>MinTallModeHeight	Režim Tall se používá
Width <= MinWideModeWidth, a Height<= MinTallModeHeight	Režim SinglePane se používá

Široké možnosti konfigurace

MinWideModeWidth určuje, kdy zobrazení se dvěma podokny přejde do širokého režimu. Režim zobrazení se dvěma podokny se aktivuje, když je dostupné místo širší než vlastnost Wide. Výchozí hodnota je 641px, ale můžete ji změnit na libovolnou hodnotu. Obecně platí, že tuto vlastnost byste měli nastavit na hodnotu, kterou chcete mít jako minimální šířku vašeho podokna.

Pokud je zobrazení se dvěma podokny v širokém režimu, vlastnost WideModeConfiguration určuje, co se má zobrazit:

Hodnota výčtu	Description
SinglePane	Jedno podokno (určeno podle PanePriority). Podokno zabírá plnou velikost TwoPaneView (tj. velikost hvězdičky v obou směrech).
LeftRight	Pane1 vlevo/Pane2 vpravo. Obě podokna jsou velikostí hvězdičky svisle, Pane1šířka je automaticky nastavená a Pane2šířka je velikost hvězdičky.
RightLeft	Pane1 vpravo/Pane2 vlevo. Obě podokna jsou velikostí hvězdičky svisle, Pane2šířka je automaticky nastavená a Pane1šířka je velikost hvězdičky.

Výchozí nastavení je LeftRight.

LeftRight	VpravoVlevo

Poznámka:

Pokud zařízení používá jazyk RTL (right-to-left), v zobrazení se dvěma podokny se automaticky prohodí pořadí: RightLeft vykreslí se jako LeftRight a LeftRight vykreslí jako RightLeft.

Vysoké možnosti konfigurace

Zobrazení se dvěma podokny se přepne do režimu Tall, pokud je dostupné místo užší než MinWideModeWidth a vyšší než MinTallModeHeight. Výchozí hodnota je 641px, ale můžete ji změnit na libovolnou hodnotu. Obecně byste tuto vlastnost měli nastavit na jakýkoli minimální rozměr, který chcete pro výšku vašeho podokna.

Pokud je zobrazení se dvěma podokny ve vysokém režimu, vlastnost TallModeConfiguration určuje, co se má zobrazit:

Hodnota výčtu	Description
SinglePane	Jedno podokno (určeno podle PanePriority). Podokno zabírá plnou velikost TwoPaneView (tj. velikost hvězdičky v obou směrech).
TopBottom	Pane1 nahoře/Pane2 dole. Obě podokna mají vodorovnou velikost hvězdičky, Pane1výška je automaticky nastavená a Pane2výška je velikost hvězdičky.
BottomTop	Pane1 v dolní části/Pane2 nahoře. Obě podokna mají vodorovnou velikost hvězdičky, Pane2výška je automaticky nastavená a Pane1výška je velikost hvězdičky.

Výchozí hodnota je TopBottom.

HorníSpodní	Dolní horní část

Speciální hodnoty pro MinWideModeWidth a MinTallModeHeight

Vlastnost MinWideModeWidth můžete použít k tomu, aby zabránila zobrazení se dvěma podokny vstoupit do režimu Wide – stačí nastavit MinWideModeWidth na hodnotu Double.PositiveInfinity.

Pokud nastavíte MinTallModeHeightDouble.PositiveInfinity, zabrání zobrazení se dvěma podokny vstoupit do režimu Tall.

Pokud nastavíte MinTallModeHeight na 0, zabrání to zobrazení se dvěma podokny ve vstupu do režimu SinglePane.

Reagování na změny režimu

K získání aktuálního režimu zobrazení můžete použít vlastnost Režim jen pro čtení. Pokaždé, když zobrazení se dvěma podokny změní, které podokno nebo podokna se zobrazuje, nastane událost ModeChanged před vykreslením aktualizovaného obsahu. Událost můžete zpracovat tak, aby reagovala na změny v režimu zobrazení.

Důležité

K ModeChanged události nedojde při počátečním načtení stránky, takže výchozí XAML by měl představovat uživatelské rozhraní, jak by se mělo zobrazit při prvním načtení.

Jednou z možností, jak tuto událost použít, je aktualizovat uživatelské rozhraní aplikace, aby uživatelé mohli zobrazit veškerý obsah v SinglePane režimu. Například ukázková aplikace má primární podokno (obrázek) a informační podokno.

Vysoký režim

Pokud je k zobrazení jednoho podokna dostatek místa, můžete obsah přesunout Pane2 do Pane1 , aby se uživatel mohl posunout a zobrazit celý obsah. Vypadá to takto.

Režim SinglePane

Mějte na paměti, že vlastnosti MinWideModeWidth a MinTallModeHeight určují, kdy se změní režim zobrazení, takže můžete změnit, kdy se obsah přesouvá mezi podokny, úpravou hodnot těchto vlastností.

Tady je ModeChanged kód obslužné rutiny události, který přesouvá obsah mezi Pane1 a Pane2. Nastaví také VisualState tak, aby omezil šířku obrázku v Wide režimu.

private void TwoPaneView_ModeChanged(TwoPaneView sender, object args)
{
    // Remove details content from it's parent panel.
    ((Panel)DetailsContent.Parent).Children.Remove(DetailsContent);
    // Set Normal visual state.
    VisualStateManager.GoToState(this, "Normal", true);

    // Single pane
    if (sender.Mode == TwoPaneViewMode.SinglePane)
    {
        // Add the details content to Pane1.
        Pane1StackPanel.Children.Add(DetailsContent);
    }
    // Dual pane.
    else
    {
        // Put details content in Pane2.
        Pane2Root.Children.Add(DetailsContent);

        // If also in Wide mode, set Wide visual state
        // to constrain the width of the image to 2*.
        if (sender.Mode == TwoPaneViewMode.Wide)
        {
            VisualStateManager.GoToState(this, "Wide", true);
        }
    }
}

Související články

• Přehled rozložení
• rozdělené zobrazení