Click here to Skip to main content
Click here to Skip to main content

Attaching a Command to the WP7 Application Bar

By , 22 Feb 2011
Rate this:
Please Sign up or sign in to vote.

Introduction

One of the biggest problems that I’ve seen with people creating WP7 applications is how do you bind the application bar to a Relay Command. If you are using MVVM, then this is particular important. Let’s examine the code that one might add to start with.

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton x:Name="appbar_button1" 
	IconUri="/icons/appbar.questionmark.rest.png" Text="About">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <GalaSoft_MvvmLight_Command:
		EventToCommand Command="{Binding DisplayAbout, Mode=OneWay}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
 
        </shell:ApplicationBarIconButton>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem x:Name="menuItem1" 
		Text="MenuItem 1"></shell:ApplicationBarMenuItem>
            <shell:ApplicationBarMenuItem x:Name="menuItem2" 
		Text="MenuItem 2"></shell:ApplicationBarMenuItem>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar> 

That's Not It, Jack

Everything looks right. But we quickly notice that we have a squiggly line under our Interaction.Triggers. The problem is that the object is not a FrameworkObject. This same code would have worked perfect if this were a normal button.

errorscreen.png

OK. Point has been proved.

Let's Make the ApplicationBar Support Commands

So, go ahead and create a new project using MVVM Light. If you want to check out the source and work alongside this tutorial, then click here.

7 Easy Steps to have binding on the Application Bar using MVVM Light (I might add that you don’t have to use MVVM Light to get this functionality, I just prefer it.)

mvvmlightlogo.png

Step 1

Download MVVM Light if you don’t already have it and install the project templates. It is available at http://mvvmlight.codeplex.com/.

Step 2

Click File - New Project and navigate to Silverlight for Windows Phone. Make sure you use the MVVM Light (WP7) Template brief description of how to use the article or code. The class names, the methods and properties, any tricks or tips.

mvvmnewproject.png

Step 3

Now that we have our project setup and ready to go, let’s download a wrapper created by Nicolas Humann here, it is called Phone7.Fx. After you download it, extract it somewhere that you can find it. This wrapper will make our application bar/menu item bindable.

Step 4

Right click References inside your WP7 project and add the DLL file to your project.

addreferences.png

previewaddreference.png

Step 5

In your MainPage.xaml, you will need to add the proper namespace to it. Don’t forget to build your project afterwards.

xmlns:Preview="clr-namespace:Phone7.Fx.Preview;assembly=Phone7.Fx.Preview" 

Step 6

Now you can add the BindableAppBar to your MainPage.xaml with a few lines of code.

<Preview:BindableApplicationBar x:Name="AppBar" BarOpacity="1.0"  >
    <Preview:BindableApplicationBarIconButton Command="{Binding DisplayAbout}" 
	IconUri="/icons/appbar.questionmark.rest.png" Text="About" />
    <Preview:BindableApplicationBar.MenuItems>
        <Preview:BindableApplicationBarMenuItem  Text="Settings" 
		Command="{Binding InputBox}" />
    </Preview:BindableApplicationBar.MenuItems>
</Preview:BindableApplicationBar> 

So your final MainPage.xaml will look similar to this:  

Note: The AppBar will be located inside of the Grid using this wrapper.

<!--LayoutRoot contains the root grid where all other page content is placed-->
<Grid x:Name="LayoutRoot"
      Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
 
    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel"
                Grid.Row="0"
                Margin="24,24,0,12">
        <TextBlock x:Name="ApplicationTitle"
                   Text="{Binding ApplicationTitle}"
                   Style="{StaticResource PhoneTextNormalStyle}" />
        <TextBlock x:Name="PageTitle"
                   Text="{Binding PageName}"
                   Margin="-3,-8,0,0"
                   Style="{StaticResource PhoneTextTitle1Style}" />
    </StackPanel>
 
    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentGrid"
          Grid.Row="1">
 
        <TextBlock Text="{Binding Welcome}"
                   Style="{StaticResource PhoneTextNormalStyle}"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="40" />
 
    </Grid>
    <Preview:BindableApplicationBar x:Name="AppBar" BarOpacity="1.0"  >
        <Preview:BindableApplicationBarIconButton Command="{Binding DisplayAbout}" 
		IconUri="/icons/appbar.questionmark.rest.png" Text="About" />
        <Preview:BindableApplicationBar.MenuItems>
            <Preview:BindableApplicationBarMenuItem  Text="Settings" 
		Command="{Binding InputBox}" />
        </Preview:BindableApplicationBar.MenuItems>
    </Preview:BindableApplicationBar>
</Grid> 

Step 7

Let’s go ahead and create the RelayCommands and write them up to a MessageBox by editing our MainViewModel.cs file.

public class MainViewModel : ViewModelBase
 {
     public string ApplicationTitle
     {
         get
         {
             return "MVVM LIGHT";
         }
     }
 
     public string PageName
     {
         get
         {
             return "My page:";
         }
     }
 
     public string Welcome
     {
         get
         {
             return "Welcome to MVVM Light";
         }
     }
 
     public RelayCommand DisplayAbout
     {
         get;
         private set;
     }
 
     public RelayCommand InputBox
     {
         get; 
         private set;
     }
 
     /// <summary>
     /// Initializes a new instance of the MainViewModel class.
     /// </summary>
     public MainViewModel()
     {
         if (IsInDesignMode)
         {
             // Code runs in Blend --> create design time data.
         }
         else
         {
             DisplayAbout = new RelayCommand(() =>
                                                {
                                                    MessageBox.Show("About box called!");
                                                });
             InputBox = new RelayCommand(() =>
                                            {
                                                MessageBox.Show("settings button called");
                                            });
         }
     }
} 

If you run the project now, you should get something similar to this (notice the AppBar at the bottom):

demoapp.png

Now if you hit the question mark, then you will get the following MessageBox:

aboutboxcalled.png

The MenuItem works as well so for Settings:

displaysettingsbutton.png

settingsbuttoncalled.png

As you can see, it's pretty easy to add a Command to the ApplicationBar / MenuItem.

History

  • 22nd February, 2011: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

mbcrump
Software Developer (Senior) Telerik
United States United States
Michael Crump is a Silverlight MVP and MCPD that has been involved with computers in one way or another for as long as he can remember, but started professionally in 2002. After spending years working as a systems administrator/tech support analyst, Michael branched out and started developing internal utilities that automated repetitive tasks and freed up full-time employees. From there, he was offered a job working at McKesson corporation and has been working with some form of .NET and VB/C# since 2003.
 
He has worked at Fortune 500 companies where he gained experience in embedded systems design and software development to systems administration and database programming, and everything in between.
 
His primary focus right now is developing healthcare software solutions using Microsoft .NET technologies. He prefers building infrastructure components, reusable shared libraries and helping companies define, develop and automate process standards and guidelines.
 
You can read his blog at: MichaelCrump.net or follow him on Twitter at @mbcrump.
Follow on   Twitter

Comments and Discussions

 
GeneralNice writeup but a comment about Nicolas Humann PinmvpNishant Sivakumar22-Feb-11 14:46 
GeneralRe: Nice writeup but a comment about Nicolas Humann Pinmembermbcrump22-Feb-11 14:57 
GeneralNice PinmemberDon Kackman22-Feb-11 6:32 
GeneralRe: Nice Pinmembermbcrump22-Feb-11 7:23 
GeneralMy vote of 5 PinmvpKunal_Chowdhury22-Feb-11 3:48 
GeneralRe: My vote of 5 Pinmembermbcrump22-Feb-11 4:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 22 Feb 2011
Article Copyright 2011 by mbcrump
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid