Design Time Data in Silverlight

Recently I read an outstanding article on MVVM by Ward Bell. If haven’t read it, please go back and read it. If you don’t read it for technical aspect, read it for the way he wrote it. It was well written and have excellent content. I really like the way, he took apart the MVVM and looked at it from completely opposite side of it. I totally agree with him on the two points that he finished his article on.

1. MVVM gives good design time data.

2. Unit testing of VM.

I have been coding heavily in SL for some time now. I was developing application using MVVM from day one, but and I need to confess here, I did not do either of the items so far. I completely ignored (1) and troubled a lot with (2). Finally I gave up both the items and developed application in MVVM for easy maintenance and scalability.  After reading the article I realized, I am completely wasting a great feature SL for design time data. So I thought, I will create a simple application and show and learn how to do design time data.

Like all my application, I always starts with Jounce. If you have not looked at Jounce, I would highly recommend it. If you have any problem using Jounce, you can contact me and I will see if I can find answer for you, if not, you can always post the question in Jounce Codeplex. Hopefully you have already installed Jounce Template, if not you will find the VS2010 template at the bottom of the Jounce Ccodeplex page. So now that we have all the required items, lets start rolling.

Start VS2010 and create a brand new Jounce Application. Build the application and run it. yes, do not change anything, just compile and run it. it is supposed to build with out any errors and will display a browser window with ‘Welcome to Jounce’ message. Ok now that we got the basic program running and before we make any changes, lets look at the solution structure.

image

I did not change anything, this is the default structure. In here, you will see four folders.

Common: Interface for main view model.

Jounce: location of jounce reference dll.

SampleData: Lets put a pin here and we will come back here since it is our point of interest.

ViewModel: As the name suggests, it is the view model class.

Now, lets open XAML, it will look something like the following

image

If you see in the design screen, there is a text block which have a text block that shows “This is some design-time text.”. If you look at the XAML, the text block does not have the value. So how and where did it get it? Before I answer that question, lets look at the binding. There are two types of binding, yes, I know, I did not know this either. They are design time binding and run time binding. All the binding we have done so far is run time binding. We create a binding to a control, we run the application and see the data bound to the control, which is run time binding. On the other hand, the design time binding as the name suggests, will bind the data to the control during design time so that you can see the control how it looks. This is extremely useful, if you have designer working along with developer using expression blend to create front end UI for you. There are two important content in the XAML which did design time binding for you.

image

The first green box, establishes the xml namespace for our sample class. The second box did the design time data binding. By default, when you want to use design time data binding, you create a xml namespace pointing to blend and mark it as mc:Ignorable. The later part is to make sure XAML parser will not complain if there is a XAML parse error on design time. Lets look at the d:DataContext in the Grid. what we are saying here, is that for design time data binding, the data comes from an instance of DesignMainViewModel of name space desfined as sampleData. Also create an instance if it is not available. It is very straight forward.

Now lets look at the DesignMainViewModel class.

using System;
using JounceAppWithDesignDataAndTesting.Common;

namespace JounceAppWithDesignDataAndTesting.SampleData
{
    public class DesignMainViewModel : IMainViewModel
    {
        public string WelcomeText
        {
            get { return "This is some design-time text."; }
        }
    }
}

if you look at this, it is a very simple class, which implements IMainViewModel interface and yes, it is the data that we see in XAML design page.

namespace JounceAppWithDesignDataAndTesting.Common
{
    public interface IMainViewModel
    {
        string WelcomeText { get; }
    }
}

If you remember when you run the application the result will be something like this

image

Now where did this message comes from. Well, we did not see the run time, that is the view model implementation.

using System;
using Jounce.Core.ViewModel;
using JounceAppWithDesignDataAndTesting.Common;

namespace JounceAppWithDesignDataAndTesting.ViewModel
{
    [ExportAsViewModel("MainViewModel")]
    public class MainViewModel : BaseViewModel, IMainViewModel
    {
        public string WelcomeText
        {
            get { return "Welcome to Jounce."; }
        }
    }
}

As you can see, the WelcomeTtext return "Welcome to Jounce." during run time and that is what get bound to the text block. So the bottom line is;

1. Create an interface so that all data bound values are available during design time.

2. Create Design time view model which returns dummy data based off of the interface defined in step 1.

3. Make sure, implement the interface in the view model.

4. In XAML make sure design name spaces are defined and then bind the grid to the design time instance.

In this example, I did not make any changes to the default project since Jounce by itself creates the design time binding structure for us and that we can leverage for next examples. I will take an attempt at one more design time data binding and then go to Unit testing in Silverlight.

If any of you have any questions or comments, I would love to hear from you.

Advertisements

One thought on “Design Time Data in Silverlight

  1. Pingback: Design time data – Second look « Unni's space

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s