Local Application Bar pada Windows Phone

Application bar merupakan sistem kontrol yang dapat kita gunakan untuk membangun sebuah toolbar pada aplikasi windows phone. Terdapat dua jenis application bar yang dapat kita gunakan, yaitu berbasis icon button dan berbasis text menu. Application bar dapat kita definisikan untuk satu aplikasi (global) atau hanya pada halaman tertentu saja (lokal).

Merujuk pada best practice yang ditulis di msdn, ada hal-hal yang harus kita perhatikan, yaitu :

  • Jika suatu task dapat direpresentasikan dengan jelas melalui icon, gunakan icon button, jika tidak, gunakan text menu
  • Gunakan app bar untuk membuat sistem menu agar konsisten dengan user experience seluruh aplikasi pada device
  • Opacity yang sebaiknya dipergunakan adalah 0 (akan tidak tampilkan, dan content page akan memenuhi screen layar), 0.5 dan 1 (akan tampak dilayar)

Untuk icon button hal-hal yang sebaiknya diperhatikan adalah :

  • Image yang digunakan berwarna putih pada foreground dan transparent menggunakan alpha channel
  • Tidak perlu menambahkan lingkaran pada border image, hal itu sudah otomatis
  • Ukuran image yang digunakan 48 x 48 dengan icon utama berukuran 26 x 26 dan diletakkan di tengah image
  • Jangan gunakan icon button untuk navigasi back, sudah disediakan pada hardware
  • Gunakan icon button, untuk task yang utama pada aplikasi
  • Contoh icon dapat diperoleh disini : Microsoft Download Center
  • hindari lebih dari 5 icon button

Dan untuk text menu perhatikan hal-hal sebagai berikut :

  • hindari menggunakan lebih dari 5 text menu
  • usahakan menggunakan text antara 14- 20 karakter
  • gunakan lowercase

Baik,untuk memulai latihan persiapkan tools sebagai berikut :

  • Visual Studi0 2010 ( saya menggunakan Express for Windows Phone)
  • Windows Phone 7 emulator
  • Silverlight 4

Let’s get started.

Pertama buat projectnya dulu, sementara ini pilih saja Windows Phone Application

image

Tambahkan resource buat icon button, saya mengambil dari resource pada link download diatas. Jangan lupa di properties, Build Actionnya di set menjadi Content.

image

Untuk menambahkan local app bar menggunakan xaml . Jangan lupa tambahkan mark-up berikut pada deklarasi library yang digunakan :

image

Untuk kode C# nya seperti ini :

public MainPage()
{
InitializeComponent();

ApplicationBar appBar = new ApplicationBar();
appBar.Opacity = 1;
ApplicationBarIconButton appBarIcon = new ApplicationBarIconButton()
{ IconUri=new Uri(“/appbar.add.rest.png”,UriKind.Relative),Text=”button 1″};
ApplicationBarIconButton appBarIcon1 = new ApplicationBarIconButton()
{ IconUri = new Uri(“/appbar.back.rest.png”, UriKind.Relative), Text = “button2” };
ApplicationBarIconButton appBarIcon2 = new ApplicationBarIconButton()
{IconUri = new Uri(“/appbar.cancel.rest.png”, UriKind.Relative),Text=”button3″};
appBar.Buttons.Add(appBarIcon);
appBar.Buttons.Add(appBarIcon1);
appBar.Buttons.Add(appBarIcon2);
this.ApplicationBar = appBar;
}

Tekan F5 dan lihat hasilnya di emulator.

image

Setelah ini, bisa menambahkan event handler untuk menangkap aksi yang akan dilakukan ketika icon di tekan. Next post, kita akan coba lihat jika app bar ingin ditempatkan di global resource.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s