Dela via

Fönsterdelningskontroll

En delningsvy-kontroll har en utökningsbar/sammanfällbar panel och ett innehållsområde.

Viktiga API:er: SplitView-klass

Här är ett exempel på Microsoft Edge-appen som använder SplitView för att visa sin hubb.

Microsoft Edge exempel på delad vy

Ett delat vyns innehållsområde är alltid synligt. Fönstret kan expandera och komprimera eller förbli i öppet tillstånd och kan visa sig från antingen vänster sida eller höger sida av ett appfönster. Fönstret har fyra lägen:

  • Överlappning

    Fönstret är dolt tills det öppnas. När det är öppet överlagrar panelen innehållsområdet.

  • Inline

    Fönstret är alltid synligt och överlagr inte innehållsområdet. Fönstret och innehållsområdena delar upp den tillgängliga skärmfastigheten.

  • CompactOverlay

    En smal del av fönstret visas alltid i det här läget, vilket är tillräckligt brett för att visa ikoner. Standardbredden för stängda fönster är 48px, som kan ändras med CompactPaneLength. Om panelen öppnas läggs den över innehållsområdet.

  • CompactInline

    En smal del av fönstret visas alltid i det här läget, vilket är tillräckligt brett för att visa ikoner. Standardbredden för stängda fönster är 48px, som kan ändras med CompactPaneLength. Om panelen öppnas, minskar det utrymme som är tillgängligt för innehåll och trycker innehållet ur vägen.

Är det här rätt kontroll?

Kontroll för delad vy kan användas för att skapa en "dragpanel"-upplevelse där användare kan öppna och stänga den kompletterande panelen. Du kan till exempel använda SplitView för att skapa lista/detaljer-mönstret.

Om du vill skapa en navigeringsmeny med en expanderings-/dölj-knapp och en lista med navigeringsobjekt använder du kontrollen Navigeringsvy .

Examples

WinUI 2-galleri
WinUI-galleri

Om du har installerat WinUI 2-galleriappen klickar du här för att öppna appen och ser SplitView i praktiken.

Skapa en delad vy

Här är en SplitView-kontroll med ett öppet fönster som visas infogat bredvid Innehållet.

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

Hämta exempelkoden

  • Last updated on