Silverlight View Model Communication

• Download source - 86.54 KB

Live example: [click here]

Also see:

• Expression Blendable Silverlight View Model Communication (shows  two-way communication)
• RIATasks: A Simple Silverlight CRUD Example
• Silverlight RIA Tasks 2: Dynamic View Models
• Central Silverlight Business Rules Validation

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)
    {
        // Get the name
        string strName = (String)param;
        // Add the name to the collection
        colNames.Add(strName);
        
        // Update Number of Names
        NumberOfNames = colNames.Count;
    }
    
    private bool CanAddNewName(object param)
    {
        return true;
    }
    #endregion
    
    #region DeleteNameCommand
    public ICommand DeleteNameCommand { get; set; }
    public void DeleteName(object param)
    {
        // Get the name
        string strName = (String)param;
        // Remove the name
        colNames.Remove(strName);
        
        // Update Number of Names
        NumberOfNames = colNames.Count;
    }
    
    private bool CanDeleteName(object param)
    {
        return true;
    }
    #endregion
    
    // Properties
    
    #region NumberOfNames
    private int _NumberOfNames = 0;
    public int NumberOfNames
    {
        get { return _NumberOfNames; }
        private set
        {
            if (NumberOfNames == value)
            {
                return;
            }
            _NumberOfNames = value;
            this.NotifyPropertyChanged("NumberOfNames");
        }
    }
    #endregion
    
    // Collections
    
    #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.