Bagikan melalui

Kontrol tampilan terpisah

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 meluas dan menyusut atau tetap dalam keadaan terbuka, dan dapat muncul di sisi kiri atau kanan jendela aplikasi. Panel memiliki empat mode:

  • Overlay

    Panel tersebut disembunyikan sampai dibuka. Saat terbuka, panel melapisi area konten.

  • Sejajar

    Panel selalu terlihat dan tidak melapisi area konten. Panel dan area konten membagi ruang 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, itu akan menutupi 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 split view dapat digunakan untuk menciptakan pengalaman drawer 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 .

Examples

WinUI untuk Galeri UWP
Galeri WinUI

Jika Anda telah menginstal aplikasi WinUI untuk Galeri UWP , klik di sini untuk membuka aplikasi dan lihat 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>

Dapatkan kode contoh

  • Last updated on