Using mock data at design-time

Jul 21, 2011 at 5:46 PM

Tony, is it possible to use mock data at design time through simple MVVM? I have done this in the past using expression blend and the sample data objects that are created from within Blend. I was curious if the same was possible using the services within Simple MVVM?

thank you,

Randy

Coordinator
Jul 21, 2011 at 6:05 PM
Yes, there is a property on the ViewModel base class called, "IsInDesignMode." Just return the mock data if this returns true. In fact, the mvvmlocatorprop code snippet can be used in the Injected ViewModelLocator to supply a new MockServiceAgent to a ViewModel if IsInDesignMode returns true, so the VM would have it and be able to to use it for design-time data.

Cheers,
Tony
Sent from my iPhone

On Jul 21, 2011, at 12:46 PM, "rlcrews"<notifications@codeplex.com> wrote:

From: rlcrews

Tony, is it possible to use mock data at design time through simple MVVM? I have done this in the past using expression blend and the sample data objects that are created from within Blend. I was curious if the same was possible using the services within Simple MVVM?

thank you,

Randy

Jul 21, 2011 at 7:21 PM

Thanks Tony, I see the reference within documentation but do I need to set this property within view model or is it inherited? Also do I still need to create the mock service agent and interface or can I create models and push them directly to the ViewModel and then to the view? A sample of how to implement this or a pointer to another reference would be appreciated.

thank you,

 

Randy

Coordinator
Jul 21, 2011 at 8:09 PM

Hi Randy,

The IsInDesignMode property is available to all ViewModels because it is inherited from ViewModelBase.  No need to create a MockServiceAgent if all you want to do is directly push the data to the ViewModel.  For example, if you create a new project using the SimpleMvvmSilverlight project template, you'll get a CustomerViewModel.  There you can insert a property called "MyProperty" that returns a string if we're in design mode.  Opening the CustomerView, you will then see the text displayed at design-time.

private string myProperty;
public string MyProperty
{
    get
    {
        if (IsInDesignMode) return "My Property";
        return myProperty; 
    }
    set
    {
        myProperty = value;
        NotifyPropertyChanged(m => m.MyProperty);
    }
}

Similarly, you can use mock data to populate a list control, such as a data grid, with design-time data. For example, create a CustomerListViewModel with a CustomerList property that calls a GetCustomers factory method for new-ing up some customers.  You will see these displayed in the designer as well.

private ObservableCollection<Customer> customerList;
public ObservableCollection<Customer> CustomerList
{
    get
    {
        if (IsInDesignMode)
        {
            customerList = new ObservableCollection<Customer>(Customer.GetCustomers());
        }
        return customerList;
    }
    set
    {
        customerList = value;
        NotifyPropertyChanged(m => m.CustomerList);
    }
}

Here is a sample that you can look at: http://tonysneed.com/simplemvvm/SimpleMvvmBlendability.zip

Cheers,

Tony

Jul 21, 2011 at 8:31 PM

Thanks for the reply Tony and the sample this helps clarify a lot.

Best Regards,

 

Randy

Mar 16, 2012 at 4:01 PM

Hi Tony, quick follow up on this thread.  I had trouble getting my mock data to show up, and finally realized it was because I have annotated the classes as such:

public class FooBar {

  [Key, Editable(false)]
  public long Key { get; set; }

  [Key, Editable(false)]
  public string Name { get; set; }
}

I provide a static method to fetch mock data like this:

public 
static List GetMockFoos() {

   return new List {
      new Foo { Key = 1, Name = "foo" },
      new Foo { Key = 2, Name = "bar" }
   };
}

I then have an ObservableCollection in my view model and I bind to that in my XAML, but the mock data was not showing up. I set my ObservableCollection property to always return the mock data regardless of what state IsInDesignView was in, and ran the app, and it threw an exception in the mock data method trying to set the [Editable(false)] properties, so this is why it was not showing up in design view. If I remove [Editable(false)] the data shows up, but this isn't an ideal solution, b/c those properties really should not be editable.

I'm wondering if you have any good suggestions for a better workaround?