Live example: [click here]
Also see:
Simple View Model Communication
With using "View Model Style" programming, it may be a little confusing as to how you can communicate between View Models. There are various methods available, but this article explores what I hope to be an easy simple method.
View Model Style
View Model Style allows a programmer to create an application that has absolutely no UI (user interface). The programmer only creates a View Model and a Model. A designer with no programming ability at all, is then able to start with a blank page and completely create the View (UI) in Microsoft Expression Blend 4 (or higher). If you are new to View Model Style, it is suggested that you read Silverlight View Model Style : An (Overly) Simplified Explanation for an introduction.
The Child Application
First, we will create a Silverlight Application that will be the Child Application. We use the following code for the View Model:
public class ChildVMModel : INotifyPropertyChanged
{
public ChildVMModel()
{
AddNewNameCommand = new DelegateCommand(AddNewName, CanAddNewName);
DeleteNameCommand = new DelegateCommand(DeleteName, CanDeleteName);
}
#region AddNewNameCommand
public ICommand AddNewNameCommand { get; set; }
public void AddNewName(object param)
{
string strName = (String)param;
colNames.Add(strName);
NumberOfNames = colNames.Count;
}
private bool CanAddNewName(object param)
{
return true;
}
#endregion
#region DeleteNameCommand
public ICommand DeleteNameCommand { get; set; }
public void DeleteName(object param)
{
string strName = (String)param;
colNames.Remove(strName);
NumberOfNames = colNames.Count;
}
private bool CanDeleteName(object param)
{
return true;
}
#endregion
#region NumberOfNames
private int _NumberOfNames = 0;
public int NumberOfNames
{
get { return _NumberOfNames; }
private set
{
if (NumberOfNames == value)
{
return;
}
_NumberOfNames = value;
this.NotifyPropertyChanged("NumberOfNames");
}
}
#endregion
#region colNames
private ObservableCollection<String> _colNames
= new ObservableCollection<String>();
public ObservableCollection<String> colNames
{
get { return _colNames; }
private set
{
if (colNames == value)
{
return;
}
_colNames = value;
this.NotifyPropertyChanged("colNames");
}
}
#endregion
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String info)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}
#endregion
}
We then create a View and bind the Properties, Collections, and ICommands to the View Model.
We then create a MainPage View (that has its own View Model), and in the Assets > Project, we grab the View and drop it on the page.
We can add and delete items to the list. The count of the items will also show.
The Master View
If we want to communicate with the Child View from the MainPage View, we can use the following method.
First, we add this code to the MainPage View Model:
private ChildVMModel _objChildVMModel = new ChildVMModel();
public ChildVMModel objChildVMModel
{
get { return _objChildVMModel; }
private set
{
if (objChildVMModel == value)
{
return;
}
_objChildVMModel = value;
this.NotifyPropertyChanged("objChildVMModel");
}
}
This provides a property that we can bind the Child View to.
When we build the project and look at the Data Context, we see the Child View Model (objChildVMModel
).
Bind the Child View Model to The MainPage View Model
On the MainPage View, select the Child View from the Objects and Timeline window.
Select Advanced options under Properties.
Select Data Binding...
Select the Child View Model.
Next, add controls to the MainPage View.
We then bind the Properties, Collections, and ICommands.
For example, we can drop a behavior on the Add button...
...and easily bind to the ICommand
in the Child View Model.
The MainPage View and the Child View will now communicate.