Load WPF UI into MVVM application from plug-in ass

Question

I am working on an application that uses a plug-in architecture to expand it's functionality. What is the best way to load WPF UIs from a plug-in?

I will have a listbox listing all of the available plug-ins. When a plug-in is selected, a WPF UI defined in the plug-in should be displayed in a ContentControl. The options I have thought of include:

• Require a UserControl to be created that implements a specific interface. I am thinking this would make it easy for plug-in creation. Implement an interface and you are good to go. My question with this method is how to dynamically load the UserControl into a ContentControl. Also, since I am using the MVVM design pattern it seems that a DataTemplate would be preferred over a UserControl.
• Allow a DataTemplate to be loaded from the plug-in. I believe this would require the plug-in to contain a XAML file named a certain way. My application would read the DataTemplate into my resource dictionary like shown in this question. I have seen quite a few questions similar to this, except they usually only need to load one additional, predefined assembly to get DataTemplates from. This problem would require any number of unknown assemblies to be searched for DataTemplates.

If I choose the second option, I think I could select the DataTemplate similarly to how this answer describes.

Which method do you think is better? Or do you have a better way to accomplish this?

Answer 1

I did something similar like mentioned with DataTemplates. I used MEF to load plugins and then loaded a Dictionary with a reference to the ViewModel and View at startup. The plugin isbuilt using 3 main components.

IBasePlugin.cs

This simple interface allows us to create a skeleton for the plugin. This will only contains the very basics, as this is what we will use to Import plugins to our main application using MEF.

public interface IBasePlugin
{
    WorkspaceViewModel ViewModel { get; }
    ResourceDictionary View{ get; }
}

Plugin.cs

The next part is the Plugin.cs file. It contains all the properties of our plugin, as well as all the necessary references; such as to our View & ViewModel.

[Export(typeof(IBasePlugin))]
public class Plugin : IBasePlugin
{
    [Import]
    private MyPluginViewModel _viewModel { get; set; }
    private ResourceDictionary _viewDictionary = new ResourceDictionary();

    [ImportingConstructor]
    public Plugin()
    {
        // First we need to set up the View components.
        _viewDictionary.Source =
            new Uri("/Extension.MyPlugin;component/View.xaml",
            UriKind.RelativeOrAbsolute);
    }

    ....Properties...

}

View.xaml

This is a DataTemplate containing a Reference to the plugin View and ViewModel. This is what we will use for Plugin.cs to load into the main application, so that the application and WPF will know how to bind everything together.

<DataTemplate DataType="{x:Type vm:MyPluginViewModel}">
    <vw:MyPluginView/>

We then use MEF to load all the plugins, feed them to our Workspace ViewModel responsible of handling the Plugins, and store them in an ObservableCollection that will be used to display all the available plugins.

The code we use to load plugins can look something like this.

var plugins = Plugins.OrderBy(p => p.Value.ViewModel.HeaderText);
foreach (var app in plugins)
{
    // Take the View from the Plugin and Merge it with,
    // our Applications Resource Dictionary.
    Application.Current.Resources.MergedDictionaries.Add(app.Value.View)

    // THen add the ViewModel of our plugin to our collection of ViewModels.
    var vm = app.Value.ViewModel;
    Workspaces.Add(vm);
}

Once both the Dictinoary and ViewModel has been loaded from our Plugin into our application we can display the collection using for example a TabControl.

<TabControl ItemsSource="{Binding Workspaces}"/>

I also gave a similar answer here as well with some additional details that you might find interesting.

Answer 2

It sounds like what you are looking for has already been accomplished with Prism. You define regions and then modules get loaded at runtime that may or may not have views for those regions. This works if all your applications are built against the modularity concepts derived from Prism. There are others out there, but Prism has this taken care of pretty extensively.

Answer 3

I use a similar approach to Fuji. The only difference is that I export the ViewModel and the ResourceDictionary independently from each other so they are still loosely coupled.

[Export(typeof(IPlugin)]//i use metadata too
public class Viewmodel1 {}

[Export(typeof(IPlugin)]//i use metadata too
public class Viewmodel2 {}

[ResourceDictionaryExport]
public partial class MyResourceDictionary 
{
    public MyResourceDictionary ()
    {
        InitializeComponent();
    }
}

In my plugin application I add all ResourceDictionaries.

app.xaml.cs

 [ImportMany("Resourcen", typeof(ResourceDictionary))]
 private IEnumerable<ResourceDictionary> _importResourcen;

 foreach (var resourceDictionary in _importResourcen)
 {
     this.Resources.MergedDictionaries.Add(resourceDictionary);
 }

For the sake of completeness

[MetadataAttribute]
[AttributeUsage(AttributeTargets.Class, AllowMultiple = false)]
public class ResourceDictionaryExportAttribute : ExportAttribute
{
    public ResourceDictionaryExportAttribute() : base("Resourcen", typeof(ResourceDictionary))
    {

    }
}