Bagikan melalui

Transisi halaman

  • Artikel

Transisi halaman menavigasi pengguna antar halaman dalam aplikasi, memberikan umpan balik sebagai hubungan antar halaman. Transisi halaman membantu pengguna memahami apakah mereka berada di bagian atas hierarki navigasi, berpindah di antara halaman saudara, atau menavigasi lebih dalam ke hierarki halaman.

Dua animasi berbeda disediakan untuk navigasi antara halaman dalam aplikasi, Refresh halaman dan Latihan, dan diwakili oleh subkelas NavigationTransitionInfo.

Contoh

Galeri WinUI 2
Galeri WinUI

Jika Aplikasi Galeri WinUI 2 terinstal, klik di sini untuk membuka aplikasi dan lihat Transisi Halaman sedang beraksi.

Refresh halaman

Refresh halaman adalah kombinasi dari animasi slide ke atas dan memudar dalam animasi untuk konten masuk. Gunakan refresh halaman saat pengguna dibawa ke bagian atas tumpukan navigasi, seperti menavigasi antar tab atau item navigasi kiri.

Perasaan yang diinginkan adalah bahwa pengguna telah dimulai kembali.

animasi refresh halaman

Animasi refresh halaman diwakili oleh EntranceNavigationTransitionInfoClass.

// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());

Catatan: Bingkai secara otomatis menggunakan NavigationThemeTransition untuk menganimasikan navigasi antara dua halaman. Secara default, animasi adalah refresh halaman.

Drill

Gunakan latihan saat pengguna menavigasi lebih dalam ke dalam aplikasi, seperti menampilkan informasi selengkapnya setelah memilih item.

Perasaan yang diinginkan adalah bahwa pengguna telah masuk lebih dalam ke dalam aplikasi.

animasi telusuri paling detail

Animasi latihan diwakili oleh kelas DrillInNavigationTransitionInfo.

// Play the drill in animation
myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());

Slide horizontal

Gunakan slide horizontal untuk memperlihatkan bahwa halaman saudara muncul di samping satu sama lain. Kontrol NavigationView secara otomatis menggunakan animasi ini untuk navigasi atas, tetapi jika Anda membangun pengalaman navigasi horizontal Anda sendiri, maka Anda dapat menerapkan slide horizontal dengan SlideNavigationTransitionInfo.

Perasaan yang diinginkan adalah bahwa pengguna menavigasi di antara halaman yang berdekatan satu sama lain.

// Navigate to the right, ie. from LeftPage to RightPage
myFrame.Navigate(typeof(RightPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromRight } );

// Navigate to the left, ie. from RightPage to LeftPage
myFrame.Navigate(typeof(LeftPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromLeft } );

Menyembunyikan

Untuk menghindari pemutaran animasi apa pun selama navigasi, gunakan SuppressNavigationTransitionInfo di tempat subjenis NavigationTransitionInfo lainnya.

// Suppress the default animation
myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());

Menekan animasi berguna jika Anda membangun transisi Anda sendiri menggunakan Animasi Tersambung atau animasi implisit show/hide.

Navigasi mundur

Anda dapat menggunakan Frame.GoBack(NavigationTransitionInfo) untuk memutar transisi tertentu saat menavigasi mundur.

Ini dapat berguna ketika Anda memodifikasi perilaku navigasi secara dinamis berdasarkan ukuran layar; misalnya, dalam skenario daftar/detail responsif.