Bagikan melalui

Kontrol tampilan terpisah

  • Artikel

Kontrol tampilan terpisah memiliki panel yang dapat diperluas/dapat diciutkan dan area konten.

API Penting: Kelas SplitView

Berikut adalah contoh aplikasi Microsoft Edge menggunakan SplitView untuk menampilkan Hub-nya.

Contoh tampilan pemisahan Microsoft Edge

Area konten tampilan terpisah selalu terlihat. Panel dapat meluaskan dan menciutkan atau tetap dalam keadaan terbuka, dan dapat menyajikannya dari sisi kiri atau kanan jendela aplikasi. Panel memiliki empat mode:

  • Overlay

    Panel disembunyikan hingga dibuka. Saat terbuka, panel melapisi area konten.

  • Inline

    Panel selalu terlihat dan tidak melapisi area konten. Panel dan area konten membagi real estat layar yang tersedia.

  • CompactOverlay

    Bagian sempit panel selalu terlihat dalam mode ini, yang cukup lebar untuk menampilkan ikon. Lebar panel tertutup default adalah 48px, yang dapat dimodifikasi dengan CompactPaneLength. Jika panel dibuka, panel akan melapisi area konten.

  • CompactInline

    Bagian sempit panel selalu terlihat dalam mode ini, yang cukup lebar untuk menampilkan ikon. Lebar panel tertutup default adalah 48px, yang dapat dimodifikasi dengan CompactPaneLength. Jika panel dibuka, panel akan mengurangi ruang yang tersedia untuk konten, mendorong konten keluar dari jalannya.

Apakah ini kontrol yang tepat?

Kontrol tampilan terpisah dapat digunakan untuk membuat pengalaman "laci" di mana pengguna dapat membuka dan menutup panel tambahan. Misalnya, Anda dapat menggunakan SplitView untuk membuat pola daftar/detail .

Jika Anda ingin membuat menu navigasi dengan tombol perluas/ciutkan dan daftar item navigasi, gunakan kontrol NavigationView .

Contoh

Galeri WinUI 2
Galeri WinUI

Jika Anda memiliki aplikasi Galeri WinUI 2 yang terinstal , klik di sini untuk membuka aplikasi dan melihat SplitView beraksi.

Membuat tampilan terpisah

Berikut adalah kontrol SplitView dengan Panel terbuka yang muncul sebaris di samping Konten.

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

Mendapatkan kode sampel

  • Sampel Galeri WinUI 2 - Lihat semua kontrol XAML dalam format interaktif.