Simple MVVM Toolkit for Silverlight, WPF and Windows Phone

Getting Started

The easiest way to get started with the Simple Mvvm Toolkit is to create a new Visual Studio project using one of the project templates installed by the toolkit.  Each project template creates a fully functioning MVVM application and includes a ReadMe.txt file with instructions for inserting your own classes using the Visual Studio item templates, code snippets and xml snippets. There are project templates for WPF, Silverlight and Windows Phone.  These instructions will build a Silverlight MVVM application.

Watch or download the Getting Started screencast to see a demonstration of following the steps in this Getting Started exercise.

1. Open Visual Studio 2010, then select File, New Project. 
   

   

   • Under the Silverlight category, select the Mvvm sub-category
   • Select the SimpleMvvmSilverlight project template
   • Name the project Getting Started and click OK
2. The project already references the SimpleMvvmToolkit assembly.
   • This reference can also be added manually through the Visual Studio Add References dialog.
   • If references for Microsoft.Expression.Interactions and System.Windows.Interactivity are missing,
     you need to install the Microsoft Expression Blend SDK.
3. The project will contain folders for Locators, Models, Services, ViewModels and Views.
   

   

   • You can use the files within each of these folders as examples, then simply remove them.
4. Start by adding a Product class to the Models folder.
   • Derive the class from ModelBase<Product>, which adds data binding capabilities to Product.
   • Use the mvvmprop code snippet to insert two properties:
     ProductId (int)
     ProductName (string)
   • The code snippet will call the base method NotifyPropertyChanged,
     which accepts a lambda expression for the property name.
     • This provides a type-safe way to fire the PropertyChanged event,
       which is necessary for two-way data binding.

   • NOTE: Code snippets have been around for quite a while and make it easier to write boilerplate code.  Code snippets exist for many C# constructs, such as for, foreach, switch, etc.  After inserting the code snippet, it acts like a form where you type a value and hit tab to go to the next field. You can create your own code snippets using a tool such as Snippet Designer, which you can install by going to Tools / Extensions Manager and searching for Snippet Designer in the Online Gallery.

   public class Product : ModelBase<Product>
   {
       private int productId;
       public int ProductId
       {
           get { return productId; }
           set
           {
               productId = value;
               NotifyPropertyChanged(m => m.ProductId);
           }
       }
   
       private string productName;
       public string ProductName
       {
           get { return productName; }
           set
           {
               productName = value;
               NotifyPropertyChanged(m => m.ProductName);
           }
       }
   }

5. Next add an IProductServiceAgent interface to the Services folder.

   • Include a LoadProducts method that returns a List<Product>

   public interface IProductServiceAgent
   {
       List<Product> LoadProducts();
   }

6. Add a MockProductServiceAgent class that implements IProductServiceAgent.
   • Flesh out the LoadProducts method by creating a new List<Product> with a few products in it.

   public class MockProductServiceAgent : IProductServiceAgent
   {
       public List<Product> LoadProducts()
       {
           return new List<Product>
           {
               new Product { ProductId = 1, ProductName = "Chai" },
               new Product { ProductId = 2, ProductName = "Capuccino" },
               new Product { ProductId = 3, ProductName = "Latte" },
               new Product { ProductId = 4, ProductName = "Americano" },
               new Product { ProductId = 5, ProductName = "Machiato" }
           };
       }
   }

7. Next we’re going to create a ProductListViewModel.  But instead of just adding a class with this name to the project, we’ll use one of the Visual Studio item templates that ship with the Simple Mvvm Toolkit!
   • Right-click the ViewModels folder and select Add New Item.
   • Expand the Silverlight category on the left to select the Mvvm category.
   • Select SimpleMvvmViewModel, enter ProductListViewModel.cs for the name, then click the Add button.

     

   • What you get is a class which extends ViewModelBase<TViewModel>
   • Replace the /* IXxxServiceAgent */ comment in the serviceAgent field with IProductServiceAgent.
   • Replace the /* IXxxServiceAgent */ comment in the constructor with IProductServiceAgent.

   public class ProductListViewModel : ViewModelBase<ProductListViewModel>
   {
       // Add a member for IProductServiceAgent
       private IProductServiceAgent serviceAgent;
   
       // Default ctor
       public ProductListViewModel() { }
   
       // ctor that accepts IProductServiceAgent
       public ProductListViewModel(IProductServiceAgent serviceAgent)
       {
           this.serviceAgent = serviceAgent;
       }

   • Using the mvvmprop code snippet add a Products property to the ProductListViewModel.
     • Make the property an ObservableCollection<Product>
   • Add a LoadProducts method.
     • Call LoadProducts on serviceAgent and pass the result to the ctor of an ObservableCollection<Product>
     • Set the Products property to the ObservableCollection<Product>

   private ObservableCollection<Product> products;
   public ObservableCollection<Product> Products
   {
       get { return products; }
       set
       {
           products = value;
           NotifyPropertyChanged(vm => vm.Products);
       }
   }
   
   public void LoadProducts()
   {
       var products = serviceAgent.LoadProducts();
       Products = new ObservableCollection<Product>(products);
   }

8. Open the ViewModelLocator.cs file, which resides in the Locators folder.
   • Use the mvvmlocator code snippet to add a property that creates the ProductListViewModel on demand.
     • Set serviceAgent to a new MockProductServiceAgent

   public class ViewModelLocator
   {
       // Create ProductListViewModel on demand
       public ProductListViewModel ProductListViewModel
       {
           get
           {
               IProductServiceAgent serviceAgent = new MockProductServiceAgent();
               return new ProductListViewModel(serviceAgent);
           }
       }
   }

9. Now that you’ve created a model and view-model, it’s time to create a view.
   • Right-click on the GettingStarted project to add a new Silverlight User Control named ProductListView.xaml
   • Move ProductListView.xaml to the Views folder

     

   • Add two rows to the grid, with a Button in the first row and a DataGrid in the second row.
   • Right-click on ProductListViewModel.xaml in the solution explorer and select Open With…
     • Then choose the XML (Text) Editor and click OK (click Yes on the confirm dialog).

     

   • Place the cursor before the > symbol in the UserControl element, then right-click and select Insert Snippet.
     • Select My XML Snippets / SimpleMvvm / mvvmxmlns, which inserts the blend namespaces
     • Select My XML Snippets / SimpleMvvm / mvvmcontext, and bind the DataContext to the Locator’s ProductListViewModel property.
   • Lastly, provide a closing </Button> element and insert a blend event trigger to call the LoadProducts method on the Click event.
     • Select My XML Snippets / SimpleMvvm / mvvmcommand, and type LoadProducts for the MethodName.
   • While you’re at it, go ahead and bind the ItemsSource property of the DataGrid with Path=Products
   • Double-click on ProductListView.xaml in the solution explorer to re-open the file in the designer. The XAML should look like this:

   <UserControl x:Class="HelloSimpleMvvmSL.ProductListView"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
       xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
       xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
       mc:Ignorable="d"
       d:DesignHeight="300" d:DesignWidth="400"
       DataContext="{Binding Source={StaticResource Locator}, Path=ProductListViewModel}"
       >
       
       <Grid x:Name="LayoutRoot" Background="White">
           <Grid.RowDefinitions>
               <RowDefinition Height="46*" />
               <RowDefinition Height="254*" />
           </Grid.RowDefinitions>
         <Button Content="Load Products" Height="23" HorizontalAlignment="Left"
                 Margin="12,12,0,0" Name="loadProductsButton"
                 VerticalAlignment="Top"Width="95">
           <i:Interaction.Triggers>
             <i:EventTrigger EventName="Click">
               <ei:CallMethodAction
                       TargetObject="{Binding}"
                       MethodName="LoadProducts"/>
             </i:EventTrigger>
           </i:Interaction.Triggers>
         </Button>
           <sdk:DataGrid AutoGenerateColumns="True" Grid.Row="1" Height="214" 
               HorizontalAlignment="Left" Margin="12,14,0,0" Name="dataGrid1"
               VerticalAlignment="Top" Width="376"
               ItemsSource="{Binding Path=Products, Mode=TwoWay}" />
       </Grid>
   </UserControl>
   

10. That’s all there is to it!  Just set the content of MainPage.xaml to show the ProductListView, then press F5 to run the application.
    • Clicking on the Load Products button will display a list of products created by the MockProductServiceAgent and bound to the Products property of the ProductListViewModel.

    <UserControl x:Class="HelloSimpleMvvmSL.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="400">
    
        <Grid x:Name="LayoutRoot" Background="White">
            <my:ProductListView xmlns:my="clr-namespace:HelloSimpleMvvmSL"/>
        </Grid>
        
    </UserControl>
    

    

This Getting Started guide has walked you through the steps of building an MVVM Silverlight application using the Simple MVVM Toolkit.  This includes using Visual Studio project and item templates, together with code and xml snippets, to produce service agents, models, view-models, and views.  View-models are served up by a view-model locator, which creates a service agent and passes it to the ctor of the view-model.  The DataContext of the view is set to a view-model property on the locator so that elements on the view can be bound to properties on the view-model.

In this exercise you used a mock service agent to create dummy model classes. To see how to connect this project to a WCF service for retrieving entities from a database, open projects in Samples\SimpleMvvm-Main and follow steps contained in the ReadMe files.  Part 1 includes more information on using the toolkit, for example, concerning modal dialogs.  Part 2 takes it a step further with navigation, messaging and async operations.  Part 3 ports the solution to WCF RIA Services.