Windows Phone : Application Bar

By | July 15, 2013

Application bar is one of the important thing required in Windows Phone applications, there might be many options which doesn’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 take a quick look at the anatomy of a windows phone app page.

Page Layout

System Tray

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

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

Application Bar

We are going to discuss about application bar in our app, it is a place in our app where we place the most common tasks and can also have popup menu for less common tasks.

  1. Use 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 have to use all four, fill 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, system will colorize button according to user selected theme.
  5. If you want to do some common things you can find the icons located at C:Program Files (x86)Microsoft SDKsWindows Phonev8.0Icons, 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 above code has two buttons refresh and search and one menu item about, they have IconUri property which set the icon source for them and also a Text property which contains a small text which is displayed below the icon. Menu items do not have IconUri as they do not contain images. I have also added the click event on each button and menu item.

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

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

app bar

Leave a Reply

Your email address will not be published. Required fields are marked *