How to Add An Application Bar in Windows Phone 8

Hallo readers, belum bosan belajar windows phone 8 development kan? Kali ini saya akan membahas cara menambah application bar di applikasi windows phone kita. Application bar merupakan sistem kontrol yang dapat kitia gunakan untuk membangun sebuah toolbar pada aplikasi windows phone. Application bar dapat dapat dijadikan pilihan utama ketika ingin mengembangkan panel kontrol yang konsisten dan cepat. Terdapat dua jenis application bar, yaitu berbasis iccon button dan berbasis text menu. Kita juga dapat menggunakan gabungan dari dua kategori tersebut. Applicatin Bar dapat didefinisikan secara global dan lokal (Puja Pramudya, 2011).

Merujuk pada best practice yang ditulis MSDN, ada beberapa hal yang harus kita perhatikan antara lain:

  • Jika suatu task dapat direpresentasikan dengan jelas melalui ikon, gunakan icon button. Jika tidak, gunakan text menu.
  • Ketentuan mengenai opacity : 0 (tidak akan ditampilkan dan content page akan memenuhi layar), 0.5 s.d 1 (akan tampak di layar).
  • Beberapa hal penting untuk penggunaan icon button antara lain : image yang digunakan berwarna putih pada foreground dan transparent menggunakan alpha channel, ukuran image yang digunakan 48×48 dengan ikon utama berukuran 26×26 dan diletakkan di tengah, jangan menggunakan iccon button untuk navigasi back karena sudah disediakan pada hardware.


Global Application Bar

Global Application Bar sangat cocok digunakan untuk aplikasi yang terdiri dari beberapa halaman dan menggunakan satu application bar yang sama. Dengan global application bar ini, kita hanya satu kali mendefinisikan application bar pada App.xaml.

Langkah-langkah membuat global application bar:

  • Buka file App.Xaml dan tambahkan kode berikut ini:

gloapp

  • Buka halaman-halaman yang akan kita tambahkan application bar-nya. Tambahkna kode di bawah ini pada file xaml ya readers

glo

 

 

perhatikan key yang kita tuliskan di App.xaml. Key yang kita deklarasikan di App.xaml itu lah yang akan kita tulis pada deklarasi tiap-tiap halaman xaml yang menggunakan application bar tersebut. Pada kasus diatas, kita beri nama key nya adalah “globalApplicationBar”.

 

  • Tekan F5 untuk mengeksekusi

glo1glo2

Local Application Bar

Dalam local application bar, kita dapat memasukkan application bar yang berbeda untuk tiap halaman yang ada di aplikasi kita. Ada dua cara untuk menambahkan local application bar, yaitu melalui kode maupun xaml.

Pertama-tama, saya akan jelaskan pembuatan local application bar pake kode xaml ya. Langkah-langkahnya adalah sebagai berikut:

  • Buka halaman xaml dan tambahkan kode berikut pada bawah kontainer yang bersifat sebagai root

localappbar

  • Tekan F5 dan lihat hasilnya

local1

Dalam percaobaan-percobaan sebelumnya kita telah membuat application bar yang berupa text menu. Nah, sekarang saatnya saya  akan jelaskan penggunaan icon button pada local application bar. Langkah-langkahnya yaitu:

  • Tambahkan beberapa ikon ke dalam project dengan cara klik kanan pada project dan pilih Add Existing Item. Set property Bulid Action gambar-gambar tersebut menjadi Content. (Visual studio sudah menyediakan ikon-ikon untuk application bar. Kita tinggal buka folder Microsoft SDKs di program files, pilih Windows Phone >> v8.0 >> Icons)

ikon

  • Ganti kode application bar pada file xaml menjadi berikut ini:

kodeikon

  • Tekan F5 dan lihat hasilnya

icon

Selain cara pembuatan application bar di xaml, kita juga bisa menambahkan application bar di kode C# pada halaman *.xaml.cs. Langkahnya adalah sebagai berikut:

  • Ketikkan kode ini di file .cs kita

kodeadd

  • Tekan F5 dan beginilah hasilnya Smile

addkode

Menambahkan Aksi terhadap Application Bar

Langkah-langkah yang sudah kita lakukan di atas hanya menambahkan ikon atau menu item saja pada, untuk menjalankan fungsionalitas, kita perlu menambahkan aksi pada ikon ataupun text menu tersebut. Kita akan coba beri aksi pada tombol add di application bar untuk memunculkan pesan bahwa item berhasil ditambah. Untuk melakukannya, ikuti cara-cara di bawah ini ya readers.

  • Pada xaml ataupun kode di .cs yang kita buat sebelumnya, tambahkan deklarasi aksi dengan menulis kode berikut

aksi

 

  • Setelah membuat deklarasi tersebut, tambahkan fungsionalitas yang diinginkan dalam method tersebut (pada contoh diatas, methodnya bernama aksi_tambah). Pada contoh ini, ketika button tambah di klik, akan muncul pesan bahwa item berhasi di tambah.

aksinya

  • Tekan F5 dan berikut hasilnya

berhasil

sekian tutorial mengenai cara menambahkan application bar. Selamat mencoba Smile

 

Sumber:

Pramudya, Puja. 2011. Membuat Aplikasi Untuk Windows Phone. Yogyakarta : Andi.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s