Udostępnij przez

Kontrolka widoku podzielonego

Kontrolka widoku podzielonego ma rozszerzalne/zwijane okienko i obszar zawartości.

Ważne interfejsy API: SplitView, klasa

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 rozwinąć i zwinąć lub pozostać w stanie otwartym i może przedstawić się z lewej lub prawej strony okna aplikacji. Okienko ma cztery tryby:

  • Pokrycie

    Okienko jest ukryte do momentu otwarcia. Po otwarciu okienko nakłada obszar zawartości.

  • Liniowy

    Okienko jest zawsze widoczne i nie nakłada obszaru zawartości. Okienko i obszary zawartości dzielą dostępne nieruchomości 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ą CompactPaneLengthpolecenia . Jeśli okienko zostanie otwarte, spowoduje to nakładanie obszaru 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ą CompactPaneLengthpolecenia . Jeśli okienko zostanie otwarte, zmniejszy to ilość miejsca dostępnego dla zawartości, wypychając zawartość ze swojej strony.

Czy jest to właściwa kontrola?

Kontrolka widoku podzielonego może służyć do tworzenia dowolnego środowiska "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

Galeria WinUI 2
Galeria WinUI

Jeśli masz zainstalowaną aplikację Galeria WinUI 2 , kliknij tutaj, aby otworzyć aplikację i zobaczyć element SplitView w akcji.

Tworzenie widoku podzielonego

Oto kontrolka SplitView z otwartym okienkiem wyświetlanym w tekście obok pozycji Zawartość.

<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