Menampilkan Context Menu dengan Hold

Dari pengalaman saya biasanya jika ingin menampilkan menu cukup menampilkan menu di bagian atas aplikasi untuk aplikasi berbasis Dekstop. Tetapi jika berbasis mobile? Yah seperti yang kita ketahui layar mobile cukup sempit jadi kita harus bisa memanfaatkan sebaik mungkin layar mobile kita. Pada awalnya saya berpikir untuk membuat aplikasi yang memiliki sebuah database dimana ada fitur menampilkan data dan jika data tersebut di hold maka akan muncuk menu pilihan mau menghapus atau mau meng-update?. Saya binggung ini fitur apa ya namanya? Setelah saya cari akhirnya dapat juga dan ternyata namanya adalah Context Menu.

Bagaimana membuatnya? Tahapannya cukup gampang, pertama silahkan instal Windows phone Toolkit terlebih dahulu pada project anda. Caranya cukup pilih Tools –> NuGet Package Manager–>Manage Packages for Solution maka akan muncul tampilan seperti dibawah ini.

Setelah Instal, yang perlu anda lakukan selanjutnya adalah meng-copy kode di bawah ini di halaman MainPage.xaml bagian atas.

 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Kemudian, copy kode di bawah ini detelah deklarasi Tools yang ingin anda tambahkan tetapi deklrasinya belum ditutup misal pada pendekralasian Button maka kode di bawah ini berada sebelum </Button>.

<toolkit:ContextMenuService.ContextMenu>
                    <toolkit:ContextMenu IsZoomEnabled="True" x:Name="ContextMenu" >
                        <toolkit:MenuItem Header="Add"  />
                        <toolkit:MenuItem Header="Update" />
                        <toolkit:MenuItem Header="Delete" />
                    </toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

Selesai.. jika program anda jalankan dan anda hold pada tools yang anda tambahkan Menu Item maka nanti akan muncul menu Item yang sudah kita buat yaitu Add, Update dan Delete seperti gambar di bawah ini. Ini bisa anda ubah dengan menambah menu baru atau mengubah menu yang ada atau bisa juga mengurangi menu sesuai kebutuhan anda.

Dan jika anda ingin menambahkan event untuk setiap Menu Itemnya silahkan modifikasi pada tahapan ke 3 dengan menambahkan Click=”Nama_Method” atau jika mau lebih jelas silahkan perhatiakn code di bawah ini.

<toolkit:ContextMenuService.ContextMenu>
                    <toolkit:ContextMenu IsZoomEnabled="True" x:Name="ContextMenu" >
                        <toolkit:MenuItem Header="Add" Click="Opstion_Click" />
                        <toolkit:MenuItem Header="Update" Click="Opstion_Click"/>
                        <toolkit:MenuItem Header="Delete" Click="Opstion_Click"/>
                    </toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

Sekarang tinggal menambahkan method event-nya pada mainpage.xaml.cs

private void Opstion_Click(object sender, RoutedEventArgs e){
            MenuItem menuItem = (MenuItem)sender;
            MessageBox.Show(menuItem.Header.ToString());
}

Selamat Mencoba.. 🙂