Click here to Skip to main content
16,018,353 members
Articles / Programming Languages / C# 4.0

Silverlight View Model Communication

Rate me:
Please Sign up or sign in to vote.
4.89/5 (14 votes)
25 Sep 2010MIT2 min read 77.6K   960   39   17
An example of Silverlight View Model communication between Master and Child View Models
Image 1

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

Image 2

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:

C#
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
}

Image 3

We then create a View and bind the Properties, Collections, and ICommands to the View Model.

Image 4

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.

Image 5

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:

C#
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.

Image 6

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

Image 7

On the MainPage View, select the Child View from the Objects and Timeline window.

Image 8

Select Advanced options under Properties.

Image 9

Select Data Binding...

Image 10

Select the Child View Model.

Image 11

Next, add controls to the MainPage View.

Image 12

We then bind the Properties, Collections, and ICommands.

For example, we can drop a behavior on the Add button...

Image 13

...and easily bind to the ICommand in the Child View Model.

Image 14

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


Written By
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
AiHelpWebsite.com,
LightSwitchHelpWebsite.com, and
HoloLensHelpWebsite.com.

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

He is the Author of:

Comments and Discussions

 
Questionno sibling communication. Pin
kernelsalonpas29-Jun-11 17:24
kernelsalonpas29-Jun-11 17:24 
AnswerRe: no sibling communication. Pin
defwebserver29-Jun-11 18:03
defwebserver29-Jun-11 18:03 
Generalgood article, but... Pin
powerdude24-May-11 12:22
professionalpowerdude24-May-11 12:22 
GeneralRe: good article, but... Pin
defwebserver24-May-11 12:25
defwebserver24-May-11 12:25 
GeneralRe: good article, but... Pin
defwebserver24-May-11 12:27
defwebserver24-May-11 12:27 
GeneralRe: good article, but... Pin
c4rney15-Feb-12 23:28
c4rney15-Feb-12 23:28 
GeneralMy vote of 5 Pin
Richard Waddell25-Sep-10 14:09
Richard Waddell25-Sep-10 14:09 
GeneralRe: My vote of 5 Pin
defwebserver25-Sep-10 15:12
defwebserver25-Sep-10 15:12 
GeneralMy vote of 5 Pin
Kiran Kumar G17-Aug-10 23:26
Kiran Kumar G17-Aug-10 23:26 
GeneralRe: My vote of 5 Pin
defwebserver25-Sep-10 11:31
defwebserver25-Sep-10 11:31 
GeneralMy vote of 5 Pin
mburnie13-Jul-10 0:02
professionalmburnie13-Jul-10 0:02 
GeneralRe: My vote of 5 Pin
defwebserver14-Jul-10 4:06
defwebserver14-Jul-10 4:06 
GeneralLooks good, & solves a problem I never knew existed! Pin
Alan Beasley4-Jul-10 23:03
Alan Beasley4-Jul-10 23:03 
GeneralRe: Looks good, & solves a problem I never knew existed! Pin
defwebserver5-Jul-10 12:43
defwebserver5-Jul-10 12:43 
GeneralGroundbreaking - answers an important question I hadn't thought to ask yet Pin
Member 24098344-Jul-10 8:39
Member 24098344-Jul-10 8:39 
GeneralRe: Groundbreaking - answers an important question I hadn't thought to ask yet Pin
defwebserver4-Jul-10 8:46
defwebserver4-Jul-10 8:46 
GeneralRe: Groundbreaking - answers an important question I hadn't thought to ask yet Pin
defwebserver25-Sep-10 11:31
defwebserver25-Sep-10 11:31 

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

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