Getting Started With MVVM In WPF

MVVM is the way to write more organized and reusable code and to reduce the complexity of the code. Let's understand it in detail.

Model

1. It is used just to hold the data. It has objects, properties, and variables to store the data in memory.
2. There is no business logic in Model.
3. Model objects raise ‘Property change Notifications’ i.e. bindings in WPF.

View

View is basically what users see on the screen; i.e., User Interface. 

1. Some parts of View structure can be static, such as - Controls, Layouts; and some parts can be dynamic, such as - animations or state changes etc., depending on the requirement.
2. MVVM pattern follows that View should not have any logic in code behind. Code behind in MVVM is used just to define the constructor and initializers and only to define the logic in which we need to access any UI element or its reference. But, events handling or other data related logic should not be there in code behind.

ViewModel

In WPF simple pattern (without using MVVM), we have lots of logic written in one place i.e. XAML and code behind. We directly interact with the UI objects using code behind. But, it is not the same in the MVVM pattern.

1. Connection between View and Model.
2. Gets data from Model object and provides it to View so that it can be displayed on UI.
3. Data changes and interaction are done via ViewModel only.
4. Navigation logic for different Views are also defined in ViewModel.

Let's try by creating a sample application step by step.

1. Create a simple WPF project. I named it as "MVVMBasics".
2. Add three folders in the project. i.e. Views, Models, and ViewModels. 
3. Add a class in Models folder. I named it "CustomerModel". Let's now define the properties and PropertyChangedEventHandler (as we have already discussed that Model should contain properties) and notify any changes in those properties defined in interface INotifyPropertyChanged.

Let's see how to define.

namespace MVVMBasics.Model {
    public class CustomerModel {}
    public class Customer: INotifyPropertyChanged {
        private string customerFirstName;
        private string cutomerLastName;
        public string CustomerFirstName {
            get {
                return customerFirstName;
            }
            set {
                if (customerFirstName != value) {
                    customerFirstName = value;
                    RaisePropertyChanged("CustomerFirstName");
                    RaisePropertyChanged("FullName");
                }
            }
        }
        public string CustomerLastName {
            get {
                return cutomerLastName;
            }
            set {
                if (cutomerLastName != value) {
                    cutomerLastName = value;
                    RaisePropertyChanged("CustomerLastName");
                    RaisePropertyChanged("FullName");
                }
            }
        }
        public string FullName {
            get {
                return customerFirstName + " " + cutomerLastName;
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string property) {
            if (PropertyChanged != null) {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }
    }
}

Add ViewModel for CustomerModel and add a list of customers using dummy data.

namespace MVVMBasics.ViewModel {
    public class CustomerViewModel {
        public ObservableCollection < Customer > Customers {
            get;
            set;
        }
        public void GetCustomers() {
            ObservableCollection < Customer > customers = new ObservableCollection < Customer > ();
            customers.Add(new Customer {
                CustomerFirstName = "Neha", CustomerLastName = "Jangra"
            });
            customers.Add(new Customer {
                CustomerFirstName = "Test", CustomerLastName = "Test"
            });
            customers.Add(new Customer {
                CustomerFirstName = "Test1", CustomerLastName = "Test1"
            });
            Customers = customers;
        }
    }
}

Add a user control to Views folder and add some UI elements to this user control, as shown below.

<UserControl x:Class="MVVMBasics.Views.CustomerView" 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" mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="600" xmlns:local="clr-namespace:MVVMBasics.Views">
    <Grid>
        <StackPanel HorizontalAlignment="Left">
            <ItemsControl ItemsSource="{Binding Path = Customers}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBox Text="{Binding Path =CustomerFirstName, Mode = TwoWay}" Width="100" Margin="3 5 3 5" />
                            <TextBox Text="{Binding Path = CustomerLastName, Mode = TwoWay}" Width="100" Margin="0 5 3 5" />
                            <TextBlock Text="{Binding Path = FullName, Mode = OneWay}" Margin="0 5 3 5" /> </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </Grid>
</UserControl>

Please see, in the above code, we have declared the bindings and mode of binding as per the properties defined in Model. And as we have discussed earlier, there will be no code in code behind of user control except the constructor and initializer.

Let's add this user control to MainWindow to see the results.

<Window x:Class="MVVMBasics.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:local="clr-namespace:MVVMBasics" xmlns:views="clr-namespace:MVVMBasics.Views" mc:Ignorable="d" Title="MainWindow" Height="750" Width="725">
    <Grid>
        <Grid>
            <views:CustomerView x:Name="CustomerViewControl" Loaded="CustomerViewControl_Loaded" /> </Grid>
    </Grid>
</Window>

In code behind of MainWindow -

namespace MVVMBasics {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow: Window {
        public MainWindow() {
            InitializeComponent();
        }
        private void CustomerViewControl_Loaded(object sender, RoutedEventArgs e) {
            CustomerViewModel customerViewModelObject = new CustomerViewModel();
            customerViewModelObject.GetCustomers();
            CustomerViewControl.DataContext = customerViewModelObject;
        }
    }
}

Now, run and see the output.

 

As soon as we change the text in the text box, a change in property value notifies and raises the PropertyChangedEventHandler. That changes the value of properties accordingly. So, the values of dataContext gets changed. Code sample is attached. You can download and directly run it.