MVVM | Bitdisaster

Codesnippet for RelayCommand

February 4, 2011 4 Comments

If you are working with MVVMLight then the RelayCommand provides binding from the View to commands within the ViewModel. To register a command it requires a couple lines of code. The perfect opportunity to write a code snippet.

Here the snippets I was missing from MVVMLight:

Codesnippet for RelayCommand

<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>RelayCommand</Title>
            <Shortcut>relaycmd</Shortcut>
            <Description>Define a RelayCommand</Description>
            <Author>Jan Hannemann</Author>
            <SnippetTypes>
                <SnippetType>Expansion</SnippetType>
            </SnippetTypes>
        </Header>
        <Snippet>
            <Declarations>
                <Literal>
                    <ID>CMD</ID>
                    <ToolTip>Command Property</ToolTip>
                    <Default>Command</Default>
                </Literal>
                <Literal>
                    <ID>CMDF</ID>
                    <ToolTip>Command Field</ToolTip>
                    <Default>command</Default>
                </Literal>
            </Declarations>
            <Code Language="csharp">
            <![CDATA[
        private RelayCommand _$CMDF$;
        public RelayCommand $CMD$
        {
            get
            {
                return _$CMDF$;
            }
        }

        /// <summary>
        /// Checks whether the $CMD$ command is executable
        /// </summary>
        private bool Can$CMD$()
        {
            return true;
        }

        /// <summary>
        /// Executes the $CMD$ command 
        /// </summary>
        private void Exec$CMD$()
        {
            throw new NotImplementedException();
        }

        //cut and paste this line to your ctor
        _$CMDF$ = new RelayCommand(Exec$CMD$, Can$CMD$);
    $end$]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

Codesnippet for RelayCommand<T>

<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>RelayCommandGeneric</Title>
            <Shortcut>relaycmdg</Shortcut>
            <Description>Define a generic RelayCommand</Description>
            <Author>Jan Hannemann</Author>
            <SnippetTypes>
                <SnippetType>Expansion</SnippetType>
            </SnippetTypes>
        </Header>
        <Snippet>
            <Declarations>
                <Literal>
                    <ID>CMD</ID>
                    <ToolTip>Command Property</ToolTip>
                    <Default>Command</Default>
                </Literal>
                <Literal>
                    <ID>CMDF</ID>
                    <ToolTip>Command Field</ToolTip>
                    <Default>command</Default>
                </Literal>
                <Literal>
                    <ID>GT</ID>
                    <ToolTip>Generic Type</ToolTip>
                    <Default>int</Default>
                </Literal>
            </Declarations>
            <Code Language="csharp">
            <![CDATA[
        private RelayCommand<$GT$> _$CMDF$;
        public RelayCommand<$GT$> $CMD$
        {
            get
            {
                return _$CMDF$;
            }
        }

        /// <summary>
        /// Checks whether the $CMD$ command is executable
        /// </summary>
        private bool Can$CMD$($GT$ val)
        {
            return true;
        }

        /// <summary>
        /// Executes the $CMD$ command 
        /// </summary>
        private void Exec$CMD$($GT$ val)
        {
            throw new NotImplementedException();
        }

        //cut and paste this line to your ctor
        _$CMDF$ = new RelayCommand<$GT$>(Exec$CMD$, Can$CMD$);
    $end$]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

You can download the snippets from here: MyCodeSnippets.rar

Filed under .NET, MVVM Tagged with CodeSnippets, MVVM

Simple ViewModelLocator with MEF

December 13, 2010 6 Comments

Download SourceCode

These days design pattern #1 seems to be the MVVM pattern, at least in the Silverlight/WPF community. As soon as you start to dig deeper into MVVM you get in touch with another design pattern, the ViewModelLocator which is basically the ServiceLocator pattern but instead of locating Services it helps us to locate our ViewModels. Just bing it and you will find a wide variety of implementations. The only reason why I came up with my own implementation is simply because I couldn’t find one which meets my requirements:

Support for design-time data
As less as possible code to wire up the ViewModels with the ViewModelLocator
Easy syntax to bind the ViewModel in XAML

The best implementation so far was the ViewModelLocator from John Papa. Unfortunately it doesn’t support design time data seamless, that means you have to code extra ViewModels for design-time data and set the datacontext twice with help of the designer attribute. But I borrowed some ideas from his implementation as well from Kellabytes blog post on how to use MEF with the ViewModelLocator from the famous MVVM Light Toolkit. What I learned from both is that MEF is the best option to implement a light weight ViewModelLocator.

But before we start lets talk about ViewModels and design-time data. Mostly ViewModels relying on external services to get the data they want and to polish them for the View. So the most obvious option would be to mock the ViewModel and instead of asking the service for data, it provides some fake data by itself. Since we live in a decoupled world their is one problem with this approach and that is the fact that we have to introduce interfaces for our ViewModel and to implement each ViewModel twice, one for design-time and one for run-time. I think it’s a much better approach to inject ServicProvider/Helper into the ViewModels which creates an abstraction layer between the ViewModels and the external services and gives us the possibility to foist our design-time data. Plus, a ServiceProvider/Helper is potentially used by more than one ViewModel. So it makes absolute sense to place the fake data there.

Here it comes, the easy 3+1 steps you need to get your ViewModels with full design-time support:

1. Export ServiceHelper

[Export(typeof(IServiceHelper))]
public class ServiceHelper : IServiceHelper
{...

[Export(typeof(IServiceHelper))]
[DesignTimeExportAttribute(DesignTime = true)] //explicite mark this as design-time export
public class DummyServiceHelper : IServiceHelper
{...

2. Export ViewModel via contract name and import ServiceProvider

[Export(ViewModelTypes.MainViewModel)]
public class MainViewModel : INotifyPropertyChanged
{
...
[ImportingConstructor] //lets MEF provide an implementation
   public MainViewModel(IServiceHelper serviceHelper)
   {
...

3. Bind the ViewModel

<!--
 For extended support in the designer tool add a typed version of the ViewModel to ViewModelLocator
 and instead of the indexer use the typed property
 DataContext="{Binding Source={StaticResource VMLocator}, Path=MainViewModel}"
 -->
  <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource VMLocator}, Path=[MainViewModel]}">

4. Optional add a typed property to the ViewModelLocator if you need support for the PropertyGrid in the VS/Blend

...
//string indexer to access the right ViewModel by contract name
public object this[string viewModel]
{
    get
    {
        return _container.GetExportedValue<object>(viewModel);
    }
}

//a typed property to access the MainViewModel
//is not needed because the string indexer can be used directly from XAML
//but adds extra value to the design experience
public MainViewModel MainViewModel { get { return (MainViewModel)this[ViewModelTypes.MainViewModel]; } }
...

If you are interested in how it works and prefer to read source code then grab it from here or if you are fine with my ESL – blog post style then keep reading.

Ok you still here, then lets start with some infrastructure that helps us to define our design-time exports easily. MEF allows us to add meta-data to an export definition. The following class implements a simple Boolean attribute which indicates whether an export is meant to provide a implementation at design-time.

[MetadataAttribute]
[AttributeUsage(AttributeTargets.Class, AllowMultiple = false)]
/// <summary>;
/// Marks an export as a design-time replacement for another export with the same contract.
/// </summary>
public class DesignTimeExportAttribute : ExportAttribute
{
    #region Constructors
    public DesignTimeExportAttribute()
    {
        DesignTime = false;
    }

    public DesignTimeExportAttribute(Type contractType)
            : base(contractType)
    {
        DesignTime = false;
    }

    public DesignTimeExportAttribute(string contractName)
            : base(contractName)
    {
        DesignTime = false;
    }

    public DesignTimeExportAttribute(string contractName, Type contractType)
            : base(contractName, contractType)
    {
        DesignTime = false;
    }
    #endregion

    [DefaultValue(false)]
    public bool DesignTime
    {
        get; set;
    }
}

Now we can take advantage of one extensibility point of MEF and code our custom ComposablePartCatalog which filters and prioritize design-time exports (the idea and part of the code comes from here). The overall goal of the strategy is to to replace a ServiceProvider implementation with a dummy implementation at design-time by utilizing the DesignTimeAttribute. Maybe a ServiceProvider doesn’t rely on external source and we don’t want to be forced to provide design-time export, that’s why exports without the DesignTimeAttribute stay valid at design-time. However, at run-time we wanna get rid of design-time data and we exclude all exports with the DesignTimeAttribute set to true.

/// <summary>
/// A design- vs run-time wrapper catalog which provides prioritizing and filtering based on the DesignTimeExportAttribute
/// </summary>
public class DRPartCatalog : ComposablePartCatalog
{
    private ComposablePartCatalog _catalog;
    private bool _designTime = false;
    public bool DesignTime
    {
        get
        {
            return _designTime;
        }
    }

    /// <summary> 
    /// Creates a new DRPartCatalog around an existing catalog. 
    /// The catalog that this class decorates is provides in the constructor 
    /// paramater "catalog". The "DesignTime" property is set to false.
    /// <summary> 
    public DRPartCatalog(ComposablePartCatalog catalog)
    {
        _catalog = catalog;
    }

    /// <summary> 
    /// Creates a new DRPartCatalog around an existing catalog. 
    /// The catalog that this class decorates is provides in the constructor 
    /// paramater "catalog". The "designTime" parameter controls sets the "DesignTime"
    /// property which is used to control the import satisfaction
    /// <summary> 
    public DRPartCatalog(ComposablePartCatalog catalog, bool designTime)
    {
        _designTime = designTime;
        _catalog = catalog;
    }

    public override System.Linq.IQueryable<ComposablePartDefinition> Parts
    {
        get { return _catalog.Parts; }
    }

    /// <summary>
    /// Returns the exports in the catalog that match a given definition of an import.
    /// This method is called every time MEF tries to satisfy an import.
    ///</summary>
    public override IEnumerable<Tuple<ComposablePartDefinition, ExportDefinition>> GetExports(ImportDefinition importDef)
    {
        // If ImportMany is defined and we are at design-time the use the standard bahavior and return
        // all matching exports.
        if (importDef.Cardinality == ImportCardinality.ZeroOrMore && DesignTime)
        {
            return base.GetExports(importDef);
        }

        //otherwise we have to do our own logic
        IList<Tuple<ComposablePartDefinition, ExportDefinition>> result
            = new List<Tuple<ComposablePartDefinition, ExportDefinition>>();

        // Walk through all parts in that catalog...
        foreach (ComposablePartDefinition partDef in Parts)
        {
            // ... and for each part, examine if any export definition matches the
            // requested import definition.
            foreach (ExportDefinition exportDef in partDef.ExportDefinitions)
            {
                if (importDef.IsConstraintSatisfiedBy(exportDef))
                {
                    //ok the import definition is satisfied
                    Tuple<ComposablePartDefinition, ExportDefinition> matchingExport = null;
                    matchingExport = new Tuple<ComposablePartDefinition, ExportDefinition>(partDef, exportDef);
                    object designTimeMetadata;
                    exportDef.Metadata.TryGetValue("DesignTime", out designTimeMetadata);
                    //if DesignTimeAttribute is set then ToBool returns the assigend value
                    //ohterwise it returns false 
                    bool hasDesignTimeAttribute = ToBool(designTimeMetadata);

                    //If ImportMany is defined and we are at run-time then filter out
                    //design-time exports
                    if (importDef.Cardinality == ImportCardinality.ZeroOrMore)
                    {
                        if (DesignTime || !hasDesignTimeAttribute)
                            result.Add(matchingExport);
                    }
                    //If Import or Import(AllowDefault=true) then prioritize design-time exports
                    //at design-time
                    else
                    {
                        if (DesignTime)
                        {
                            if (result.Count == 0) //also allow run-time exports at design-time
                                result.Add(matchingExport);
                            else if (hasDesignTimeAttribute) //but prioritize design time data at design time
                            {
                                result.Clear();
                                result.Add(matchingExport);
                            }
                        }
                        else
                        {
                            if (!hasDesignTimeAttribute) //only allow run-time exports at run-time
                                result.Add(matchingExport);
                        }
                    }
                }
            }
        }
        return result;
    }

    /// <summary>
    /// Converts an untyped value into a bool. If the object is null
    /// or cannot be converted to an bool, returns false.
    /// </summary>
    protected static bool ToBool(object value)
    {
        if (value == null)
        {
            return false;
        }

        bool result = false;
        bool.TryParse(value.ToString(), out result);
        return result;
    }
}

Now we have the important parts in place and we can code an example on how we take advantage of all this. In order to simulate a more real world project we going to have separated projects for the View, the ViewModel and the Model. The following interface defines the functionality for a ServiceHelper.

public interface IServiceHelper
{
    void GetData(Action<IEnumerable<Foo>> callback);
}

Allright, here a “real” implementation of the interface and another one to provide fake data for designer.

[Export(typeof(IServiceHelper))]
public class ServiceHelper : IServiceHelper
{
    public void GetData(Action<System.Collections.Generic.IEnumerable<Foo>> callback)
    {
        //lets pretend we do a external service call here
        //which would fail at design-time

        List<Foo> result = new List<Foo> {
            new Foo { Bar = "Runtime data 1"},
            new Foo { Bar = "Runtime data 2"},
            new Foo { Bar = "Runtime data 3"}
        };
        //and now hand-over the data via the callback
        callback(result);
    }
}

[Export(typeof(IServiceHelper))]
[DesignTimeExportAttribute(DesignTime = true)] //explicite mark this as design-time export
public class DummyServiceHelper : IServiceHelper
{
    public void GetData(Action<System.Collections.Generic.IEnumerable<Foo>> callback)
    {
        //we just need dummy data 
        List<Foo> result = new List<Foo> {
            new Foo { Bar = "Design-time data 1"},
            new Foo { Bar = "Design-time data 2"},
            new Foo { Bar = "Design-time data 3"}
        };
        //and now hand-over the data via the callback
        callback(result);
    }
}

The ViewModel imports IServiceHelper but doesn’t know about run-/design-time data. It just expects an implementation of IServiceHelper and exports itself via contract name. The name of the ViewModel that is used as contract name for the export is managed in a sealed class and prevents typos within the export/import definitions.

[Export(ViewModelTypes.MainViewModel)] //export via contract name
public class MainViewModel : INotifyPropertyChanged
{
    private IServiceHelper _servicHelper;

    private ObservableCollection<Foo> _foos;
    public ObservableCollection<Foo> Foos
    {
        get
        {
            return _foos;
        }
        set
        {
            _foos = value;
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("Foos"));
        }
    }

    [ImportingConstructor] //lets MEF provide an implementation
    public MainViewModel(IServiceHelper serviceHelper)
    {
        _servicHelper = serviceHelper;
        _servicHelper.GetData((result) =>
            {
                Foos = new ObservableCollection<Foo>(result);
            });
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

Finally, we can have a look at the ViewModelLocator. The implementation is pretty simple and straight forward except for getting the assemblies we need for MEF. Since the standard initialization of MEF doesn’t work at design-time, we have to manually add all assemblies which contains export and/or import definitions until MEF gets a better design-time support. It’s a ugly hack, but the easiest way to get the assembly is via the type of a known class or interface. Please let me know if you know about a more elegant way that works also at design-time.

public class SimpleViewModelLocator
{
    private static CompositionContainer _container;

    /// <summary>
    /// Initializes a new instance of the ViewModelLocator class.
    /// </summary>
    public SimpleViewModelLocator()
    {
        //detect design-time
        bool designTime = DesignerProperties.IsInDesignTool;

        //since the default catalog initializing in MEF doesn't work at runtime
        //we have to create the catalog manually for now
        var aggregatedAssemblyCatalog = new AggregateCatalog(
                         new AssemblyCatalog(typeof(MainViewModel).Assembly) //assembly that contains the ViewModels
                       , new AssemblyCatalog(typeof(IServiceHelper).Assembly) //assembly that contains the Models
                                        );

        //the design/run time catalog helps to filter exports depending on a design-time attribute
        var drpCatalog = new DRPartCatalog(aggregatedAssemblyCatalog, designTime);

        //the container to resolve exported ViewModels
        _container = new CompositionContainer(drpCatalog);
    }

    //string indexer to access the right ViewModel by contract name
    public object this[string viewModel]
    {
        get
        {
            return _container.GetExportedValue<object>(viewModel);
        }
    }

    //a typed property to access the MainViewModel
    //is not needed because the string indexer can be used directly from XAML
    //but adds extra value to the design experience
    public MainViewModel TestViewModel { get { return (MainViewModel)this[ViewModelTypes.MainViewModel]; } }
}

Here we go; after all the efforts we can easily wire our ViewModels in 3 + 1 steps (see above) with first class design-time support. If you prefer to have support for DataBinding in the PropertyGrid of Cider/Blend then step 4 is a matter of seconds with the following code snippet.

<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>vmltprop</Title>
            <Shortcut>vmltprop</Shortcut>
            <Description>Code snippet for defining a typed Property in Bitdisaster's SimpleViewModelLocator</Description>
            <Author>Jan Hannemann</Author>
            <SnippetTypes>
                <SnippetType>Expansion</SnippetType>
            </SnippetTypes>
        </Header>
        <Snippet>
            <Declarations>
                <Literal>
                    <ID>VM</ID>
                    <ToolTip>ViewModel</ToolTip>
                    <Default>ViewModel</Default>
                </Literal>
            </Declarations>
            <Code Language="csharp">
        <![CDATA[public $VM$ $VM$ {get{return ($VM$)this[ViewModelTypes.$VM$];}}
        $end$]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

Let me know what you think!

Filed under .NET, Silverlight Tagged with MEF, MVVM, Silverlight, ViewModelLocator

Twitter.Show(“Bitdisaster”);

agree RT @kellabyte Holy shit Star Trek was awesome! 4 hours ago
@Dorothy_Melody I love you. 7 hours ago
@LBugnion of course, I love fresh beta bits 11 hours ago
RT @danielgary: Thanks @marcoargenti for the Nokia Dev Ambassador team and specifically @richdunbar who was invaluable to my work on #Itsda… 14 hours ago
@Tinytoot @IGN well the should have fired a few photon torpedos towards the Death Star. 14 hours ago

Bitdisaster

Codesnippet for RelayCommand

Codesnippet for RelayCommand

Codesnippet for RelayCommand<T>

Simple ViewModelLocator with MEF

Jan Hannemann

Tags

Categories

Twitter.Show(“Bitdisaster”);

Follow “Bitdisaster”