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<MainViewModel>();
        }
    }

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:

<views:MvxStorePage
    x:Class="MyGame.Views.HomeView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:views="using:Cirrious.MvvmCross.WindowsStore.Views"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Button Command="{Binding StartNewGameCommand}" HorizontalAlignment="Center">Start New Game</Button>
            <Button Command="{Binding ContinueExistingGameCommand}" HorizontalAlignment="Center">Continue Existing Game</Button>
        </StackPanel>
    </Grid>
</views:MvxStorePage>

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…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.