Windows Phone Tutorial - Membuat Sliding Menu (4) - Mengimplementasikan Swipe Gesture

Oke, ini sudah bagian terakhir dari seri tutorial pembuatan Sliding Menu di Windows Phone. Kalau misalkan Anda sudah mengikuti postingan saya yang sebelumnya, Anda mungkin akan bertanya "Bagaimana mengimplementasikannya dengan cara menggeser layar saja?". Jawabannya adalah dengan menggunakan swipe gesture.

Yang pertama kalian lakukan adalah tambahkan event ManipulationStarted dan ManipulationCompleted di LayoutRoot kalian (kalau di saya nama yang saya kasih untuk event ini adalah StartSlideMenu dan SlideMenuComplete). ManipulationStarted ini akan terjadi apabila user mulai melalukan semacam interaksi pada kontrol ybs. Sedangkan ManipulationCompleted akan terjadi ketika interaksi selesai terjadi. Untuk mempelajari lebih lanjut mengenai event-event ini, silahkan lihat link ini dan ini.

Hasil akhir kodingan XAML kalian akan terlihat sepert ini

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent" ManipulationDelta="SlideMenu" ManipulationStarted="StartSlideMenu" ManipulationCompleted="SlideMenuComplete">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

 ...

Kemudian di code-behindnya tambahkan kodingan berikut ini.

Point currentPoint, initialPoint;

...

private void StartSlideMenu(object sender, ManipulationStartedEventArgs e)
{
   initialPoint.X = e.ManipulationOrigin.X;   
}

private void SlideMenuComplete(object sender, ManipulationCompletedEventArgs e)
{
   var velocities = e.FinalVelocities;
   var lin = velocities.LinearVelocity;
   
   if (lin.X - initialPoint.X >= 750 && Math.Abs(lin.Y - initialPoint.Y) <= 50)
   {
        //Periksa apakah menu tertutup
        //jika iya, Swipe Kanan
        if (!isMenuIn)
        {
           MenuIn.Begin();
        }
   }

   if (initialPoint.X - lin.X >= 750 && Math.Abs(lin.Y - initialPoint.Y) <= 50)
   {
        //Periksa apakah menu terbuka
        //jika iya, Swipe Kiri
        if (isMenuIn)
        {
            MenuOut.Begin();
        }
   }
}

Kodingan akhir kalian akan seperti ini

namespace SlideMenuModule
{
    public partial class MainPage : PhoneApplicationPage
    {

        bool isMenuIn = false;
        Point currentPoint, initialPoint;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            MenuIn.Completed += MenuIn_Completed;
            MenuOut.Completed += MenuOut_Completed;
        }

        void MenuOut_Completed(object sender, EventArgs e)
        {
            isMenuIn = false;
        }

        void MenuIn_Completed(object sender, EventArgs e)
        {
            isMenuIn = true;
        }

        private void Click_Menu(object sender, RoutedEventArgs e)
        {
            if (isMenuIn)
            {
                isMenuIn = false;
                MenuOut.Begin();
            }
            else
            {
                isMenuIn = true;
                MenuIn.Begin();
            }
        }
  
        private void StartSlideMenu(object sender, ManipulationStartedEventArgs e)
        {
            initialPoint.X = e.ManipulationOrigin.X;   
        }

        private void SlideMenuComplete(object sender, ManipulationCompletedEventArgs e)
        {
            var velocities = e.FinalVelocities;
            var lin = velocities.LinearVelocity;

            if (lin.X - initialPoint.X >= 750 && Math.Abs(lin.Y - initialPoint.Y) <= 50)
            {
                //Periksa apakah menu tertutup
                //jika iya, Swipe Kanan
                if (!isMenuIn)
                {
                    MenuIn.Begin();
                }
            }

            if (initialPoint.X - lin.X >= 750 && Math.Abs(lin.Y - initialPoint.Y) <= 50)
            {
                //Periksa apakah menu terbuka
                //jika iya, Swipe Kiri
                if (isMenuIn)
                {
                    MenuOut.Begin();
                }
            }
        }
    }
}

Oke, selamat. Anda sudah membuat Sliding Menu di Windows Phone menggunakan swipe gesture. :)