MS: MVVM

Idea : To make the first layered program
Background:

• Blend: GUI-using-blend.html
• MVVM lagdeling
• oversigt: https://msdn.microsoft.com/en-us/library/hh848246.aspx
• implementering: https://msdn.microsoft.com/en-us/library/ff798384.aspx

Step 1: Make a UWP Project

Create a Universal Project (blank app) e.g. MyFirstMVVM

Step 2: Create a ViewModel class

Create a folder named 'viewmodel'.

In this folder create a class 'MainViewModel'

This class must implement the interface INotifyPropertyChanged
Must look like:

class MainViewModel:INotifyPropertyChanged

Then click on the light-bulb at left and choose 'implement INotifyPropertyChanged' click yes in dialog-box

You will see code like this inserted:

public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}


Step 3: Create 'data' for the view

At first you are to create a text to be displayed i.e.

Make string ('sometext') as a property

public String Sometext { get; set; }

use the hammer to *To property with backing field"

then you have :

private string _sometext;

public String Sometext
{
get { return _sometext; }
set { _sometext = value; }
}


Then insert after set { _sometext = value; } 'OnPropertyChanged();'

And you will have :

set
{
_sometext = value;
OnPropertyChanged();
}


Now will your text be able to notify the view if anything change.

THIS is need for all elements you will have can give the view information 'I am Changed', whereby the view will redraw itself.

Build the solution.

Step 4: Make the View

Open the mainPage in Blend.

Create two TextBoxes

The next few step are to be able to write in one textbox

and let the system automatic write in the other.

Create a new 'DataContext'- under tab common in properties - (i.e. make an object reference from the view to the viewmodel) - your newly created MainViewModel will appear in the buttom of the list.

Create a binding between the textbox and the 'sometext' in the mainViewModel i.e.

For the first 'textbox' open the properties - find the text - under tab common - click on the small box to the right - choose create data binding. In the opened window use 'sometext' in the MainViewModel before close the window click on the more settings and choose two-way direction

Directions:

• One Time means view only read the value from the ViewModel first time the view is created
• One way means view read each time from the viewmodel.
• Two way means the user from the view can fill in information and the field in the viewmodel will be updated (view writes to viewmodel) as well as the view read each time from the viewmodel

The next textbox open properties and create binding to the 'sometext' - this time set the direction to. one way.

Step 5: Run the application

Now run the application.

type in information in first textbox

go to the second textbox type in information here

go back to the first.

See what happen?

The first can write to the sometext in the viewmodel bute the second can not.

The automatic update is because of the INotifyPropertyChange - if OnPropertyChanged is not set in no update will occur.

Step 5: Create a model class

Create a new folder 'model'.

Create a model class e.g. Car with the properties registrationNo, noOfDoors, model,

Implement the INotifyPropertyChanged and modify all set methods to do OnPropertyChanged.

Step 6: Modify MainViewModel

Create a property of the class Car in MainViewModel.

Modify the set methods to do OnPropertyChanged.

Create a constructor for the MainViewModel and make an instance of the Car class

Step 7: Modify View

Create three textboxes and bind these to the properties in the car-object in mainViewModel

Run and see.

More advanced: Make a list of cars

Modify the MainViewModel to hold a list of cars.

Create a property in MainViewModel of type 'ObservableCollection<Car>'.

Fill in some cars in the list (ObservableCollection)

Modify the view to show cars

Create a listbox - and bind to the ObservableCollection