Kétablakos nézet

A kétablakos nézet egy elrendezésvezérlő, amely segít kezelni az olyan alkalmazások megjelenítését, amelyek 2 különböző tartalomterületet tartalmaznak, például egy lista- vagy részletnézetet.

Ez a megfelelő vezérlő?

Használja a kétablakos nézetet, ha két különböző, de kapcsolódó tartalomterülettel rendelkezik, és:

• A tartalomnak automatikusan át kell rendeznie és át kell méreteznie, hogy a legjobban illeszkedjen az ablakhoz.
• A tartalom másodlagos területének a rendelkezésre álló hely alapján kell megjelennie/el kell rejtenie.

Ha két tartalomterületet kell megjelenítenie, de nincs szüksége a kétablakos nézet által biztosított átméretezési és átrendezési lehetőségre, fontolja meg inkább a Felosztás nézet használatát.

A navigációs lehetőségekhez használjon navigációs nézetet.

Hogyan működik?

A kétablakos nézet két panelen helyezi el a tartalmat. Az ablaktábla méretét és elrendezését az ablak számára elérhető területtől függően állítja be. A lehetséges panelelrendezéseket a TwoPaneViewMode enumerálás határozza meg:

Felsorolás érték	Description
SinglePane	Csak egy panel jelenik meg a PanePriority tulajdonság által megadott módon.
Wide	Az ablaktáblák egymás mellett jelennek meg, vagy egyetlen panel jelenik meg a WideModeConfiguration tulajdonság által megadott módon.
Tall	A panelek alul jelennek meg, vagy egyetlen panel jelenik meg a TallModeConfiguration tulajdonságban megadottak szerint.

Széles módban lévő alkalmazás.

Alkalmazás függőleges módban.

A kétablakos nézetet úgy konfigurálhatja, hogy a PanePriority beállításával megadhatja, hogy melyik ablaktábla jelenik meg, ha csak egy ablaktábla számára van hely. Ezután megadhatja, hogy a magas ablakok felső vagy alsó részén, illetve a széles ablakoknál a bal vagy a jobb oldalon jelenjenek-e Pane1 meg.

A kétablakos nézet kezeli a panelek méretét és elrendezését, de a panelen lévő tartalmat hozzá kell igazítania a méret és a tájolás változásaihoz. Az adaptív felhasználói felület létrehozásáról további információt a XAML rugalmas elrendezései és az Elrendezési panelek című témakörben talál.

Kétablakos nézet létrehozása

• Fontos API-k:TwoPaneView osztály

Ez az XAML bemutatja, hogyan hozhat létre alapszintű 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>

A TwoPaneView-nak nem kell a lapelrendezés gyökérelemének lennie. Valójában gyakran a NavigationView vezérlőn belül használja, amely az alkalmazás általános navigációját biztosítja. A TwoPaneView megfelelő módon alkalmazkodik, függetlenül attól, hogy hol található az XAML-fában.

Tartalom hozzáadása az ablaktáblákhoz

A kétablakos nézet minden ablaktáblája egyetlen XAML-t UIElementtartalmazhat. Tartalom hozzáadásához általában minden panelen elhelyez egy XAML elrendezéspanelt, majd további vezérlőket és tartalmat ad hozzá a panelhez. Az ablaktáblák módosíthatják a méretet, és válthatnak a széles és a magas módok között, ezért meg kell győződnie arról, hogy az egyes ablaktáblák tartalma alkalmazkodik ezekhez a változásokhoz. Az adaptív felhasználói felület létrehozásáról további információt a XAML rugalmas elrendezései és az Elrendezési panelek című témakörben talál.

Ez a példa létrehozza a korábban bemutatott egyszerű kép/info alkalmazás felhasználói felületét. A tartalom két ablaktáblában jeleníthető meg, vagy egyetlen panelen kombinálható attól függően, hogy mennyi hely áll rendelkezésre. (Ha csak egy panelnek van helye, a 2. panel tartalmát az 1. ablaktáblába helyezheti, és görgetheti a felhasználót a rejtett tartalmak megtekintéséhez. Az ehhez tartozó kódot később a Válasz mód módosításai szakaszban találja.)

<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>

A megjelenítendő panel megadása

Ha a kétablakos nézet csak egyetlen panelt jeleníthet meg, a PanePriority tulajdonság használatával határozza meg, hogy melyik panel jelenjen meg. Alapértelmezés szerint a PanePriority Pane1 értékre van állítva. Így állíthatja be ezt a tulajdonságot XAML-ben vagy kódban.

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

MyTwoPaneView.PanePriority = TwoPaneViewPriority.Pane2;

Panel méretezése

A panelek méretét a Pane1Length és a Pane2Length tulajdonság határozza meg. Ezek gridLength értékeket használnak, amelyek támogatják az automatikus és csillag(*) méretezést. Az automatikus és csillagméretezés magyarázatáért tekintse meg a Reszponzív elrendezések XAML-lelAz elrendezés tulajdonságai szakaszát.

Alapértelmezés szerint a Pane1Length a Auto értékre van állítva, és úgy méretezi magát, hogy illeszkedjen a tartalmához. Pane2Length értékre * van állítva, és az összes fennmaradó területet használja.

Panelek alapértelmezett méretezéssel

Az alapértelmezett értékek egy tipikus lista-/részletelrendezéshez hasznosak, ahol az elemek Pane1listája és sok részlet szerepel a fájlban Pane2. A tartalomtól függően azonban érdemes lehet másként osztani a helyet. Itt van beállítva, Pane1Length2* így kétszer annyi helyet kap, mint Pane2.

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

2* és * méretű panelek

Ha egy panelt automatikus méretezésre állít be, a méretet a panel tartalmát tartalmazó ablak magasságának és szélességének Panel beállításával szabályozhatja. Ebben az esetben előfordulhat, hogy kezelnie kell az eseményt ModeChanged , és az aktuális módnak megfelelően kell beállítania a tartalom magassági és szélességi korlátozásait.

Megjelenítés széles vagy magas módban

Egyetlen képernyőn a kétablakos nézet megjelenítési módját a MinWideModeWidth és a MinTallModeHeight tulajdonságok határozzák meg. Mindkét tulajdonság alapértelmezett értéke 641px, ugyanaz, mint a NavigationView.CompactThresholdWidth.

A táblázat azt mutatja be, hogyan határozza meg a Height és a Width a használt megjelenítési módot a TwoPaneView alapján.

TwoPaneView feltétel	Üzemmód
Width > MinWideModeWidth	Wide mód használatban van
Width <= MinWideModeWidth, és Height>MinTallModeHeight	Tall mód használatban van
Width <= MinWideModeWidth, és Height<= MinTallModeHeight	SinglePane mód használatban van

Széles konfigurációs lehetőségek

MinWideModeWidth határozza meg, hogy a kétablakos nézet mikor lépjen be széles módba. A kétablakos nézet akkor lép be a módba Wide , ha a rendelkezésre álló terület nagyobb, mint a MinWideModeWidth tulajdonság. Az alapértelmezett érték 641px, de tetszés szerint módosíthatja. Ezt a tulajdonságot általában a panel minimális szélességének megfelelőre kell beállítania.

Ha a kétablakos nézet széles módban van, a WideModeConfiguration tulajdonság határozza meg, hogy mit kell megjeleníteni:

Enum érték	Description
SinglePane	Egyetlen panel (a megadott módon PanePriority). Az ablak a TwoPaneView teljes méretét elfoglalja (azaz csillagméretű mindkét irányban).
LeftRight	Pane1 a bal oldalon/Pane2 a jobb oldalon. Mindkét panel függőlegesen csillagméretű, Pane1 szélessége automatikus, és Pane2 szélessége csillagméretű.
RightLeft	Pane1 a jobb oldalon/Pane2 a bal oldalon. Mindkét panel függőlegesen csillagméretű, Pane2 szélessége automatikus, és Pane1 szélessége csillagméretű.

Az alapértelmezett beállítás: LeftRight.

LeftRight	RightLeft

Megjegyzés:

Ha az eszköz jobbról balra (RTL) nyelvet használ, a kétablakos nézet automatikusan felcseréli a sorrendet: RightLeft rendereli a következőt LeftRight, és LeftRight rendereli a következőt RightLeft: .

Kiterjedt konfigurációs beállítások

A kétablakos nézet belép a Tall módba, ha a rendelkezésre álló terület keskenyebb, mint MinWideModeWidth, és magasabb, mint MinTallModeHeight. Az alapértelmezett érték 641px, de tetszés szerint módosíthatja. Ezt a tulajdonságot általában a panel minimális magasságának megfelelő értékre kell állítania.

Ha a kétablakos nézet magas módban van, a TallModeConfiguration tulajdonság határozza meg, hogy mit jelenítsen meg:

Enum érték	Description
SinglePane	Egyetlen panel (a megadott módon PanePriority). Az ablak a TwoPaneView teljes méretét elfoglalja (azaz csillagméretű mindkét irányban).
TopBottom	Pane1 felül/Pane2 alul. Mindkét panel vízszintesen csillagméretű, Pane1 a magasság automatikus méretű, Pane2 a magasság pedig csillagméretű.
BottomTop	Pane1 alul/Pane2 felül. Mindkét panel vízszintesen csillagméretű, Pane2 a magasság automatikus méretű, Pane1 a magasság pedig csillagméretű.

Az alapértelmezett érték a TopBottom.

FelülAlul	BottomTop

A MinWideModeWidth és a MinTallModeHeight speciális értékei

A MinWideModeWidth tulajdonság segítségével megakadályozhatja, hogy a kétablakos nézet Wide módba lépjen – csak állítsa be a MinWideModeWidth tulajdonságot a Double.PositiveInfinity értékre.

Ha a MinTallModeHeight értékre állítja a , az megakadályozza, hogy a kétablakos nézet belépjen a Tall módba.

Ha 0-ra állítja MinTallModeHeight, az megakadályozza a kétablakos nézet SinglePane módba lépését.

Reagálás a módmódosításokra

Az írásvédett mód tulajdonság használatával lekérheti az aktuális megjelenítési módot. Amikor a kétablakos nézet módosítja a megjelenített panelt vagy paneleket, a ModeChanged esemény a frissített tartalom megjelenítése előtt következik be. Az eseményt úgy kezelheti, hogy a megjelenítési módban megjelenő változásokra reagáljon.

Fontos

Az ModeChanged esemény nem fordul elő a lap kezdeti betöltésekor, ezért az alapértelmezett XAML-nek a felhasználói felületet kell képviselnie, ahogyan az első betöltéskor meg kell jelennie.

Az esemény egyik módja az alkalmazás felhasználói felületének frissítése, hogy a felhasználók az összes tartalmat SinglePane módban tekinthetik meg. A példaalkalmazás például egy elsődleges panelt (a képet) és egy információs panelt tartalmaz.

Tall mód

Ha csak egy panel megjelenítéséhez elegendő hely áll rendelkezésre, áthelyezheti a tartalom tartalmát Pane2Pane1 , hogy a felhasználó görgetve láthassa az összes tartalmat. Így néz ki.

Egyablakos mód

Ne feledje, hogy a MinWideModeWidth és MinTallModeHeight tulajdonságok határozzák meg, mikor változik a megjelenítési mód, így a tulajdonságok értékének módosításával megváltoztathatja, mikor mozog a tartalom a panelek között.

Itt van az ModeChanged eseménykezelő kódja, amely áthelyezi a tartalmat Pane1 és Pane2 között. Beállít egy VisualState-t is annak érdekében, hogy a Wide módban korlátozza a kép szélességét.

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);
        }
    }
}

Kapcsolódó cikkek

• Elrendezés áttekintése
• Osztott nézet