The boot camp at Dallas for Windows Phone is going great, it is a open lab model where if there are any interesting questions, the speakers provide short demo for the whole group otherwise work on the project and ask questions. I am really enjoying it. For my project that I am developing, up front I decided to use Ultralight.MVVM frame work since I am very familiar with Jounce. One thing I stumbled up on when using Ultralight.MVVM is the difficulty to bind Application Bar like you would bind normal buttons. Fortunately the sample Jeremy provided did have his work around to this problem by keeping clean MVVM framework without writing any code in the code behind. We will see how to do that in this blog.
If you are new to Windows Phone development using MVVM framework then please read Jeremy’s blog to understand ins and out of the using Ultralight.MVVM. So lets get on to how to do view model binding for Application Bar.
In my application I am planning to have four buttons in my application bar and they are to Clear the data, Add or Remove data and apply changes. So my Application bar in XAML looks like the following
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/OK.png" Text="Score" />
<shell:ApplicationBarIconButton IconUri="/Images/Clear.png" Text="Clear"/>
<shell:ApplicationBarIconButton IconUri="/Images/Add.png" Text="Add" />
<shell:ApplicationBarIconButton IconUri="/Images/Remove.png" Text="Remove"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
By the way I am using free icons from this web site for testing. If you would look at the application bar there is no binding to tell the view what command to execute. This magic happens in the ViewModel.
This is three set process;
1. Create the commands first as follows
public IActionCommand<object> AddCommand { get; private set; }
public IActionCommand<object> RemoveCommand { get; private set; }
public IActionCommand<object> ApplyCommand { get; private set; }
public IActionCommand<object> ClearCommand { get; private set; }
2. Instantiate the commands in the constructor as
public MainViewModel()
{
AddCommand = new ActionCommand<object>(o => _Navigate());
RemoveCommand = new ActionCommand<object>(o => _Navigate());
ApplyCommand = new ActionCommand<object>(o => _Navigate());
ClearCommand = new ActionCommand<object>(o => _Navigate());
}
3. Next and the final step to make sure you create a collection of commands and assign it to ApplicationBinding as shown below.
/// <summary>
/// For pages, the list of commands to bind to application bar buttons
/// </summary>
public override IEnumerable<IActionCommand<object>> ApplicationBindings
{
get { return new[] { ApplyCommand, ClearCommand, AddCommand, RemoveCommand };
}
}
That’s about it, now you have bound the application bar buttons to Action Command in the View Model.
Unni's space 