Click here to Skip to main content
Click here to Skip to main content

Using ObservableCollection in MVVM

, 21 Oct 2013
Rate this:
Please Sign up or sign in to vote.
Reduce the number of properties in the View-Model by using ObservableCollection

Introduction

MVVM is a design pattern for XAML based applications. It ensures separation of concerns, test-ability and maintainability. The viewmodel should contain all the properties that will be bound to the view. Almost every element you want to bind to the view, you have to add a property in the viewmodel to control it, even if you want to insert a loading wheel. That's very powerful thanks to the Binding mechanism, especially with the use of notification with INotifyPropertyChanged interface.

Problem

However, the drawback of this pattern is that the number of properties will be high especially when you have a rich view. This will make your viewmodel look too long. Consider that for every property, you will need almost the following 6 lines of code:

 private string _name;
 public String Name
 {
     get { return _name; }
     set { Set(ref _name = value); }
 } 

Imagine if you have only 10 properties in each viewmodel. Then, you will have 60 lines of code only for properties!

Solution

A first solution is to use the Fody extension to decorate a property with an attribute. This will enable notification of the bounded property without using a backed field or implementing the INotifyPropertyChanged. Fody will inject the needed code at compile-time. Then you will have only 2 lines of code for each one:

[AlsoNotifyFor("Name")]
public String Name { get; set; }  

Let's make it even better and reduce the 20 lines to only 1 line. Is that possible? Yes! All we need is to have an object that can contain many objects with different types and each one is notifiable. Fortunately, the ObservableCollection<object> do. Consider using the " = " operation than the Add(..) method, because Add doesn't enable notification. To face this detail, Windows Store 8.1 templates (Hub app and GridView app) comes with an object called ObservableDictionary. Which is also good in that it uses the key string to identify a value rather than a number.

Implementation

public ObservableDictionary Model { get; set; }
Model = new ObservableDictionary(); 
Model.Add("Fullname", "Houssem Dellai");

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Houssem_Dellai
Software Developer Microsoft
Tunisia Tunisia
I'm a Software Engineer and MVP (Client Development). I like writing articles and developing open source software in C#, Windows Phone and Windows 8 applications droidcon.tn/speakers.php.
http://houssemdellai.net
Follow on   Twitter   Google+

Comments and Discussions

 
GeneralMy vote of 3 PinmemberJavith khan21-Oct-13 20:25 
GeneralMy vote of 3 PinmemberKlaus Luedenscheidt17-Oct-13 19:00 
GeneralRe: My vote of 3 PinmemberHoussem_Dellai24-Oct-13 7:33 
GeneralRe: My vote of 3 PinmemberKlaus Luedenscheidt25-Oct-13 17:11 
AnswerGood article houssem Keep it up PinmemberChiheb Chebbi17-Oct-13 3:36 
Questionwhat is Frody extension ? PinmemberTridip Bhattacharjee16-Oct-13 21:05 
AnswerRe: what is Frody extension ? PinmemberHoussem_Dellai17-Oct-13 0:48 
GeneralRe: what is Frody extension ? PinmemberTridip Bhattacharjee17-Oct-13 19:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140718.1 | Last Updated 21 Oct 2013
Article Copyright 2013 by Houssem_Dellai
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid