Attaching a Command to the WP7 Application Bar.

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 your 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>

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.

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 along side 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.)

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

2) Click File-New Project and navigate to Silverlight for Windows Phone. Make sure you use the MVVM Light (WP7) Template.

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 then extract it somewhere that you can find it. This wrapper will make our application bar/menu item bindable.

4) Right click References inside your WP7 project and add the .dll file to your project.

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" 

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="2424012">          <TextBlock x:Name="ApplicationTitle"                     Text="{Binding ApplicationTitle}"                     Style="{StaticResource PhoneTextNormalStyle}" />          <TextBlock x:Name="PageTitle"                     Text="{Binding PageName}"                     Margin="-3-800"                     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:Bind