Adding an ApplicationBar in Windows Phone 7 using Visual Studio

One of the nice features of Windows Phone 7 is the shortcut or the Application bar . ApplicationBar is like a Menu that is built into the WP7 and provides a consistent look and feel to the Applications .

The Applicationbar can contain

  • Icon Buttons
  • The ellipsis that can help to expand and collapse the application bar
  • Menu Item – you can also add a menu item

Note that You can only have 4 icon buttons.

Adding an application bar in Visual Studio 2010 is very simple .

When you create a new project , just open the MainPage.XAML file , and look for the following commented code at the end

<!--Sample code showing usage of ApplicationBar-->
<!--
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1" />
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2" />
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1" />
<shell:ApplicationBarMenuItem Text="MenuItem 2" />
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>-->

Remove the Comment , so the code might look something like this

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1"/>
<shell:ApplicationBarMenuItem Text="MenuItem 2"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

The Windows Phone 7 Emulator should like this after uncommenting the code and the WP7 Application is run on the emulator.

Now coming to the customizing part .

The ApplicationBar can be found in the Microsoft.Phone assembly and the namespace Microsoft.Phone.Shell .

You can add the ApplicationBarIconButton with the following XAML Tag

<shell:ApplicationBarIconButton/> the text and the icons can be added with the properties Text and IconUri

Note the intellisense support when you are adding a properties or adding an event handler

Similarly , the Applicationbar menu items can be added with the tag <shell:ApplicationBar.MenuItems>
which in turn contains individual menu items which can be added via

<shell:ApplicationBarMenuItem  Text=”MenuItem 1″/>

You can also enable/disable the Menu via the property IsMenuEnabled of the ApplicationBar .

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
ApplicationBar.IsMenuEnabled = false;
}

and you can hide the ApplicationBar via the property ApplicationBar.IsVisible

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{

ApplicationBar.IsVisible = false;
}

The above properties can also be set in the XAML code .

To support both the oreintation Portrait and Landscape , you need to set the property SupportedOrientations to “PortraitOrLandscape” for the PhoneApplicationPage

The ApplicationBar works accordingly to different orientation 🙂

You might see that there aren’t much option in the Visual Studio 2010 to customize the ApplicationBar without touching the XAML code when compared to the Expression Blend . I will explain that in the next post about this feature in Expression Blend

 

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

No Responses

  1. Adding ApplicationBar in Windows Phone 7 using Expression Blend | ProgramInDotnet August 1, 2011 Reply

Leave a Reply


x

Interesting BlogPosts to read

Download - Pokemon Go for for Windows 10 (Third Party app)
Pokemon Go is one of the popular AR games for android and iOS devices and now , the game is made ava...
Open Wordpad from command line in Windows
You can use the command "Write" from command line in Windows to open the WordPad application.D:\>...
Popular cross-platform (android and iOS) to-do list app
In this blog post, we will cover some of the popular to-do list app that is available on different p...