"Cerita 11 | Windows Phone - 6 Desember 2013"

Pada hari Jumat kemarin tanggal 6 Desember 2013, saya latihan Pemrograman Windows Phone. Dengan video yang membahas tentang Application Bar. Application Bar pada video ini terdiri dari dua poin pembahasan yaitu :

 

Application Bar

1.    Application Bar Icon Button

2.    Application Bar Menu Item

1.    Application Bar Icon Button

Yaitu sebuah tempat button atau item lainnya akan diletakkan, Application Bar itu berbentuk simbol yang apabila di click akan melakukan fungsinya. Penempatan buttonnya pun tidak boleh menghalangi tampilan, penempatan yang ideal untuk Button adalah diletakkan dibawah, bukan ditengah-tengah tampilan. Untuk
Application Bar maksimal 4 Button dan Application Menu Item maksimal 12. Pada Visual Studio Windows Phone ternyata sudah menyediakan button design untuk Application Bar Icon Button, letaknya di lokasi kita menginstal Visual studio windos phone contohnya seperti gambar dibawah ini :

Letaknya di Windows Explorer -> Computer -> Local Disk (C:) -> Program Files -> Microsoft SDKs -> Windows Phone -> v71 -> Icons.
Setelah itu kita pilih folder dark sebagai contohnya lalu di dalamnya ada banyak gambar icon seperti gambar di bawah ini :

 

Setelah itu kita tambahkan Button dengan icon seperti pada gambar di atas ini, tetapi sebelumnya click kanan pada project kita lalu Add -> New Folder dan berinama folder Images setelah itu bikin folder lagi didalamnya untuk mengorganisir Application Bar dan berinama foldernya AppBar, untuk mengetahui folder ini khusus untuk AppBar saja. Lalu di lokasi gambar icon kita pilih beberapa saja misalnya seperti ini :

Caranya kita bisa mendrag gambar icon ke folder AppBar atau mengcopy paste ke folder AppBar sehingga ada di dalam foldernya seperti gambar dibawah ini :

Kemudian atur image Buid Action di Properties, ubah Resource ke Content untuk semua icon nya karena kalau tidak di ubah tampilan iconnya tidak akan muncul. Setelah itu kita pasangkan caranya, pada MainPage.Xaml Visual Studio 2010 ada commend scrip paling bawah seperti pada gambar di bawah ini :

Pada scrip commend yang ditandai seperti gambar di atas ubah menjadi Uncommend seperti gambar dibawah ini :

 

 Dan muncul tampilan :

 

 Ubah kembali scrip di atas menjadi :

Setelah itu  addAb di properties -> Events -> Click. Click 2x hingga masuk ke MainPage.xaml.cs juga di cancelAb di properties -> Events -> Click. Click 2x hingga masuk ke MainPage.xaml.cs lalu di Mainpage.xaml tambahkan scrip seperti yang sudah ditandai dibawah ini :

Lalu di menuItem1 di properties -> Events -> Click. Click 2x hingga muncul di MainPage.xaml.cs begitu juga dengan menuItem2 di properties -> Events -> Click. Click 2x hingga muncul di MainPage.xaml.cs untuk lebih jelas tampilan MainPage.xaml.cs nya seperti ini :

Selanjutnya di MainPage.xaml tambahkan scrip seperti gambar dibawah ini :

 

Nah setelah dicoba tanpa scrip yang dilingkari di atas hasilnya error, tetapi setelah ditambah scrip yang dilingkari seperti gambar di atas hasilnya setelah di run untuk dijalnkan ternyata berhasil dan tampilan pada design emulator Windows Phone nya seperti gambar dibawah ini :

Dari gambar design Windows Phone tersebut nampak ada dua Application Bar Icon Button tepat seperti yang telah scrip yang telah kita masukan.

Ada dua Application Bar Menu Item, yaitu menu 1 dan menu 2. Selanjutnya kita tambahkan Application Bar Icon Button tetapi, maksimal empat Application Bar Icon Button pada Windows Phone. Jika ingin menambahkan maka scripnya harus ditambahkan seperti gambar di bawah ini :

Lalu kita run, dan hasilnya seperti gambar di bawah ini :

Sudah muncul empat Application Bar Icon Button yang telah kita tambahkan dengan script tersebut.

Sekian pembahasan video pembelajaran, Pemrograman Mobile dari saya mudah-mudahan bermanfaat  sekian dan terimakasih.