Membuat Application Bar di Windows Phone

Setelah beberapa hari yang lalu saya membahas tentang Membuat Navigasi Halaman di Windows Phone, kali ini saya akan membahas tentang Membuat Application Bar di Windows Phone

Apa itu Application Bar ?

Application bar merupakan sistem kontrol yang dapat kita gunakan untuk membangun sebuah toolbar pada aplikasi windows phone.

Ada 2 jenis application bar yaitu icon button dan text menu

Membuat Application Bar di Windows Phone

Ada beberapa hal yang perlu kita perhatikan dalam membuat application bar yaitu :

Image yang digunakan sebagai icon berwarna putih untuk foreground dan transparent menggunakan Alpha Channel.
Tidak perlu menambahkan lingkaran, karena lingkaran telah otomatis.
Ukuran icon utama adalah 26x26 dan diletakan di tengah image.
Jangan menggunakan icon button yang telah disediakan pada hardware button.
Gunakan icon button utnuk task yang utama pada aplikasi
Hindari lebih dari 5 icon button
Jika suatu task dapat direpresentasikan dengan jelas melalui icon, 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).

Langkah - langkah Membuat Application Bar di Windows Phone

1. Buka visual studio yang anda punya buat sebuah project windows phone application baru

2. Pada file MainPage.xaml tambahkan script dibawah ini tepat di atas </phone:PhoneApplicationPage>

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">
        <!-- Application bar icon button -->
        <shell:ApplicationBarIconButton x:Name="btn_simpan" IconUri="/Assets/AppBar/save.png" Text="simpan" Click="btn_simpan_Click"/>
        <shell:ApplicationBarIconButton x:Name="btn_bagikan" IconUri="/Assets/AppBar/share.png" Text="bagikan" Click="btn_bagikan_Click"/>
            
        <!-- Application bar text menu -->
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem x:Name="btn_pengaturan" Text="Pengaturan" Click="btn_pengaturan_Click"/>
            <shell:ApplicationBarMenuItem x:Name="btn_tentang" Text="Tentang" Click="btn_tentang_Click"/>
         </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

3. Anda juga bisa membuat application bar melalui behind code dengan cara tambahkan script dibawha ini pada file MainPage.xaml.cs

            ApplicationBar appbar = new ApplicationBar();
            appbar.IsMenuEnabled = true;
            appbar.Opacity = 1.0;
            appbar.Mode = ApplicationBarMode.Default;
            appbar.IsVisible = true;
            
            // icon button
            ApplicationBarIconButton btn_simpan = new ApplicationBarIconButton();
            btn_simpan.Text = "simpan";
            btn_simpan.IconUri = new Uri("/Assets/AppBar/save.png", UriKind.Relative);
            appbar.Buttons.Add(btn_simpan);
            btn_simpan.Click += new EventHandler(btn_simpan_Click);

            ApplicationBarIconButton btn_bagikan = new ApplicationBarIconButton();
            btn_bagikan.Text = "bagikan";
            btn_bagikan.IconUri = new Uri("/Assets/AppBar/share.png", UriKind.Relative);
            appbar.Buttons.Add(btn_bagikan);
            btn_bagikan.Click += new EventHandler(btn_bagikan_Click);


            // text menu
            ApplicationBarMenuItem btn_pengaturan = new ApplicationBarMenuItem();
            btn_pengaturan.Text = "Pengaturan";
            appbar.MenuItems.Add(btn_pengaturan);
            btn_pengaturan.Click += new EventHandler(btn_pengaturan_Click);

            ApplicationBarMenuItem btn_tentang = new ApplicationBarMenuItem();
            btn_tentang.Text = "Tentang";
            appbar.MenuItems.Add(btn_tentang);
            btn_tentang.Click += new EventHandler(btn_tentang_Click);

            this.ApplicationBar = appbar;

4. Pada file MainPage.xaml.cs tambahkan script dibawah ini untuk menghandle event pada icon button dan text menu pada application bar

private void btn_bagikan_Click(object sender, EventArgs e)
{
    MessageBox.Show("Icon Button Bagikan ditekan");
}

private void btn_simpan_Click(object sender, EventArgs e)
{
     MessageBox.Show("Icon Button Simpan ditekan");
}

private void btn_pengaturan_Click(object sender, EventArgs e)
{
     MessageBox.Show("Text menu pengaturan ditekan");
}

private void btn_tentang_Click(object sender, EventArgs e)
{
     MessageBox.Show("Text menu tentang ditekan");
}

5. Jalankan F5 maka akan seperti gambar dibawah ini