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
-
-
hindari lebih dari 5 icon button
Dan untuk text menu perhatikan hal-hal sebagai berikut :
Baik,untuk memulai latihan persiapkan tools sebagai berikut :
Let’s get started.
Pertama buat projectnya dulu, sementara ini pilih saja Windows Phone Application
Tambahkan resource buat icon button, saya mengambil dari resource pada link download diatas. Jangan lupa di properties, Build Actionnya di set menjadi Content.
Untuk menambahkan local app bar menggunakan xaml . Jangan lupa tambahkan mark-up berikut pada deklarasi library yang digunakan :
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.
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.