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="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>
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):
Now if you hit the question mark then you will get the following MessageBox:
The MenuItem works as well so for Settings:
As you can see, its pretty easy
to add a Command
to the ApplicationBar/MenuItem. If you want
to look through the full source code then click here.
Subscribe
to my feed
