Megosztás a következőn keresztül:


Megosztott nézet vezérlő

Az osztott nézet vezérlőelemek kibontható/összecsukható panelt és tartalomterületet tartalmaznak.

Fontos API-k: SplitView osztály

Íme egy példa a Microsoft Edge-alkalmazásra, amely a SplitView használatával jeleníti meg a központot.

Példa a Microsoft Edge osztott nézetére

Az osztott nézet tartalomterülete mindig látható. Az ablaktábla kibontható, összecsukható vagy nyitott állapotban maradhat, és az alkalmazásablak bal vagy jobb oldaláról is megjelenítheti magát. A panel négy módból áll:

  • Átfedés

    A panel a megnyitásig rejtve van. Amikor meg van nyitva, az ablaktábla átfedi a tartalomterületet.

  • beágyazott

    A panel mindig látható, és nem fedi át a tartalomterületet. A panel és a tartalomterület elosztja az elérhető képernyőterületet.

  • CompactOverlay

    A panel egy keskeny része mindig látható ebben a módban, amely elég széles ahhoz, hogy ikonokat jelenítsen meg. Az alapértelmezett zárt ablaktábla szélessége 48px, amely a következővel CompactPaneLengthmódosítható: . Ha a panel meg van nyitva, az átfedi a tartalomterületet.

  • CompactInline

    A panel egy keskeny része mindig látható ebben a módban, amely elég széles ahhoz, hogy ikonokat jelenítsen meg. Az alapértelmezett zárt ablaktábla szélessége 48px, amely a következővel CompactPaneLengthmódosítható: . Ha a panel meg van nyitva, csökkenti a tartalom számára rendelkezésre álló helyet, és a tartalmat az útból kiszorítja.

Ez a megfelelő vezérlő?

Az osztott nézet vezérlőelem bármilyen "csúszka" felület létrehozásához használható, ahol a felhasználók megnyithatják és bezárhatják a kiegészítő panelt. A SplitView használatával például létrehozhatja a lista/részletek mintáját.

Ha egy navigációs menüt szeretne létrehozni egy kibontás/összecsukás gombbal és a navigációs elemek listájával, használja a NavigationView vezérlőt.

Osztott nézet létrehozása

Itt látható egy SplitView-vezérlő, amelyen egy megnyitott ablaktábla jelenik meg a Tartalom mellett.

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

A mintakód lekérése