MVVM Cross Basics - Navigating Using Commands

I’m quite new to MVVM Cross. I thought I’d start another series of posts on my progress (I haven’t forgotten about the others). Especially where I haven’t found as much documentation as I’d like. My latest project is a game written using the MVVM Cross framework; it’s not a shoot-em-up or an action game, but it will be a game. When it’s finished, I’ll post a link if I get it in any of the stores.

Quick Tips

So far, the best place to go if you’re new to MVVM Cross is Stuart Lodges videos:

https://www.youtube.com/watch?v=_DHDMNB_IeY

Stuart is also a regular of Stack Overflow.

Navigation

The way that MVVM Cross works is slightly different to what I would have expected, in that the ViewModel is the key to the navigation. The view is then determined using a naming convention. In this example, I’m starting the application in a ViewModel called Home, and navigating to Main. Home will display the “New Game / Continue Game” dialog, and Main will be the main game screen.

This blog post is not intended to show how to set-up a new MVVM Cross project; however, essentially my game architecture is as follows:

Game Solution - Game.PCL - Game.Windows - Game.WindowsPhone (currently disabled as this doesn’t work) - Game.Shared

I have no idea whether this will work, but I think it should. If it doesn’t then I’m sure there’ll be some useful lessons on the way.

MvxCommand - the ViewModel

There is a in-built command type called MvxCommand, and that is what I’m going to use. Here’s how I set-up my VM:

    public class HomeViewModel : BaseViewModel
    {
        private MvxCommand \_startNewGameCommand;
        private MvxCommand \_continueExistingGameCommand;

        public IMvxCommand StartNewGameCommand
        {
            get
            {
                return \_startNewGameCommand;
            }
        }

        public IMvxCommand ContinueExistingGameCommand
        {
            get
            {
                return \_continueExistingGameCommand;
            }
        }

        public override void Start()
        {
            \_startNewGameCommand = new MvxCommand(() => StartNewGame());
            \_continueExistingGameCommand = new MvxCommand(() => ContinueExistingGame());

            base.Start();
        }

        private void ContinueExistingGame()
        {
            throw new NotImplementedException();
        }

        private void StartNewGame()
        {
            ShowViewModel();
        }
    }

ShowViewModel is the key here. It navigates to the MainViewModel. MVVMCross uses a convention whereby the view that is shown is based on the VM name; so the view here must be called MainView.

The View

The source view (In this case HomeView) looks like this:

[sourcecode language=“xml”]

        Start New Game
        Continue Existing Game
    

Pretty simple command binding.  Now, providing that the destination View and ViewModel exist, and inherit from MvxStorePage, your navigation should now work.

**Conclusion**

Just the rest of the game to write now…