Adding an Application Bar to your Windows Phone 7 application

This example uses my previous InkPresenter example to add an Application Bar to replace the undo and redo buttons with two ApplicationBarIconButton.  I also add MenuItems to the application bar for illustrative purposes.  As yet they serve no functional purpose.
  1. Add a reference to “Microsoft.Phone.Shell”
  2. In your page Add a namespace declaration with prefix of shell:
  3.  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"
  4. Add images to your project either and ensure that you set the Copy to Output Directory as Always and Build Action as Content
  5. Add your application bar
  6.     <phoneNavigation:PhoneApplicationPage.ApplicationBar>
            <shell:ApplicationBar Visible="True" IsMenuEnabled="True">
                <shell:ApplicationBar.Buttons>
                    <shell:ApplicationBarIconButton x:Name="btnUndo" IconUri="/Images/light/appbar.minus.rest.png" Click="btnUndo_Click"></shell:ApplicationBarIconButton>
                    <shell:ApplicationBarIconButton x:Name="btnRedo" IconUri="/Images/light/appbar.add.rest.png" Click="btnRedo_Click" ></shell:ApplicationBarIconButton>
                </shell:ApplicationBar.Buttons>
                <shell:ApplicationBar.MenuItems>
                    <shell:ApplicationBarMenuItem x:Name="mnuItemX" Text="Menu Item X"></shell:ApplicationBarMenuItem>
                    <shell:ApplicationBarMenuItem x:Name="mnuItemY" Text="Menu Item Y"></shell:ApplicationBarMenuItem>
                </shell:ApplicationBar.MenuItems>
            </shell:ApplicationBar>
        </phoneNavigation:PhoneApplicationPage.ApplicationBar>
    </phoneNavigation:PhoneApplicationPage>
  7. Wire up the event handlers
  8.         private void btnUndo_Click(object sender, EventArgs e)
            {
                _vm.Undo();
            }
    
            private void btnRedo_Click(object sender, EventArgs e)
            {
                _vm.Redo();
            }
  9. Results
Before using ApplicationBar

Before using ApplicationBarAfter WP7 ApplicationBar Collapsed

After WP7 ApplicationBar Collapsed

After WP7 ApplicationBar Collapsed

After WP7 ApplicationBar Expanded

After WP7 ApplicationBar Expanded

 Some useful resources for the Application Bar are as follows:

  • Application Bar Icons for Windows Phone 7 Series
  • Application Bar Best Practices for Windows Phone
  • One thought on “Adding an Application Bar to your Windows Phone 7 application

    Leave a Reply

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

    *

    * Copy this password:

    * Type or paste password here:

    5,253 Spam Comments Blocked so far by Spam Free Wordpress

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>