Key practice of MVVM in XAMP apps

In XAML based apps i.e. Silverlight, WPF, Windows store and windows phone apps there are many ways to bind objects or collections with control properties.

In order to bind it with textbox (suppose), one way is to set the DataContext property of the container i.e. Grid, StackPanel etc. and bind it using {Binding Path=PropertyName} where property name could be any property of the object binded with the DataContext property of the container. There are many ways of binding shown in my other article

Although there are many other ways of binding, but for example if you want to update the control property when the object value modifies real problem comes in. In order to achieve this we can implement MVVM pattern. MVVM works with Model, View and ViewModel. Where a Model represents a domain model, View contains controls whereas the ViewModel is the model of a view and contains the properties, events, etc. particularly to the View. In order to handle this scenario, we can create a ViewModel in this below example and then bind it to the view in the later stage. To notifying UI thread we have to implement INotifyPropertyChanged interface.

TestViewModel: INotifyPropertyChanged



public RegistrationViewModel()


attributes = new



PropertyChangedEventHandler PropertyChanged;


string _name;


string Name



set { this._name = value;



get { return _name; }



ObservableCollection<String> _attributes;


ObservableCollection<String> Attributes




This._attributes = value;



get { return _attributes; }






void NotifyChangeEvent(string propName)


if (PropertyChanged != null)

PropertyChanged(this, new





In the above code you can see I have two properties Name and Attributes. While setting Name value I am calling NotifyChangeEvent that checks the event and call invoke if it’s not null.

You may notice that the Attributes collection is ObservableCollection and not List, etc. if we set it to List, etc. it does not notifies any modification happens to the collection.


Now let suppose you have a form containing two textboxes and a list.

XAML as follows

<Grid Name=”grdreg” Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>

Name=”txtBox” HorizontalAlignment=”Left” Height=”124″ Margin=”161,128,0,0″ TextWrapping=”Wrap”
VerticalAlignment=”Top” Width=”297″/>

<TextBox Name=”txtBox2″ HorizontalAlignment=”Left” Height=”142″ Margin=”161,276,0,0″ TextWrapping=”Wrap” Text=”{Binding Path=Name}” VerticalAlignment=”Top” Width=”423″/>

<Button Content=”Update” HorizontalAlignment=”Left” Height=”130″ Margin=”475,125,0,0″ VerticalAlignment=”Top” Width=”112″ Click=”Button_Click”/>

<ListBox ItemsSource=”{Binding Path=Attributes}”
HorizontalAlignment=”Left” Height=”290″ Margin=”616,128,0,0″ VerticalAlignment=”Top” Width=”159″/>



The first textbox in white is a TextBox control (txtBox) and the second in gray is also a TextBox control (txtBox2), whereas the right one in vertical is ListBox. In the XAML, you can bind any object property like {Binding Path=PropertyName} and in this snippet the txtBox is binded with Name property like {Binding Path=Name}.

For list control you can set ItemsSource property and use the same {Binding Path=PropertyName} to bind with specific collection property. Now how does the runtime know which object property has to be mapped. This can be done by specifying the DataContext property of the container where all controls reside and this I have set it in the code-behind (You can also set in XAML)

Code behind

BlankPage1 : Page



RegistrationViewModel viewModel;

public BlankPage1()




viewModel= new

grdreg.DataContext = viewModel;



void Button_Click(object sender, RoutedEventArgs e)


viewModel.Name = txtBox.Text;





On page constructor I am initializing the viewModel and setting it to the DataContext property of grid container “grdreg”.

That’s all…

you can start modifying values of the view model, UI will be updated accordingly.

Tip: In case you have apps for different platforms namely Silverlight, windows phone and windows store apps etc. you can use Portable Class Library and place all your view models there.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s