Transisi halaman

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, Pembaruan halaman dan Drill, keduanya diwakili oleh subkelas NavigationTransitionInfo.

Buka aplikasi Galeri WinUI 3 dan lihat Transisi Implisit beraksi

Ikon Galeri WinUI 3 Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Muat ulang 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 merasa telah memulai dari awal.

animasi refresh halaman

Animasi refresh halaman diwakili oleh kelas EntranceNavigationTransitionInfo .

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

Nota

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

Bor

Gunakan fitur drill-down saat pengguna menavigasi lebih dalam ke dalam aplikasi, seperti menampilkan informasi lebih lanjut setelah memilih item.

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

animasi penelusuran

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 } );

Menahan

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 membuat transisi sendiri menggunakan Connected Animations atau animasi tampil/sembunyi 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.

  • Last updated on