Navigasi Halaman dengan Efek Transisi di Windows Phone

Assalamualakum agan semua,,
karna sudah lumayan lama saya tidak memposting, oleh karena itu kali ini saya ingin kembali memposting tentang Navigasi Halaman dengan Efek Transisi di Windows Phone,

Mungkin sebelumnya saya juga pernah memposting tentang Membuat Navigasi Halaman di Windows Phone, tapi pada postingan kali ini akan sedikit berbeda, karena pada postingan kali ini tidak hanya membuat navigasi halaman saja, tapi juga memberikan efek ketika berpindah halaman agar aplikasi kita terlihat lebih menarik :D. Oke langsung saja

Langkah - langkah Navigasi Halaman dengan Efek Transisi di Windows Phone

1. Buat sebuah projek Windows Phone Apps - Blank App

2.  Seperti pada tutorial sebelumnya kita perlu menambahkan Windows Phone Toolkit pada references project kita dengan cara Klik kanan pada References -> Manage NuGet Packages -> Cari Windows Phone Toolkit -> Klik Install

3. Pada file mainpage.xaml tambahkan 1 button dengan script dibawah ini

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Ke Halaman 1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,130,0,0" Width="456" Click="Button_Click"/>

        </Grid>

4. Pada bagian Inisialisasi di mainpage.xaml.cs tambahkan script dibawah ini

            // anda bisa mengganti SlideTransitionMode sesuai dengan keinginan
            NavigationInTransition navigateInTransition = new NavigationInTransition();
            navigateInTransition.Backward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeIn };
            navigateInTransition.Forward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeIn };

            NavigationOutTransition navigateOutTransition = new NavigationOutTransition();
            navigateOutTransition.Backward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeOut };
            navigateOutTransition.Forward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeOut };
            TransitionService.SetNavigationInTransition(this, navigateInTransition);
            TransitionService.SetNavigationOutTransition(this, navigateOutTransition);
Sehingga menjadi

public MainPage()
        {
            InitializeComponent();

            // anda bisa mengganti SlideTransitionMode sesuai dengan keinginan
            NavigationInTransition navigateInTransition = new NavigationInTransition();
            navigateInTransition.Backward = new SlideTransition { Mode = SlideTransitionMode.SlideRightFadeIn };
            navigateInTransition.Forward = new SlideTransition { Mode = SlideTransitionMode.SlideLeftFadeIn };

            NavigationOutTransition navigateOutTransition = new NavigationOutTransition();
            navigateOutTransition.Backward = new SlideTransition { Mode = SlideTransitionMode.SlideRightFadeOut };
            navigateOutTransition.Forward = new SlideTransition { Mode = SlideTransitionMode.SlideRightFadeOut };
            TransitionService.SetNavigationInTransition(this, navigateInTransition);
            TransitionService.SetNavigationOutTransition(this, navigateOutTransition);
        }

5. Pada event button_Click tambahkan script dibawah ini untuk berpindah ke halaman Page1.xaml

NavigationService.Navigate(new Uri("/Page1.xaml", UriKind.Relative));

6. Buat sebuah halaman baru dengan nama Page1.xaml dengan cara Click kanan pada nama Project - Add - New Item - Windows Phone Portrait Page - beri nama Page1.xaml - OK

7. Tambahkan sebuah button pada file Page1.xaml dengan script dibawah ini

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Ke Halaman 1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,130,0,0" Width="456" Click="Button_Click"/>

        </Grid>

8. Pada bagian Inisialisasi di Page1.xaml.cs tambahkan script dibawah ini

// anda bisa mengganti SlideTransitionMode sesuai dengan keinginan
            NavigationInTransition navigateInTransition = new NavigationInTransition();
            navigateInTransition.Backward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeIn };
            navigateInTransition.Forward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeIn };

            NavigationOutTransition navigateOutTransition = new NavigationOutTransition();
            navigateOutTransition.Backward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeOut }; 
            navigateOutTransition.Forward = new SlideTransition { Mode = SlideTransitionMode.SlideDownFadeOut };
            TransitionService.SetNavigationInTransition(this, navigateInTransition);
            TransitionService.SetNavigationOutTransition(this, navigateOutTransition);

9. Pada event button_Click tambahkan script dibawah ini untuk berpindah ke halaman MainPage.xaml

NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));

10. Buka file App.xaml.cs ganti RootFrame = new PhoneApplicationFrame() menjadi RootFrame = new TransitionFrame();

11. Jalankan program tersebut dengan menekan F5 maka akan seperti gambar dibawah ini

Anda bisa mendownload source codenya disini

dan untuk passwordnya disini

Sekian pembahasan tetang Navigasi Halaman dengan Efek Transisi di Windows Phone
Tunggu tutorial menarik lainnya, karena itu kunjungi terus blog ini