The MVVM Pattern

MVVM stands for Model View View Model. I came across this pattern when adding an GUI (Graphical User Interface) to my pre-existing CSharp tic tac toe. I did this by using WPF (Windows Presentation Foundation).

In my tic tac toe I had a Game class, which kept track of moves, the current board, checking for wins and knowing whos turn it is. I also had an XAML file which was called MainWindow this is linked to a MainWindow CSharp class, they are created together and require each other. In the MainWindow class I created a Game class instance and I started writing other code that did not belong in this class. The MainWindow class is our View part of the MVVM and should not worry about creating an instance of Game or what to do with it. MVVM abstracts a view’s state and behavior.

So I created a new class called GameViewModel, this is our ViewModel, its job is to read and update the Model (which would be our Game class), and it has bindings with the View (MainWindow). In our GameViewModel class, I created an instance of Game and a method which created all cells for a tic tac toe game, so in this case we will create 9 for a 3x3 game. So first I defined a Cells field:

public IEnumerable<int> Cells { get; private set;}

Then I created this method:

public void GenerateCells()
{
    Cells = Enumerable
.Range(0, 9)
.Select(cell => cell);
}

I used LINQ here, if you are not familiar with LINQ look at the example below:

public void GenerateCells()
{
IList<int> AllCells = new List<string>();
for (int i=0; i < 9; i++) {
AllCells.Add(i);
}
Cells = AllCells
}

So now we have a method that generates all of our cells. We need to go back to View (MainWindow) and set our DataContext to the ViewModel (GameViewModel) in the constructor.

public MainWindow()
{
    DataContext = new GameViewModel();
InitializeComponent();
}

Now we can go to the XAML file of the View and create an ItemControl control, I will not go into this as it can be a big topic, but this is a way of displaying all of our cells. Here is what it looks like:

<ItemsControl ItemsSource="{Binding Cells}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="3" Rows="3" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

This creates a button for every object in Cells and puts it in a 3x3 grid.

Now our View has a binding with our ViewModel. But what if someone presses a button and makes a move? How will it update the Game class? Our Game class is the Model which is updated and read by the ViewModel. So we will add an event for when someone presses a button. This can be done by having a Command on each button which is bound to the ViewModel and when the command is executed you would call a method from the Model.

Lets imagine we have our Command bindings set up, which you can read about here. When the command is executed we would call a method I have in the Game class which updates the board. For example:

private Game _game;
public GameViewModel() {
_game = new Game();
}
public void Execute(object parameter)
{
_game.UpdateBoard();
}

Then we could add a method for the ViewModel to read the board in Game.