Building extensions for Expression Blend 4 using MEF

Introduction

Although it was possible to write extensions for Expression Blend and Expression Design, it wasn’t very easy and out of the box, only one addin could be used. With Expression Blend 4, it is possible to write extensions using MEF, the Managed Extensibility Framework.

Until today, there’s no documentation on how to build these extensions, so looking through the code with Reflector is something you'll have to do very often. Because Blend and Design are built using WPF searching, the visual tree with Snoop and Mole belong to the tools you'll be using a lot exploring the possibilities.

Scott Barnes has written an article on his blog about How to hack Expression Blend. It provides some information on how to get to know more about the inside of Blend.

Configuring the Extension Project

Extensions are regular .NET class libraries. To create one, load up Visual Studio 2010 and start a new project. Because Blend is built using WPF, choose a WPF User Control Library from the Windows section and give it a name and location. I named mine DemoExtension1.

Because Blend looks for addins named *.extension.dll, you'll have to tell Visual Studio to use that in the Assembly Name. To change the Assembly Name, right click your project and go to Properties. On the Application tab, add .Extension to name already in the Assembly name text field.

To be able to debug this extension, I prefer to set the output path on the Build tab to the extensions folder of Expression Blend. This means that everything that used to go into the Debug folder is placed in the extensions folder. Including all referenced assemblies that have the copy local property set to false.

One last setting. To be able to debug your extension, you could start Blend and attach the debugger by hand. I like it to be able to just hit F5. Go to the Debug tab and add the full path to Blend.exe in the Start external program text field.

Extension Class

Add a new class to the project. This class needs to be inherited from the IPackage interface. The IPackage interface can be found in the Microsoft.Expression.Extensibility namespace. To get access to this namespace add Microsoft.Expression.Extensibility.dll to your references. This file can be found in the same folder as the (Expression Blend 4 Beta) Blend.exe file. Make sure the Copy Local property is set to false in this reference. After implementing the interface, the class would look something like:

using Microsoft.Expression.Extensibility;
namespace DemoExtension1
{
    public class DemoExtension1:IPackage
    {
        public void Load(IServices services)
        {            
        }
        public void Unload()
        {         
        }
    }
}

These two methods are called when your addin is loaded and unloaded. The parameter passed to the Load method, IServices services, is your main entry point into Blend. The IServices interface exposes the GetService<T> method. You will be using this method a lot. Almost every part of Blend can be accessed through a service. For example, you can use to get to the commanding services of Blend by calling GetService<ICommandService>() or to get to the Windowing services by calling GetService<IWindowService>().

To get Blend to load the extension, we have to implement MEF. (You can get up to speed on MEF on the community site or read the blog of Mr. MEF, Glenn Block.) In the case of Blend extensions, all that needs to be done is mark the class with an Export attribute and pass it the type of IPackage. The Export attribute can be found in the System.ComponentModel.Composition namespace which is part of the .NET 4 Framework. You need to add this to your references.

using System.ComponentModel.Composition;
using Microsoft.Expression.Extensibility;
 
namespace DemoExtension1
{
    [Export(typeof(IPackage))]
    public class DemoExtension1:IPackage
    {

Blend is able to find your addin now.

Adding UI

The addin doesn't do very much at this point. The WPF User Control Library came with a UserControl so let's use that in this example. I just drop a Button and a TextBlock onto the surface of the control to have something to show in the demo.

To get the UserControl to work in Blend, it has to be registered with the WindowService. Call GetService<IWindowService>() on the IServices interface to get access to the windowing services. To get access to the IWindowService interface, add a reference to Microsoft.Expression.Framework to the project. The UserControl will be used in Blend on a Palette and has to be registered to enable it. This is done by calling the RegisterPalette on the IWindowService interface and passing it an identifier, an instance of the UserControl and a caption for the palette.

public void Load(IServices services)
{
    IWindowService windowService = services.GetService<IWindowService>();
    UserControl1 uc = new UserControl1();
    windowService.RegisterPalette("DemoExtension", uc, "Demo Extension");
}

After hitting F5 to start debugging Expression Blend will start. You should be able to find the addin in the Window menu now.

Activating this window will show the “Demo Extension” palette with the UserControl, style according to the settings of Blend.

Now What?

Because little is publicly known about how to access different parts of Blend adding breakpoints in Debug mode and browsing through objects using the Quick Watch feature of Visual Studio is something you have to do very often. This demo extension can be used for that purpose very easily.

Add the click event handler to the button on the UserControl. Change the constructor to take the IServices interface and store this in a field. Set a breakpoint in the Button_Click method.

public partial class UserControl1 : UserControl
{
    private readonly IServices _services;
 
    public UserControl1(IServices services)
    {
        _services = services;
        InitializeComponent();
    }
 
    private void button1_Click(object sender, RoutedEventArgs e)
    {
    }
}

Change the call to the constructor in the load method and pass it the services property.

public void Load(IServices services)
{
    IWindowService service = services.GetService<IWindowService>();
    UserControl1 uc = new UserControl1(services);
    service.RegisterPalette("DemoExtension", uc, "Demo Extension");
}

Hit F5 to compile and start Blend. Got to the window menu and start show the addin. Click on the button to hit the breakpoint. Now place the carrot text _services text in the code window and hit Shift+F9 to show the Quick Watch window. Now start exploring and discovering where to find everything you need.

More Information

The are no official resources available yet. Microsoft has released one extension for expression Blend that is very useful as a reference, the Microsoft Expression Blend® Add-in Preview for Windows® Phone. This will install a .extension.dll file in the extension folder of Blend. You can load this file with Reflector and have a peek at how Microsoft is building its addins.

Conclusion

I hope this gives you something to get started building extensions for Expression Blend. Until Microsoft releases the final version, which hopefully includes more information about building extensions, we'll have to work on documenting it in the community.