Udostępnij przez

Kontrolka widoku podzielonego

Element sterujący widokiem podzielonym ma rozszerzalny/zwijalny panel i obszar zawartości.

Ważne interfejsy API: SplitView class

Oto przykład aplikacji Microsoft Edge korzystającej z widoku SplitView w celu wyświetlenia centrum.

Przykład widoku podzielonego przeglądarki Microsoft Edge

Obszar zawartości widoku podzielonego jest zawsze widoczny. Okienko może się rozwinąć lub zwinąć, pozostać otwarte, a także pojawiać się z lewej lub prawej strony okna aplikacji. Okienko ma cztery tryby:

  • Pokrycie

    Okienko jest ukryte do momentu otwarcia. Po otwarciu okienko zakrywa obszar zawartości.

  • Liniowy

    Okienko jest zawsze widoczne i nie zasłania obszaru zawartości. Panele i obszary zawartości dzielą dostępną powierzchnię ekranu.

  • CompactOverlay

    W tym trybie jest zawsze widoczna zawężona część okienka, która jest wystarczająco szeroka, aby wyświetlić ikony. Domyślna zamknięta szerokość okienka to 48 pikseli, którą można zmodyfikować za pomocą CompactPaneLength. Jeśli okienko zostanie otwarte, będzie nakładać się na obszar zawartości.

  • CompactInline

    W tym trybie jest zawsze widoczna zawężona część okienka, która jest wystarczająco szeroka, aby wyświetlić ikony. Domyślna zamknięta szerokość okienka to 48 pikseli, którą można zmodyfikować za pomocą CompactPaneLength polecenia. Jeśli okienko zostanie otwarte, zmniejszy to ilość miejsca dostępnego dla zawartości, przesuwając ją na bok.

Czy jest to właściwa kontrola?

Kontrolka widoku podzielonego może służyć do tworzenia dowolnego interfejsu "szuflady", w którym użytkownicy mogą otwierać i zamykać okienko uzupełniające. Na przykład możesz użyć widoku SplitView, aby utworzyć wzorzec listy/szczegółów .

Jeśli chcesz utworzyć menu nawigacji z przyciskiem rozwijania/zwijania i listą elementów nawigacji, użyj kontrolki NavigationView .

Przykłady

WinUI dla galerii platformy UWP
Galeria WinUI

Jeśli masz zainstalowaną aplikację WinUI for UWP Gallery , kliknij tutaj, aby otworzyć aplikację i zobaczyć działanie SplitView.

Tworzenie widoku podzielonego

Poniżej znajduje się kontrolka SplitView z otwartym panelem wyświetlanym w linii obok Zawartości.

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

Pobieranie przykładowego kodu

  • Last updated on