Experiments using MEF, MVVM and Silverlight 4 Beta – Part 6: Design-mode ViewModel and calling a WCF Service

Note – this is a multi part post:

Today I had the opportunity to take a look at the code written in the previous posts and insert some new stuff in order to modify the project and make new experiments about:

  1. using a different ViewModel class for the design-time and run-time;
  2. using MEF combined with the new implicit styles feature available in Silverlight 4 Beta to initialize the DataContext of the View at run-time;
  3. retrieve the data using an async call to a WCF service and passing back the results to the VM via MEF.

1 – Using different VM classes

To accomplish this task I’ve defined a new interface named IMainPageViewModel defining these members:

/// MainPage ViewModel interface
public interface IMainPageViewModel : IViewModelBase
{
    string aViewModelProperty { get; set; }
    DataItems dataItems { get; set; }
    ICommand addDataItemCommand { get; }
}

This new interface is then implemented by two classes named ViewModels.DesignMode.MainPageViewModel and ViewModels.MainPageViewModel:

/// ViewModel for the "MainPageView" used in design-mode
public class MainPageViewModel : ViewModelBase, IMainPageViewModel
{
    public MainPageViewModel()
    {
        //Initialize the properties with test data if design mode
        aViewModelProperty = "Value - Design Mode";

        //Initialize the "dataItems" property
        dataItems = new DataItems();
        dataItems.Add(new DataItem() { Description = "Sample Data Item 1 - Design Mode" });
        dataItems.Add(new DataItem() { Description = "Sample Data Item 2 - Design Mode" });
    }

    public string aViewModelProperty { get; set; }

    public DataItems dataItems { get; set; }

    public ICommand addDataItemCommand { get; set; }
}
/// ViewModel class for the "MainPageView" using MEF
[PartCreationPolicy(CreationPolicy.NonShared)]
[Export(typeof(MainPageViewModel))]
public class MainPageViewModel : ViewModelBase, IMainPageViewModel
{
    public MainPageViewModel() {  }

    [Import("aViewModelPropertyTextProvider")]
    public string aViewModelProperty { get; set; }

    [Import(typeof(WcfDataItems))]
    public DataItems dataItems { get; set; }

    [Import(typeof(ICommand))]
    public PartCreator addDataItemCommandCreator { get; set; }

    private ICommand _addDataItemCommand;
    public ICommand addDataItemCommand
    {
        get {
            if (_addDataItemCommand==null)
                _addDataItemCommand = addDataItemCommandCreator.CreatePart().ExportedValue;
            return _addDataItemCommand;
        }
    }
}

The first one is associated with the View at design-time using an attached property which permits to bind an instance only at design time using this xaml (usually you should use <d:DesignProperties.DataContext>, here we are experimenting, of course):



    <!-- Design time DataContext -->
    
        
    

    ........

DesignTimeDataContext attached dependency property:

/// DesignDataContext Attached Dependency Property
public static readonly DependencyProperty DesignDataContextProperty =
    DependencyProperty.RegisterAttached("DesignDataContext", typeof(object), typeof(Page),
        new PropertyMetadata((object)null,
            new PropertyChangedCallback(OnDesignDataContextChanged)));

/// Gets the DesignDataContext property.
public static object GetDesignDataContext(DependencyObject d)
{
    return (object)d.GetValue(DesignDataContextProperty);
}

/// Sets the DesignDataContext property.
public static void SetDesignDataContext(DependencyObject d, object value)
{
    d.SetValue(DesignDataContextProperty, value);
}

/// Handles the DesignDataContext property changes
private static void OnDesignDataContextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    FrameworkElement element = (FrameworkElement)d;

    //Get the ViewModel instance only in design mode
    if ((Application.Current == null) || (Application.Current.GetType() == typeof(Application)))
       element.DataContext = e.NewValue;
}

And this is the design-time mode in Blend using the new attached property:

MEFMVVM Blend

2 – MEF and implicit styles

The new implict styles feature available in Silverlight 4 beta is used to initialize the DataContext of the MainPageView type in a declarative way in App.xaml:




    <!-- Run-time DataContext composed using MEF -->

In this case I’ve modified the MainPageViewModelMEFProvider class and inserted a new IViewModelProvider interface in order to obtain the instance of the ViewModel initialized by MEF:

/// Interface for the ViewModelProvider
public interface IViewModelProvider
{
    object GetViewModel { get; }
}
/// Get the ViewModel instance using MEF
public class MainPageViewModelMEFProvider : IViewModelProvider
{
    public MainPageViewModelMEFProvider() { }

    [Import(typeof(MainPageViewModel))]
    public IViewModelBase ViewModel { get; set; }

    /// Get the Instance of the ViewModel using MEF
    public object GetViewModel
    {
        get
        {
           PartInitializer.SatisfyImports(this);
           return ViewModel;
        }
    }
}

3 – retrieve the data using an async call to a WCF service

I’ve added to the solution a simple WCF service which returns a collection of DataItems:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class DataItemService : IDataItemService
{
    [OperationContract]
    public List GetDataItems()
    {
        // Add your operation implementation here
        return new List()
        {
            new DataItemFromService() {Description="DataItem from service 1"},
            new DataItemFromService() {Description="DataItem from service 2"},
            new DataItemFromService() {Description="DataItem from service 3"}
        };
    }
}

interface IDataItemService
{
    List GetDataItems();
}

public class DataItemFromService
{
    public string Description { get; set; }
}

Since the project uses MEF composition and [Import] /[Export] attributes to initialize all the members of the VM class, I’ve used the same approach for the dataItems collection, retrieving data from an async call to the WCF service using a WcfDataItems class:

/// A sample collection of DataItems from WCF
[Export(typeof(WcfDataItems))]
public class WcfDataItems : DataItems
{
    public WcfDataItems()
    {
        //Initialize the collection
        DataItemWcfService.DataItemServiceClient svc = new DataItemWcfService.DataItemServiceClient();
        svc.GetDataItemsCompleted += (s1, e1) =>
        {
            if (e1.Result != null)
                e1.Result.ToList().ForEach(d =>
                    {
                        //Retrieve a new DataItem
                        DataItem di = DataItemCreator.CreatePart().ExportedValue;
                        di.Description = d.Description;
                        this.Add(di);
                    });
            isLoading = false;
        };
        svc.GetDataItemsAsync();
        isLoading = true;
    }

    [Import(typeof(DataItem))]
    public PartCreator DataItemCreator { get; set; }
}

The code is available for download here.

Happy Silverlighting!