Working with a simple ViewModelLocator from MVVM-Light

Introduction

If you are like many of us designing software for the phone, you are probably using the Model View ViewModel Pattern (MVVM)  to help guide your design.  MVVM-Light provides some tools for making the MVVM journey a bit softer.  MVVM-Light has constructs for sending messages between ViewModels, driving events to your ViewModel, and connecting your ViewModel to its associated View.

  The ViewModelLocator class that comes with MVVM - Light serves two purposes:

    It allows you to locate your ViewModel from inside your XAML and hook it to the DataContext.  
    It allows you to control 2 different ViewModels:  a design time view model, and a run time ViewModel.   Because one of the author's goals of MVVM - Light is to make your XAML - ViewModel connection visibile in blend (or 'blendable') ,   the ViewModelLocator comes in handy for this purpose.  Especially for the phone.

The Example

In our example we will create a simple task list.  We'll begin by creating a parent ViewModel that holds all the tasks and a child ViewModel to describe each task.   Listing 1 shows the code for the MainViewModel.   It contains an observable collection of task items for our to do list.  Notice the IsInDesignMode flag;  this flag checks to see if we are in design mode (i.e.  in blend or the visual studio designer).  If we are in design mode, then we can populate are design view with dummy data so we can see exactly how the design will show up on the phone with data inside of it!    The dummy task data also consists of ListItemViewModels for the individual tasks.  The LisItemViewModel in our example contains two properties:  a property to indicate if we finished the task, and a description of the task itself.

 

Listing 1 - The parent View Model for the main page

using System;
using System.Collections.ObjectModel;
using GalaSoft.MvvmLight;
 
namespace ItemList.ViewModels
{
    public class MainPageViewModel : ViewModelBase
    {
        // List of Tasks for the day
        private ObservableCollection<ListItemViewModel> _listItems;
        public ObservableCollection<ListItemViewModel> ListItems
        {
            get { return _listItems; }
            set { _listItems = value; RaisePropertyChanged("ListItems"); }
        }
 
        public MainPageViewModel()
        {
          
            ListItems = new ObservableCollection<ListItemViewModel>();
 
            // if in design view, show two dummy tasks
            if (IsInDesignMode)
            {
                ListItems.Add(new ListItemViewModel {IsFinished = true, Text = "Take Out Garbage"});
                ListItems.Add(new ListItemViewModel { IsFinished = false, Text = "Bring in Newspaper" });
            }
            else
            {
                // read in real tasks from a db here
            }
           
        }
      
    }
}

The ViewModel Locator

The ViewModelLocator controls the instantiation of our ViewModel.   You can write the ViewModelLocator however you wish, but in the case of our ViewModelLocator, we want it to instatiate only one ViewModel for the MainView.  In other words, if the viewmodel has already been created for the view,  we don't regenerate the ViewModel, we just use the existing one. Also we want our ViewModelLocator to choose a ViewModel based on whether the program using the locator is a design tool or the phone application itself.

Read more: Windows Phone Geek
QR:

Posted via email from Jasper-net