Application Bar

Assalamu’alaikum Wr. Wb

Konniciwa minna, bertemu lagi dengan saya, bagaimana kabar agan-agan semua? Sehat? Galau? Hahaha semoga agan-agan selalu diberikan kesehatan dan kebahagiaan ya….. amiiin!

Kali ini saya kembali hadir pada tutorial lanjutan windows phone, tema kali ini adalah ApplicationBar, Terdapat 2 Element Penting yang akan kita pelajari dalam materi tutorial kali ini, Yakni :

1.       Application Bar Icon Button

2.       Application Bar Menu Item

Kali ini berbeda dengan sebelumnya ya gan, apabila kita ingin memasukkan element button maka kita tinggal men-drag & drop element button dari Toolbox ke dalam design, nah kali ini kita akan sedikit belajar menggunakan Tool design yang sudah disediakan oleh userinterface design dari windows phone2 (visual studio 2010/2012). Bisa dilihat dari gambar header diatas terdapat 4 menu button yang berbeda fungsi. Nah, kali ini kita akan sedikit belajar mengenai itu. Oke, Langsung saja ke TKP

Nah, seperti yang agan-agan lihat pada gambar diatas, terdapat 4 Icon button dan memang maksimal hanya bisa menampilkan 4 Icon Button pada Windows Phone, dan terdapat 12 Menu Item dan maksimal hanya bisa menampilkan 12 Menu Item pada Windows Phone.

Nah gan, sudah ta kan gambarannya seperti apa? Dan aplikasi ini yang akan saya berikan pada agan untuk tutorial kali ini.

1. New Project (ctrl+shift+N)

2. Pilih windows Phone App + Visual C#

3. Beri nama project  “ApplicationBar” Name project jangan lupa samakan dengan Solution Name

4. Lalu browse dan pilih dimana kita akan menyimpan Folder Project aplikasi yang akan kita buat.

5. Lalu klik OK dan pilih Windows OS 7.1 lalu klik OK

Seperti yang dilihat pada gambar diatas, kita butuh 4 Icon Button, cara agar bisa memasukkan Icon Button kita tinggal mengambilnya, karena SDK 7 sudah menyediakan tempatnya, atau apabila agan-agan ingin lebih bervariasi, agan-agan bisa mendownloadnya lewat paman google dengan kata kunci “Application Bar Icon Button Windows Phone” .

Jika kalian ingin tahu dimana lokasi Microsoft SDK menyediakan icon button silahkan ikuti cara seperti gambar dibawah ini :

Buka Local Disk (C) -> Program Files (x86) -> Microsoft SDKs -> Windows Phone -> v 7.1 -> dark

Atau apabila agan-agan ingin beda silahkan pilih sesuai selera agan masing-masing. J

Sebelum itu, kita harus membuat folder dulu pada aplikasi yang akan kita buat, lihat seprti gambar dibawah ini.

Beri nama “Images” , samakan dengan saya dulu ya gan , nanti kalo agan sudah bisa agan bisa sesuka kalian memberikan nama apa. Heheheh

 Da lalu untuk lebih rapih lagi didalam Folder “Images” tadi yang kita buat, buat lagi sebuah folder dengan nama “AppBar”, agar lebuh terorganisir saja.

 Setelah itu, buka kembali folder yang menyimpan Icon Button tadi, pilih 4 Icon Button :

 Appbar.add.rest

 Appbar.cancel.rest

 Appbar.check.rest

 Appbar.download.rest

 Lalu kopikan ke dalam folder “AppBar” di dalam folder “Images” , atau biisa juga di Drag & Drop kedalam  folder “AppBar”. Setelah itu, kita atur Build Actionnya itu Harus Content, bisa di atur pada Properties. Ingat  ya gan!, keempat Icon Button itu Build Actionnya harus Content.

 Apabila diantara Agan-agan ada yg menggunakan Visual Stidio 2010, maka sudah disediakan kode untuk  menampilkan AppBar, seperti gambar dibawah ini

 Namun, kode tersebut masih dalam bentuk komen. Dan apabila agan-agan ada yang memakai Visual Studio  2012, maka agan perlu mengetik kodenya hehehe , silahkan ketikkan kode seperti gambar dibawah ini.

 Dan kebetulan disini saya hanya menggunakan 2 Menu Item, kalian bisa mengikuti saya atau ingin  bereksperimen lebih dari 2 Menu Item, itu akan lebih bagus. Ketikkan koding dibawah ini.

  Dan jalankan Emulator 7.1 dan hasilnya akan seperti gambar dibawah ini. 

 Dan akan terdapat 2 Menu Item.

 Dan selanjutnya kita akan memberikan NavigationPage pada Menu 1 dan Menu 2, yaitu caranya :

1.        Buat Sebuah Folder Di ApplicationBar dengan nama “Pages”

2.        Klik Kanan pada Folder “Pages”, lalu pilih New Item

3.        Buat 2 Page Dengan nama Page2 dan Page3 Buatnya Satu-Satu ya gan!

4.       Ketikkan Kode Seperti pada Gambar dibawah ini pada MainPage.xaml.cs

       Fungsi koding itu adalah untuk memberikan Link pada Menu Item yang kita buat tadi. Dan ketika Emulator  Dijalankan, Ketika Kita mengklik Menu Item 1 maka kita akan pergi ke Page2, dan apabila kita mengklik  Menu 2 maka kita akan masuk ke Page3 yang kita buat pada folder “Pages”. 

       Oke Mungkin Hanya Sekian Tutorial yang dapat saya berikan, dan apabila banyak kekurangan dari segi  penyampaian dan dalam segi pengucapan kata-kata, saya pribadi mohon maaf sebesar-besarnya. Mungkin  kita akan bertemu kembali pada Tutorial-tutorial selanjutnya, jangan Lupa berkunjung di Blog Saya ya  

       Wassalamu’alaikum Wr. Wb