APPLICTION BAR

Pada kesempatan kali ini kita akan mempelajari mengenai aplication bar,ada 2 hal yang akan kita pelajari pada kesempatan kali ini yaitu :

1.      Aplication Bar Icon Button

2.      Aplocation Bar Menu Item

Jadi bisa di bilang aplication bar ini selain dapat menapilkan icon dan menu pada windows phone ,untuk lebih lanjut kita langsung praktekan saja ya,

Seperti biasa buka aplikasi microsoft windows phone 2010 lau pilih option C# pada desktop di kiri lalu lihat desktop yang tengah dan pilih windows phone application setelah itu cari create directory from solution dan checklist lalu tunggu beberapa saat aplikasi akan meloading template yang dipilih. Jangan lupa memberi nama pada project yang akan digunakan untuk saat ini saya akan memberi nama aplication bar. Setelah itu kita cari properties dan solution explorer.

Setelah project terbuka terlebih dahulu kita membuat folder image yang akan di tampilkan dan akan di kontrol pada project kali ini,cara membuat folder baru ialah :

1.    Sorot nama project kita pada solution explorer

2.    Kemudian klik kanan dan pilih add folder

3.    Setelah itu beri nama folder “images”,seperti pada gambar di bawah ini

 Setelah membuat folder baru kita bikin lagi folder untuk icon dan menu dengan nama aplication bar,di situ pula kita menyimpan image yang akan kita gunakan untuk project. caranya sebagai berikut :

1.    Sorot folder image kita pada solution explorer

2.    Kemudian klik kanan dan pilih add folder

3.    Kemudian pilih add exitingitem untuk memasukan icon dan menu item serta gambar yang akan kita gunakan pada project kali ini

Setelah folder dan image kita masukan,barulah kita buat project nya,

Untuk menampilkan icon dan menu item kita tinggal mengatur nya seperti pada gambar di bawah ini

<!--Sample code showing usage of ApplicationBar--> <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> <shell:ApplicationBarIconButton x:Name="add" IconUri="/images/appbar/appbar.add.rest.png" Text="add" Click="add_Click" /> <shell:ApplicationBarIconButton x:Name="cancel" IconUri="/Images/appbar/appbar.cancel.rest.png" Text="cancel" Click="cancel_Click" /> <shell:ApplicationBarIconButton x:Name="check" IconUri="/images/appbar/appbar.check.rest.png" Text="check" Click="check_Click" /> <shell:ApplicationBarIconButton x:Name="download" IconUri="/Images/appbar/appbar.download.rest.png" Text="download" Click="download_Click" /> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem x:Name="menuitem1" Text="PROFIL" Click="menuitem1_Click" /> <shell:ApplicationBarMenuItem x:Name="menuitem2" Text="GALLERY" Click="menuitem2_Click" /> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar> </phone:PhoneApplicationPage>

 

Inilah hasil setelah kita atur koding nya sama dengan yang di atas :

 

MENU ITEM 1

Nah sekarang untuk membuat icon dan menu item itu berfungsi kita tinggal mengatur nya pada mainpage.xaml.cs.Menu item 1 akan kita fungsikan untuk menampilkan profil si pembuat projetc,caranya kita buat item baru dengan nama “menu1.xaml”,keudian isi konten nya seperti di bawah ini :

Setelah itu atur navigate uri pada mainpage.xaml.cs nya agar menu 1 menampilkan profil

private void menuitem1_Click(object sender, EventArgs e)         {             NavigationService.Navigate(new Uri("/images/menu1.xaml", UriKind.Relative));         }

 

Nah setelah kita ketikan itu maka hasilnya pun menu item 1 setelah di klik akan muncul seperti di bawah ini :

 

Begitu juga pada menu item dan icon yang lain seperti itu,kita membuat page tujuannya terlebih dahulu kemudian kita atur pada mainpage.xaml.cs menu item atau icon ini akan kita hubungkan kemana.

MENU ITEM 2

Seperti yang sebelumnya kita buat ite baru dan beri nama tes saja,setelah itu atur konten nya seperti di bawah ini :

 

Setelah itu kita atur pada mainpage.xaml.cs agar menu 2 setelah di klik akan menampilkan gallery

private void menuitem2_Click(object sender, EventArgs e)         {             NavigationService.Navigate(new Uri("/images/tes.xaml", UriKind.Relative));         }

 

Inilah hasil menu 2 setelah di klik

 

ICON ADD

Koding pada mainpage.xaml.cs

private void menuitem2_Click(object sender, EventArgs e)         {             NavigationService.Navigate(new Uri("/images/iconadd.xaml", UriKind.Relative));         }

 

Tampilan project setelah di klik

 

ICON DOWNLOAD

Koding pada mainpage.xaml.cs

private void menuitem2_Click(object sender, EventArgs e)         {             NavigationService.Navigate(new Uri("/images/downloadicon.xaml", UriKind.Relative));         }

 

Tampilan project setelah di klik

 

Begitulah seterus nya pada ICON CANCEL dan ICON CHECK,

Selamat mencoba dan semoga bermanfaat ya J