Model View View Model in Universal Windows Platform

Datetime:2017-03-24 05:43:56         Topic: MVVM Model          Share        Original >>
Here to See The Original Article!!!

“MVVM” stands for “Model-View-ViewModel”. Model basically initialize properties, attributes whatever you say, and “ViewModel” contains all data of your application. Finally View represents actual representation of data in your screen. Basically Data Binding works between “ViewModel” and “View “layer, “View” requests command and “ViewModel” accept it and responses to the “View”. I’m not going the whole theoretical knowledge. I tried to give you the basic idea what “MVVM” is.

Now, let’s get crack in the best practice in this super awesome architectural model.

Creating a New Project

First of all, open up a new project and name it “MVVMEx” or whatever you want. Now, add three folders “Models”, “ViewModels” and “Views” one by one, like this.

Figure 1

It should look exactly like below in Figure 2.

Figure 2

Adding a New Page

Now, in “Views” folder right click and add a new “Blank Page”, give it a name “AutoView”.

Changing the Starting Page

Now one more thing we’ve to do, is changing our starting page. For that, you’ve to go “app.xaml.cs” and change this line of code,

if (rootFrame.Content == null)


// When the navigation stack isn’t restored navigate to the first page,

// configuring the new page by passing required information as a navigation

// parameter

rootFrame.Navigate(typeof(Views.AutoView), e.Arguments);


Listing: 1

because, we’ve replaced our “MainPage.xaml” and add a new page “AutoView.xaml”.

Adding Classes

Now, similarly right click on the “Model” folder and add a new class named “Auto.cs”. Again right click on the “ViewModels” folder and add another class named “AutoViewModel.cs”. After all you setup, your Solution Explorer will look like in Figure 4.

Figure 4

Now we’ll modify our “AutoView.xaml” as follows.

Modifying “AutoView.xaml” Page

Setting up app title and information.

<!– Title Panel –>

<StackPanel Grid.Row=”0″ Margin=”19,0,0,0″>

<TextBlock Text=”Learn With BD Devs” Style=”{ThemeResource TitleTextBlockStyle}” Margin=”0,12,0,0″/>

<TextBlock Text=”MVVM” Margin=”0,-6.5,0,26.5″ Style=”{ThemeResource HeaderTextBlockStyle}” CharacterSpacing=”{ThemeResource PivotHeaderItemCharacterSpacing}”/>


Listing 2

Modifying main grid.

<!–TODO: Content should be placed within the following grid–>

<Grid Grid.Row=”1″ x:Name=”ContentRoot” Margin=”19,9.5,19,0″>

<TextBlock Height=”50″




Text=”{Binding manufacturer,Mode=OneWay}”


Width=”342″ FontSize=”24″/>

<TextBlock Height=”50″




Text=”{Binding model,Mode=OneWay}”


Width=”342″ FontSize=”24″/>

<TextBlock Height=”50″




Text=”{Binding color,Mode=OneWay}”


Width=”342″ FontSize=”24″/>

<TextBlock Height=”50″




Text=”{Binding year, Mode=OneWay}”


Width=”342″ FontSize=”24″/>


Listing 3

Implementation of “BaseModel.cs” Class

Now, we’ll move to our “Models” folder and initialize auto’s properties, but before that, we’ve to add another class name “BaseModel.cs” in our “Common” folder.

public class BaseModel : INotifyPropertyChanged


public event PropertyChangedEventHandler PropertyChanged;

protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)


if (object.Equals(storage, value)) return false;

storage = value;


return true;


private void OnPropertyChaned(string propertyName)


var eventHandler = this.PropertyChanged;

if (eventHandler != null)

eventHandler(this, new PropertyChangedEventArgs(propertyName));



Listing 4

It’s our “INotifyPropertyChanged” interface. As, we’ve said in best practice, you’ve make your code as much clean you can.

Implementation of “Auto.cs” Class

Now, move back to our “Auto.cs” class. The initialized properties are given below.

public class Auto : BaseModel


private string _manufacturer;

private string _model;

private string _color;

private int _year;

public string manufacturer


get { return _manufacturer; }

set { this.SetProperty(ref this._manufacturer, value); }


public string model


get { return _model; }

set { this.SetProperty(ref this._model, value); }


public string color


get { return _color; }

set { this.SetProperty(ref this._color, value); }


public int year


get { return _year; }

set { this.SetProperty(ref this._year, value); }



Listing 5

Here, we’ve inherited all the public properties of “BaseModel.cs” class, and fire the value of data in setter. Just simple logic of OOP (Object Oriented Programming).

Setting Up Data in “AutoViewModel.cs” Class

Now, we’ll set the data of our “Auto” properties in “AutoViewModel.cs” class.

public class AutoViewModel : Auto


Auto _auto = new Auto


manufacturer = “Oldsmobile”,

model = “Cutlas Supreme”,

color = “Silver”,

year = 1988


public AutoViewModel()


this.manufacturer = _auto.manufacturer;

this.model = _auto.model;

this.color = _auto.color;

this.year = _auto.year;



Listing 6

Here, we’ve used Inheritance and inherited “Auto.cs” class like before, so that we can access all the public properties of “Auto.cs” class.

We created a “_auto” object of “Auto.cs” class and initialize all the values here, and in constructor “AutoViewModel” we make references of these properties.

Setting Up DataContext in “AutoView.xaml.cs” Class

It’s almost done our work. Now, to visualize the data of our “AutoViewModel.cs” class, we have to instantiate in our “AutoView.xaml.cs” class. To do so, change these line of code as follows.

private AutoViewModel defaultViewModel = new AutoViewModel();

public AutoView()



this.DataContext = defaultViewModel;


public AutoViewModel DefaultViewModel


get { return this.defaultViewModel; }


Listing 7

Here, we’ve create a “defaultViewModel” object of “AutoViewModel.cs” class and make it the “DataContext” of our “AutoView.xaml.cs” class in constructor. It actually retrieves all data fromm “AutoViewModel” constructor and shows in “ContentRoot” grid of “AutoView.xaml”.

Running the Application

Now, it’s time to build our project. After you run the application, it should look exactly like this.

Figure: 5