Delen via

Besturingselement voor gesplitste weergave

Een besturingselement voor gesplitste weergave heeft een uitvouwbaar/samenvouwbaar deelvenster en een inhoudsgebied.

Belangrijke API's: SplitView-klasse

Hier volgt een voorbeeld van de Microsoft Edge-app met behulp van SplitView om de hub weer te geven.

Voorbeeld van gesplitste weergave in Microsoft Edge

Het inhoudsgebied van een gesplitste weergave is altijd zichtbaar. Het deelvenster kan uitvouwen en samenvouwen of in een geopende status blijven en kan zichzelf presenteren aan de linkerkant of aan de rechterkant van een app-venster. Het deelvenster heeft vier modi:

  • Overlappen

    Het deelvenster is verborgen totdat het wordt geopend. Wanneer het deelvenster wordt geopend, wordt het inhoudsgebied overlays.

  • inline-

    Het deelvenster is altijd zichtbaar en overlayt het inhoudsgebied niet. Het deelvenster en de inhoudsgebieden delen de beschikbare schermruimte.

  • CompactOverlay

    Een smal gedeelte van het deelvenster is altijd zichtbaar in deze modus, wat net breed genoeg is om pictogrammen weer te geven. De standaardbreedte van het gesloten deelvenster is 48 pixels, die kan worden gewijzigd met CompactPaneLength. Als het deelvenster wordt geopend, wordt het inhoudsgebied overlays.

  • CompactInline

    Een smal gedeelte van het deelvenster is altijd zichtbaar in deze modus, wat net breed genoeg is om pictogrammen weer te geven. De standaardbreedte van het gesloten deelvenster is 48 pixels, die kan worden gewijzigd met CompactPaneLength. Als het deelvenster wordt geopend, wordt de beschikbare ruimte voor inhoud verkleind, waardoor de inhoud niet meer in de weg wordt gepusht.

Is dit de juiste controle?

Het besturingselement voor gesplitste weergave kan worden gebruikt om elke 'lade'-ervaring te maken waarin gebruikers het aanvullende deelvenster kunnen openen en sluiten. U kunt bijvoorbeeld SplitView gebruiken om het patroon lijst/details te maken.

Als u een navigatiemenu wilt maken met een knop uitvouwen/samenvouwen en een lijst met navigatie-items, gebruikt u het besturingselement NavigationView .

Voorbeelden

WinUI 2 Gallery
WinUI Gallery

Als u de WinUI 2 Gallery-app hebt geïnstalleerd, klikt u hier om de app te openen en de SplitView in actie te zien.

Een gesplitste weergave maken

Hier volgt een SplitView-besturingselement met een geopend deelvenster dat inline wordt weergegeven naast de inhoud.

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

De voorbeeldcode halen

  • Last updated on