This article shows how to create an Application Bar (or AppBar) in Windows Phone 8 Applications. In the previous articls, we saw:
The Application Bar is a row of Icon buttons, menuitems and ellipsis (three dots at the edge of the Application Bar) placed at the bottom of the page. It is recommended to use an Application Bar instead of creating your own menu. We can add up to 4 icon buttons with an optional MenuItems.
Let's Begin.
1. Create an Application Bar using XAML Code.
Create a new Windows Phone application and select Windows Phone 8.0 as the target Windows Phone OS for this application and click on OK. Go to
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons\Dark and copy the icons you want to use. You can also use your own icons with 48*48 size with a transparent background. Paste the icons into the Assets folder of your project.
Open MainPage.xaml and go to the end PhoneApplicationPage.
And add following lines of code:
-
- <phone:PhoneApplicationPage.ApplicationBar>
- <shell:ApplicationBar IsMenuEnabled="True" Mode="Default">
-
- <shell:ApplicationBarIconButton IconUri="/Assets/phone.png" Text="Call" Click="ApplicationBarIconButton_Click_1"></shell:ApplicationBarIconButton>
- <shell:ApplicationBarIconButton IconUri="/Assets/email.png" Text="Email" Click="ApplicationBarIconButton_Click_2"></shell:ApplicationBarIconButton>
- <shell:ApplicationBarIconButton IconUri="/Assets/search.png" Text="Search" Click="ApplicationBarIconButton_Click_3"></shell:ApplicationBarIconButton>
-
- <shell:ApplicationBar.MenuItems>
- <shell:ApplicationBarMenuItem Text="About this App" Click="ApplicationBarMenuItem_Click_1">
- </shell:ApplicationBarMenuItem>
- </shell:ApplicationBar.MenuItems>
- </shell:ApplicationBar>
- </phone:PhoneApplicationPage.ApplicationBar>
In the preceding code, we create an Application Bar and then add an icon button and MenuItem to it. the IconUri property sets the URI of the icon to use for the ApplicationBarIconButton. We have also created click events for ApplicationBarIconButton as well as for ApplicationBarMenuItem.
MainPage.xaml.cs code
- private void ApplicationBarIconButton_Click_1(object sender, EventArgs e)
- {
- MessageBox.Show("Call Button Clicked!");
- }
-
- private void ApplicationBarIconButton_Click_2(object sender, EventArgs e)
- {
- MessageBox.Show("Email Button Clicked!");
- }
-
- private void ApplicationBarIconButton_Click_3(object sender, EventArgs e)
- {
- MessageBox.Show("Search Button Clicked!");
- }
- private void ApplicationBarMenuItem_Click_1(object sender, EventArgs e)
- {
-
- NavigationService.Navigate(new Uri("/About.xaml",UriKind.Relative));
- }
Preview
We can also create an Application Bar from the Property window of the PhoneApplicationPage. Click on a new button to create an ApplicationBar in PhoneApplicationPage's Property.
Click on the Button property for creating a collection of Icon Buttons or click on MenuItems to create an ApplicationBarMenuItem.
Now add an ApplicationBarIcon button and set IconUri as well as Text properties and then click on OK.
Now build and run the application.
Preview
2. Creating an Application Bar in C# Code.
Go to the C# code of the Windows Phone Page and add a using for the Microsoft.Phone.Shell namespace. Now add the following lines of code (I added comments to the code so that you can easily understand the code):
- public partial class MainPage : PhoneApplicationPage
- {
-
- public MainPage()
- {
- InitializeComponent();
-
- ApplicationBar = new ApplicationBar();
- ApplicationBar.Mode = ApplicationBarMode.Default;
- ApplicationBar.Opacity = 1.0;
- ApplicationBar.IsVisible = true;
- ApplicationBar.IsMenuEnabled = true;
-
- ApplicationBarIconButton applicationbariconbutton = new ApplicationBarIconButton();
-
- applicationbariconbutton.IconUri = new Uri("/Assets/Email.png",UriKind.Relative);
-
- applicationbariconbutton.Text = "Email";
-
- ApplicationBar.Buttons.Add(applicationbariconbutton);
-
- applicationbariconbutton.Click += applicationbariconbutton_Click;
- }
-
- void applicationbariconbutton_Click(object sender, EventArgs e)
- {
- MessageBox.Show("Email Button Clicked!");
- }
- }
Preview
Properties of ApplicationBar
1. Mode: The Mode property defines the size of the Application Bar when it first appears on a page.
2. Opacity: Opacity can range from 0.0 (completely transparent) to 1.0 (opaque).
I hope you like this. Thanks.