Assalamualaikum Wr.Wb

                kali ini saya akan kembali memposting tugas mingguan saya yang berkaitan dengan  matakuliah Advanced Visual Programming (Windows Phone). Kali ini saya akan menyampaikan beberapa materi tentang Windows phone yang mengenai Application Bar. Apa sih application bar itu??

                Sebenarnya saya kurang begitu tau definisi lengkap tentang aplikasi bar itu, tapi kurang jelasnya yang aku tau sih, Aplikasi bar itu merupakan sebuah bar atau tempat untuk menyimpan sebuah button atau item. Untuk lebih jelasnya kita akan langsung pada project….

                Sama seperti yang sebelum-sebelumnya, saat kita akan membuaka atau mengoprasikan aplikasi windows phone. Kita akan mengikuti langkah-langkah untuk membuat file baru. ( jika teman-teman belum tau, mungkin bisa melihat di dokumen blog saya sebelum-sebelumnya).

                Kali ini kita akan membuat new file dengan nama project “ApplicationBar2” , tapi terserah temen-temen ingin menamakan name projectnya seperti apa. Setelah itu akan muncul  file  MainPage.xaml ,  ini merupakan file utama project ini. 

                Sebelum kita mengisika item-item dan codding-nya, terlebih dahulu ikuti langkah-langkah berikut :

Tapi sebelum kita akan meng-eksport pada project, terlebih dahulu kita kan membuat new folder pada project-nya. Mungkin teman-teman sudah pada tau cara membuat new folder-nya tapi untuk lebih jelasnya saya akan mengulang kembali melalui gambar dibawah ini.

Jangan lupa nama foldernya yaitu “Images”. Setelah itu kita akan membuat folder baru lagi pada folder Images ini. Caranya sama dengan diatas, tapi bedanya apabila tadi kita mengklik kanan pada folder ApplicationBar2, nah sekarang  kita akan  mengklik kanan pada folder Images-nya. Jangan lupa juga kita akan memberi  nama pada folder ke2 ini dengan nama “AppBar. Guna dari folder AppBar ini yaitu untuk mengorganisir images yang khusus untuk aplikasi bar saja.  Setelah itu kita akan mengcopy icon-icon yang telah kita pilih sebelumnya dan memindahkan ke dalam folder AppBar.

Caranya yaitu :

Sekarang kita akan mengatur Build Ection-nya, apabila pada project teman-teman build actionnya masih dalam kondisi “Resource”, maka kita akan mengubahnya menjadi “Content”. Caranya yaitu :

Sekarang kita akan memasang icon-icon itu pada bar-nya. Pada aplikasi Microsoft Visual windows phone 2010,  menu bar-nya telah disiapkan, namun codding-nya masih dalam bentuk coment. Untuk lebih jelasnya, teman-teman bisa lihat pada gambar dibawah ini.

Sekarang kita akan menghapus tanda coment pada coding tersebut, sehingga tampilannya akan seperti pada gambar dibawah ini.

Sekarang kita tinggal memasukan codding untuk memunculkan gambar iconnya pada bar tersebut. Teman-teman tinggal mengisikan coding seperti pada gambar dibawah ini.

Maka hasilnya akan seperti pada gambar dibawah ini

Tapi belum cukup sampai disini project yang saya buat. Sekarang saya akan membuat icon button tersebut dapat meng-link atau berfungsi saat saya mengkliknya.

Langkah pertama yaitu , saya akan membuat folder baru lagi pada file ApplicationBar2 dan nama foledernya yaitu “Views” setelah itu saya akan membuat item baru pada folder Views tersebut, caranya lihat pada gambar dibawah ini

 

Maka akan mencul file seperti di bawah ini

Saya akan membuat beberapa item file baru seperti :

               

                Setelah teman-teman membuat ke 8 file xaml-nya, sekarang saya akan memasukan codding untuk meng-link ke halaman selanjutnya. Caranya buka file MainPage.xaml.cs, dan isikan codding seperti pada gambar dibawah ini

                Gambar diatas merupkan coding yang harus di masukan untuk meng-link icon button.  Sekarang    kita akan membuka file Add.xaml. Krna ada 8 event handler yang telah kita buat, maka ke 8 icon button tersebut harus diisi dengan coding seperti diatas.

                Sekarang kita akan memasukan gambar pada masing-masing file yang telah kita buat .sebagai contohnya, pada file Add.xaml ini, saya akan memasukan gambar. Tapi teman-teman jangan lupa meng-eksport gambar terlebih dahulu ke dalam project teman-teman, dan jangn lupa teman-teman juga harus membuat folder baru untuk menyimpan gambar-nya. Teman-teman hanya perlu membuat folder baru di dalam folder Images yang telah kita buat selanjutnya dan terserah teman-teman ingin menamakan folder gambar ke2 tersebut apa. Kalau saya sih, menakannya “gambar”.jadi pada folder Images yang telah saya dan teman-teman buat terdapat 2 folder, yaitu folder AppBar dan gambar. Sekarang teman-teman tinggal memasukan gambar yang telah kalian pilih (bebas kok gambarnya).

                Setelah itu saya akan memasukan gambar-gambar –nya. Cara memasukan gambar yaitu :

Gambar diatas merupakan tampilan dari file add, maksudnya apa bila saya mengklik icon button Add maka saya akan meng-link ke file add, Begitu pula selanjutnya pada icon button yang telah dibuat.

Sekian tutorial yang bisa saya buat, kurang lebihnya mohon dimaafkan, karna saya masih dalam proses pembelajarn juga sih.  Semoga tutorial ini dapat bermanfaat untuk para pembaca sekalian.  Sampai ketemu di postingan-postingan saya selanjutnya yaa…..

Wassalamualikum Wr.Wb