OpenLightGroup Blog


Blogs from

Isolating the C# Code in Silverlight Class Library Projects

If you’re reading another blog where I place all C# beyond the mandatory in a Silverlight class library rather than the Silverlight application, and it’s not obvious how the solution is put together this tutorial will take you through the steps:

(1) Creating the Silverlight Application with hosting Web Site

(2) Adding a Silverlight Class Library to the solution

(3) Referencing the class library from the application

(4) Setting Project Dependencies.

(5) Web Site project settings to consume the xap file / add a new Silverlight application to an existing web site

(6) Setting MainPage DataContext to a class in the class library

Code-Free Zones and Silverlight Class Libraries

From working recently on an OpenLightGroup team project, I’ve become taken with the idea of keeping all C# code out of the Silverlight application project except for the almost vestigial  UserControl code-behinds. No more inadvertent simultaneous edits to the same ViewModel code in Blend and Visual Studio, and I think it helps further emphasize the separation between UI and data to keep the ViewModel, Model, and all other C# source code out of the Silverlight application. I’m at least going to try it out.

I’ll start by creating the main Silverlight project.

  1. Select Silverlight Application.
  2. You can change the Location of the Solution / Project or take the default.
  3. Give the project a name which will also…
  4. …be used as the solution name by default.
  5. Leave the default Create directory for solution checkbox checked


Take the default in the New Silverlight Application dialog that follows to create a Web site to host the application:


We end up with a directory structure like this:


We have a MenuPopUp folder to hold the solution and all the project subfolders, at this point consisting of the MenuPopUp Silverlight Project and the MenuPopUp.Web Web Site.

Ok, we have our Silverlight application and hosting web site. Now we’ll add the library.

  1. Select Silverlight Class Library
  2. Give it a name. The primary purpose of this library will be to hold ViewModel classes
  3. Change the location to the MenuPopUp solution folder and, very important…
  4. …change the Solution dropdown to Add to solution.


Now we need to make the Silverlight application see the Silverlight class library. In Solution Explorer, in the MenuPopUp Project, right click on References and then select Add Reference…


An Add Reference dialog appears. Click on the Projects tab, select MenuPopupViewModel and click OK:


Setting Project Dependencies

Start by right-clicking on the solution and selecting Project Dependencies…


image image image   image

The application (xap file) is dependent on the class library, the web site is dependent on the xap file, and the class library is dependent on nothing, leading to the build order on the far right. The initial settings  had the web site dependent on nothing, but in fact the site is dependent on the xap file so I feel setting the dependency is prudent.

How the XAP file gets to the Web Site ClientBin folder

In our case Visual Studio took care of it when we created a hosting web site along with the Silverlight project. But in case  you ever need to do it manually:

  1. Right-click MenuPopUp.Web in Solution Explorer.
  2. Click Properties in the context menu
  3. Click Silverlight Applications
  4. Visual Studio added the MenuPopUp project
  5. The path on the Web Site is ClientBin.



A little terse, so let’s see what clicking the Add button shows us:


Pretty much speaks for itself. What’s nice about this is you don’t have to change the Silverlight project settings to configure the target for the xap file. Note you can also use this dialog to add a new Silverlight project to an existing web site.

Views and ViewModels

We’ve added a reference to MenuPopupViewModel.dll. Now we’ll create a MainPageViewModel class, build the MenuPopupViewModel project and find out if we can see the class when we open MainPage.xaml in Blend.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace MenuPopupViewModel
    public class MainPageViewModel

And sure enough, there it is. To add MainPageViewModel as the DataContext for MainPage.UserControl

  1. Select UserControl in Objects and Timeline
  2. From Properties/Common Properties click on the New button next to DataContext.
  3. From the Select Object dialog, select MainPageViewModel.


Comments are closed.