Derik Whittaker

Syndication

News


Adding an Application bar to your Windows Phone (both globally and locally) in XAML

One of the great new little features which is part of Windows Phone 7 is the ability to create and add an application bar to your application.  This application bar can contain images, menu items or both.  And creating them is dead simple.

In this post I thought we would walk through how to setup an application bar for your phone application.  We will review how to setup a global application bar (one which can be shared across all pages) as well as a local bar, which can only be used by the page which defines the bar.

Creating a Global Application Bar

  1. Go to App.xaml
  2. Add a xmlns: tag to the top of your XAML.  This tag should look like xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"
  3. Inside your <Application.Resources> section of the .xaml file
        Add the following code
            <shell:ApplicationBar x:Key="GlobalAppMenuBar" Visible="True">
                <shell:ApplicationBar.MenuItems>
                    <shell:ApplicationBarMenuItem Text="About"  />
                    <shell:ApplicationBarMenuItem Text="Help"  />
                    <shell:ApplicationBarMenuItem Text="Something Important"  />
                </shell:ApplicationBar.MenuItems>

                <shell:ApplicationBar.Buttons>
                    <shell:ApplicationBarIconButton IconUri="ApplicationIcon.png" />
                </shell:ApplicationBar.Buttons>
            </shell:ApplicationBar>

        Thing to pay attention to is that 'shell:' is the alias which was created
            in the <Application> section at the top of the file.

  4. To go any page in your solution, I am going to use the default page created, MainPage.xaml and view the xaml
  5. In the declaration section of the xaml add the following
        ApplicationBar="{StaticResource GlobalAppMenuBar}"
        Adding the ApplicationBar entry and pointing it to the static resource we created
            in our App.xaml file will instruct this page to use this configuration of the application bar
  6. Run the application and you should see something that looks like below: 

    AppBarWithIconsAndMenus

Creating a Local Application Bar

  1. Create a new page within your application, or you can reuse MainPage.xaml.
  2. Add the following code to your page, put this at the top of your xaml page.
        <navigation:PhoneApplicationPage.ApplicationBar>
            <shell:ApplicationBar Visible="True" x:Name="LocalApplicationBar">
                <shell:ApplicationBar.Buttons>
                    <shell:ApplicationBarIconButton IconUri="ApplicationIcon.png" />
                    <shell:ApplicationBarIconButton IconUri="ApplicationIcon.png" />
                    <shell:ApplicationBarIconButton IconUri="ApplicationIcon.png" />
                    <shell:ApplicationBarIconButton IconUri="ApplicationIcon.png" />
                </shell:ApplicationBar.Buttons>
            </shell:ApplicationBar>
        </navigation:PhoneApplicationPage.ApplicationBar>

    NOTE - ApplicationIcon.png is a system image which is in the root of the project and is added by the VS template
  3. Run the applciation and you should see a screen which looks like below:

    AppBarWithMenu

*** NOTE ***

When you create a local application bar you do NOT need to create the ApplicationBar=... entry in the header of the xaml. If you do you will get an error like below:

StaticResourceError

*** NOTE ***

One thing that needs to be pointed out is that you will not be able to use Commanding to handle the click events of the various menu items, you will have to implement click events in your code behind.  The reason for this is that the Application Bar control is not a native Silverlight control, but rather it is a unmanaged control which is part of the core OS for the Windows Phone.  Because of this fact currently you cannot utilize native Silverlight techniques to interact with the bar.  Maybe someday there will be at least a native wrapper around the control which will allow for commanding.

There you have it, you now know how to create a global application bar and a local one.

Happy coding.

Till next time,


Posted 04-29-2010 8:56 AM by Derik Whittaker
Filed under: , ,

[Advertisement]

Comments

name wrote re: Adding an Application bar to your Windows Phone (both globally and locally) in XAML
on 05-04-2010 7:35 AM

really great sites, thank you,

name wrote re: Adding an Application bar to your Windows Phone (both globally and locally) in XAML
on 05-04-2010 7:50 AM

Thank you,

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)