c# - Load WPF UI into MVVM application from plug-in assembly

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.