Transisi halaman

  • Artikel

Transisi halaman menavigasi pengguna antar halaman dalam aplikasi, memberikan umpan balik sebagai hubungan antara 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 antar halaman dalam aplikasi, Refresh halaman dan Latihan, dan diwakili oleh subkelas NavigationTransitionInfo.

Contoh

Galeri WinUI 2
Galeri WinUI

Jika Anda memiliki aplikasi Galeri WinUI 2 yang terinstal, klik di sini untuk membuka aplikasi dan lihat Transisi Halaman beraksi.

Refresh halaman

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

Perasaan yang diinginkan adalah bahwa pengguna telah dimulai dari awal.

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 penelusuran 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 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 sebagai pengganti 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 perlihatkan/sembunyikan implisit.

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.