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

Silverlight View Model Communication

, 25 Sep 2010
Rate this:
Please Sign up or sign in to vote.
An example of Silverlight View Model communication between Master and Child View Models

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)
    {
        // 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.

License

This article, along with any associated source code and files, is licensed under The MIT License

Share

About the Author

defwebserver
Software Developer (Senior) http://ADefWebserver.com
United States United States
Michael Washington is a Microsoft MVP. He is a ASP.NET and
C# programmer.
He is the founder of
LightSwitchHelpWebsite.com

He has a son, Zachary and resides in Los Angeles with his wife Valerie.

He is the Author of:
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinmemberRichard Waddell25-Sep-10 14:09 
GeneralRe: My vote of 5 Pinmemberdefwebserver25-Sep-10 15:12 

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
Web04 | 2.8.140821.2 | Last Updated 25 Sep 2010
Article Copyright 2010 by defwebserver
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid