As an example, you will modify an implementation of the Menu screen according to the MVVM approach. To limit the number of required changes, here you will use the BrdPage_Tap event handler instead of the command. It is also a possible implementation, especially in case of controls that do not have the Command property.

At the beginning, you should create the view model class (MenuViewModel, in the ViewModels directory), which is derived from the ViewModel class. It contains the NavigateToScreen method that can be called by interacting with the user interface, that is, after clicking on any asteroid. The logic used to navigate the player to another screen is moved from the implementation presented in the previous chapter:

public class MenuViewModel : ViewModel
{
  private Dictionary<string, string> m_urls =
    new Dictionary<string, string>();
  public MenuViewModel()
  {
    this.m_urls["play"] = "/Views/GamePage.xaml"; (...)
  }
  public void NavigateToScreen(string key)
  {
    Uri pageUri = new Uri(this.m_urls[key], UriKind.Relative);
    this.NavigationService.Navigate(pageUri);
  }
}

A few modifications are required in the MenuPage class, which represents the Menu screen. You can understand it as a part of the view from the MVVM design pattern, thus, it should only present data and not perform other operations:

public partial class MenuPage : PhoneApplicationPage
{
  private MenuViewModel m_viewModel = new MenuViewModel();
  public MenuPage()
  {
    this.InitializeComponent();
    this.DataContext = this.m_viewModel;
  }
  protected override void OnNavigatedTo(NavigationEventArgs e)
  {
    base.OnNavigatedTo(e);
    this.m_viewModel.NavigationService = this.NavigationService;
  }
  private void BrdPage_Tap(object sender, GestureEventArgs e)
  {
    string page = ((Border)sender).Tag as string;
    this.m_viewModel.NavigateToScreen(page);
  }
}

The class contains a private field (m_viewModel) that stores an instance of the MenuViewModel class. Another change is made in the constructor. Here, you assign the instance of the view model class (the m_viewModel field) to the DataContext property. In this way, you can easily bind properties of UI elements to data from the view model.

The next step consists of overriding the OnNavigatedTo method and assigning the NavigationService instance to the NavigationService property of the view model class. Beyond this point, you can navigate to other screens from the view model.

The last modification is made in the BrdPage_Tap method, which handles the Tap event of all the Border controls. Here, you almost immediately call the NavigateToScreen method from the view model class. Thus, the logic is located in the view model instead of the view. Using commands will be even more beneficial, however, to keep it simple, in this example an event is used instead.

For the Menu screen, you do not need to create additional classes regarding the model, so you have just finished implementation of the first screen, based on the MVVM approach.