Working With App Bar Controls: Part 5

The Application Bar provides users with quick access to the application tasks. The default Application Bar is a row of Icon Buttons with ellipsis at the bottom of the phone screen. We can create an Application Bar in one of two ways. One uses C# code and the other uses XAML. The following illustration shows an example app bar using C# and XAML.

Create an Application Bar using XAML

Procedure:

• Open your page and select the screen to which you want to apply the app bar. In my case, I will use the “MainPage.xaml” screen.
• Locate the phone application page in your XAML page. Add your Application Bar before the last line of XAML as shown below.

Write the XAML code in that arrow mark line. Before that we need to add an icon for the Application Bar. So go to:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons

In that, three types of icons are available. In my case, I will choose the “dark” icon folder as shown below.

Copy the icons that you will add to your app bar (in my case I will add the three icons Add, Delete and Edit). Then paste those icon images into your project folder “Assets” as shown below.

Now write the following XAML code:

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsMenuEnabled="False" Mode="Minimized">
<shell:ApplicationBarIconButton IconUri="/Assets/add.png" Text="Add"/>
<shell:ApplicationBarIconButton IconUri="/Assets/edit.png" Text="edit"/>
<shell:ApplicationBarIconButton IconUri="/Assets/delete.png" Text="delete"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Set the Application Bar properties as you need and remove or add more buttons as you need. The following screen is an example of an app bar with three Buttons .



Handling the click event

The app bar icon buttons expose the click event that you can handle in your code. So go to the XAML page and add properties (click) as shown below.



Now go and check your code behind page. The new event handler will be created for each app bar button as shown below.



Now run your project by pressing the F5 button directly on your keyboard. See the output as shown.