Windows Phone : Application Bar

The Application bar is an important requirement in Windows Phone applications. There might be many options that don't fit well if we have a full screen app display and hence we need this application bar where we can actually have some buttons and menu items. Let's have a quick look at the anatomy of a Windows Phone app page.

System Tray

It is the system owned indicator area that displays system level status information. The user can show/hide this in the app.

Microsoft.Phone.Shell.SystemTray.IsVisible = false;

Application Bar

We will now discuss the Application Bar in our app. It is a place in our app where we place the most common tasks and can also have a popup menu for less common tasks.

1. Use the Application Bar, don't try to create your own menu tray.
2. You can use up to 4 buttons but that doesn't mean you need to use all four, fill in the slots only if needed.
3. You can also add up a number of menu items, you just need to swipe up the bar and bring up the menu.
4. Use white foreground on transparent background for icons, the system will colorize the buttons depending on the user selected theme.
5. If you want to do some common things you can find the icons located at "C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons", or you can create your own.

Sample PhoneApplicationBar XAML

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/refresh.png" Text="refresh"Click="ApplicationBarIconButton_Click_1"/>
<shell:ApplicationBarIconButton IconUri="/feature.search.png" Text="search"Click="ApplicationBarIconButton_Click_2"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="about" Click="ApplicationBarMenuItem_Click_1"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>

As you can see, the code above has two buttons, refresh and search and one menu item, about; they have the "IconUri" property that sets the icon source for them and also a "Text" property that contains a small text that is displayed below the icon. Menu items do not have IconUri since they do not contain images. I have also added the click event on each button and menu item.

When you switch your app into landscape mode the application bar paints itself in the side of the screen and has some built-in animations for that. You can also set the opacity of the Application Bar to less than 1 so that it gives a different look and the background text is visible.

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity=".5">