So we’re all set to write some code now. I will be using the MVVM pattern to separate the concerns and to make the logic testable. MVVM stands for Model – View – View Model, the View is the MainPage.xaml, the View Model will be MainPage.vm.cs and the Model will be our list of announcements.
- Add a new Silverlight class to the MySilverlightApplication project and call it MainPage.vm.cs, this will be the code file for the View Model.
I have a registry entry that assocaites my MainPage.vm.cs file with my MainPage.xaml.cs file the same way the MainPage.xaml.cs file is associated. It looks like this for my 64 bit machine
Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\VisualStudio\9.0\Projects\{FAE04EC0-301F-11d3-BF4B-00C04F79EFBC}\RelatedFiles\.xaml]
".xaml.cs"=dword:00000039
".cs"=dword:00000002
".vm.cs"=dword:00000039
".design.cs"=dword:00000039
- Change the name of the class to MainPageViewModel,
- Now we need to set up our Model which will use an interface so we can easily swap out the model into our View Model for testing.
- Add a folder called Model,
- Add a class called IAnnouncementsModel, it’s actually an interface so you’ll need to change it from a class to interface.
- Your interface should look like this:
namespace MySilverlightApplication.Model
{public interface IAnnouncementsModel
{ }
}
- Now we need a concrete implementation of this so add another class called AnnouncementsModel that implements this interface.
- Your class should look like this:
namespace MySilverlightApplication.Model
{public class AnnouncementsModel : IAnnouncementsModel
{
}
That's the model setup for now, we’ll add methods to it a bit later, let’s wire up the View Model with our model now. We will provide two constructors for the View Model. One will be used when we test it and the other will be used when it runs normally. Edit your View Model class to look like the following:
namespace MySilverlightApplication
{public class MainPageViewModel
{private readonly IAnnouncementsModel _announcementsList;
public event EventHandler LoadComplete;
public MainPageViewModel()
: this(new AnnouncementsModel())
{ }
public MainPageViewModel(IAnnouncementsModel announcementsList)
{ _announcementsList = announcementsList;
}
}
}
The last thing we need to do is to tell the View to set its DataContext to the ViewModel at runtime. We only want this to occur outside of Blend so the following test will load our VM at runtime and will use the SampleData in Blend.
Change the code behind file for MainPage.xaml.cs to look like the following:
namespace MySilverlightApplication
{public partial class MainPage : UserControl
{public MainPage()
{ InitializeComponent();
if (!System.ComponentModel.DesignerProperties.IsInDesignTool)
{ DataContext = new MainPageViewModel();
}
}
}
}
So that’s our MVVM pattern set up. In Part 4 we will look at creating the RIA Service for the Announcements and doing some testing of our ViewModel.
The files for these parts are available on the Downloads page of this site.