Subscribe RSS Join our Facebook Group Follow us on Twitter!
in Search

C:\Abdullah's Blog

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

380 Views, 0 Comment(s), Published on: 08-29-2011 5:41 by abdullah21 to C:\Abdullah's Blog
| More
Filed under: ,

Comments

No Comments

About abdullah21

Abdullah
Information technology of UIN Syarif Hidayatullah Jakarta

Other Blog : http://mugi.or.id/blogs/abdul21/default.aspx
http://abdullah21.wordpress.com
Facebook : http://www.facebook.com/abdullah21
Twitter : http://twitter.com/abdullah21
Email : abdullah0813@live.com