Application bar WP7

Pada kesempatan kali ini saya akan berbagi mengenai application bar pada windows phone 7. Terdapat dua pendekatan dalam implementasi app bar, pertama dengan icon button dan text menu.

IC531092

Sekarang mari kita implementasikan penggunaan app bar ini.

1. Buatlah project bernama app bar sample

image

 

2. Pada halaman MainPage buatlah tampilan seperti gambar dibawah ini

image

Buatlah function ini pada halaman MainPage.xaml.cs. oiya, dan gunakan library microsoft.phone.shell;.

public MainPage()

{

InitializeComponent();

ApplicationBar appBar = new ApplicationBar();

appBar.IsMenuEnabled = true;

appBar.Buttons.add(new ApplicationBarIconButton() {Text=”home” IconUri= new Uri(“home.png”, UriKind.Relative)});

appBar.Buttons.add(new ApplicationBarIconButton() {Text=”control panel” IconUri= new Uri(“control-panel.png”, UriKind.Relative)});

appBar.Buttons.add(new ApplicationBarIconButton() {Text=”info” IconUri= new Uri(“info.png”, UriKind.Relative)});

this.ApplicationBar = appBar;

}

Pada sebuah kasus Anda membutuhkan app bar yang sama pada semua halaman aplikasi Anda bukan? tenang saja, ini dapat Anda lakukan. berikut caranya:

1. Buatlah kode dibawah ini pada App.xaml

<Application.Resources>

        <shell:ApplicationBar x:Name=”globalApplicationbar” x:Key=”globalApplicationbar” IsVisible=”True” IsMenuEnabled=”True”>
            <shell:ApplicationBarIconButton IconUri=”home.png” Text=”Home”/>
                <shell:ApplicationBarIconButton IconUri=”Control-Panel.png” Text=”Control Panel”/>
                <shell:ApplicationBarIconButton IconUri=”info.png” Text=”Info”/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text=”MenuItem 1″/>
                <shell:ApplicationBarMenuItem Text=”MenuItem 2″/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
 
    </Application.Resources>

2. Tambahkan ApplicationBar=”{staticResource globalApplicationbar}” pada masing-masing halaman yang Anda ingin tambahkan app bar.

Selamat, Anda kini telah berhasil membuat app bar baik untuk satu halaman(local) app bar maupun global app bar. Berikut tampilan akhir app bar yang telah anda buat. Untuk ngoprek selanjutnya Anda dapat menambahkan event pada setiap app bar. Silahkan dikembangkan Winking smile

 

globarappbar

Tampilan global app bar

Saya punya kumpulan icon app bar, silahkan di donwload disini 

Sekian #wahh udah imsak euy Smile

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