Basic Project Structure

In this series, we will build a simple .NET Core application using the MVVM (Model View View-Model) pattern. I will be working in Visual Studio, and I will assume that you already have both Visual Studio, and the .NET Core Framework installed. If that isn't the case, you can find the installer here.

One of the simplest applications to build would be something similar to a contact book, so that's what we'll be building.

Create a new WPF .NET Core project. Name the project 'MVVMIntroUI', and the solution 'MVVMIntro'. In reality you can name the project whatever you would like, however, you'll have to be sure to reference your own namespace in lieu of 'MVVMIntroUI' throughout the project.

The first thing we'll need to do is create three folders. One for our models, one for our view-models, and one for our views.

Your solution should look as follows.

Solution 'MVVMIntro' (1 of 1 project)
MVVMIntroUI
    Dependencies
    Models
    ViewModels
    Views
    App.xaml
    AssemblyInfo.cs
    MainWindow.xaml

Next, we'll create a person model, which will simply house three properties; first name, last name, and email. Right click on the 'Models' folder, hover over 'Add', and select 'Class...'. Name the class 'Person.cs'. Open 'Person.cs', and add the three properties. We will also include a constructer, which will simply allow us to set the value of our properties at instantiation.

namespace MVVMIntroUI.Models
{
    class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }

        public Person(string firstName, string lastName, string email)
        {
            this.FirstName = firstName;
            this.LastName = lastName;
            this.Email = email;
        }
    }
}

Now, we'll create our view-model. Right click on the 'ViewModels' folder, hover over 'Add', and select 'Class...' again. This time, we'll name the class 'PeopleViewModel.cs'. Open 'PeopleViewModel.cs'. We'll have one property this time; a list of 'Person' objects. For the sake of demonstration, we will also instantiate our list with a few instances of our person class within the view-model's constructor.

using MVVMIntroUI.Models;
using System.Collections.Generic;

namespace MVVMIntroUI.ViewModels
{
    class PeopleViewModel
    {
        public List<Person> People { get; set; }

        public PeopleViewModel()
        {
            this.People = new List<Person>()
            {
                new Person("A", "1", "[e-mail]"),
                new Person("B", "2", "[e-mail]"),
                new Person("C", "3", "[e-mail]")
            };
        }
    }
}

At this point, we'll create a simple view with a data grid to display our people. Right click on 'Views', hover over 'Add', and select 'User Control (WPF)...'. Name the user control 'PeopleView.xaml'. Within 'PeopleView.xaml', we'll need a reference to our 'ViewModels' namespace. We'll add our people view-model to our user control's resources. We'll then set the data context of our main grid to a static instance of our people view-model. Finally, we'll create a simple data grid, and set its items source to the people property of our people view-model.

<UserControl x:Class="MVVMIntroUI.Views.PeopleView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:vm="clr-namespace:MVVMIntroUI.ViewModels"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
        <vm:PeopleViewModel x:Key="PeopleViewModel" />
    </UserControl.Resources>
    <Grid DataContext="{StaticResource PeopleViewModel}">
        <DataGrid ItemsSource="{Binding People}" />
    </Grid>
</UserControl>

For the last piece of this puzzle, we simply need to reference our 'Views' namespace in 'MainWindow.xaml', and place our people view inside the main grid.

<Window x:Class="MVVMIntroUI.MainWindow"
        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:v="clr-namespace:MVVMIntroUI.Views"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <v:PeopleView />
    </Grid>
</Window>

At this point, if you build and run the solution, you'll see the data grid with each person appropriately represented.

This concludes the basic project structure portion of this introduction. In the next part of this series, we will look at building a notification system using the 'INotifyPropertyChanged' interface, which will allow us to notify our UI when properties within the view-model are updated. We'll also build a command system, which will allow us to call methods of the view-model when actions are triggered from the UI.