Geeks With Blogs

News


Timmy Kokke's Blog

↑ Grab this Headline Animator

Timmy Kokke at Blogged
Timmy Kokke …just sorting my bubbles…

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 look thru the code with Reflector is something you’ll have to do very often. Because Blend and Design are build 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 build using WPF, choose a WPF User Control Library from the Windows section and give it a name and location. I named mine DemoExtension1.

image

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.image

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.

image 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 the full path to Blend.exe in the Start external program text field.image

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 thru 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 lets 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.image

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.

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

Now what?

Because little is publicly known about how to access different parts of Blend adding breakpoints in Debug mode and browsing thru 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 contructor 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. image

 

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 his 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.

Posted on Sunday, March 21, 2010 10:49 PM WPF , Blend , dotnetmag , CodeProject | Back to top


Comments on this post: Building extensions for Expression Blend 4 using MEF

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
COOL!!
Very cool. i am going to amaze all of our designers ..
Left by Shrik on Mar 23, 2010 6:24 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
Awesome work!

I presume that you need to reference the Microsoft.Expression.Framework dll to get the IWindowService for the UI?

Cheers!
Chris
Left by Chris on Mar 31, 2010 4:33 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
Yes, you're right. I've update the article. Thanks.
Left by Timmy Kokke on Apr 01, 2010 11:13 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
If you wanted to include an image from your project (like a logo or something) in your plugin, how would you go about referencing that image?
I have a problem where referencing the image causes it to look in the host application assembly.
Left by David on May 12, 2010 3:40 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
I am amazed with your example but it doesn't show Demoextension control in window of ExpressionBlend 4.0. I think smthg is missing in steps you have presented.
Left by saint270 on Jul 06, 2010 5:14 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
Thanks Mike!

I'm afraid there's not much information to be found. The framework the Blend extensions are build on isn't supported by Microsoft. The Blend .Dll files aren't obfuscated and can be opened in tools like Reflector. This is pretty much all there is. I'm writing these tutorials so other people can start building extension and I hope Microsoft will start to support it.

There is a chance Microsoft will obfuscate the assemblies in the future. But I don't think they will remove the framework itself, because they've used it in the tooling for the Windows Phone.
Left by Timmy Kokke on Jul 29, 2010 3:49 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
I want to create a home brew blend tool that will help me move brushes around. I am given some build scripts for VS that uses special preprocessed tags in the XAML to do that for me but they totally fail design time in Blend. Any idea if one can access the resources through somewhat observable collections from these services? Anyway I am going to give it a try but any information would be helpful.

Your article is totally awesome.
Left by Panayot Cankov on Sep 15, 2010 7:53 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
I am using Expression Blend 4 and I can't find the \Extensions folder under C:\Program Files (x86)\Microsoft Expression\Blend 4.

Your article was created using Blend 4 Beta. Does this in generell work similar for the final of Blend 4? If so, how?

It would be really helpful to me if you could provide me some help on that.
Left by Martin on Sep 29, 2010 2:14 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
In the final version of Blend 4 the Extensions folder is omitted. You can add it your self and Blend will find it.

Are you going to blog on your extension?
Left by Timmy Kokke on Sep 29, 2010 2:27 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
Hello Timmy,

thanks for your answer. Your article and the class you provided was the solution for my own Blend 4 Add-In that I just published to the community.

If you or someone of the community is interested in my RichTextBox.Xaml Builder Add-In for Expression Blend 4 here is the download link:

http://gallery.expression.microsoft.com/en-us/SLRTXBB4AISL

Left by Martin on Sep 30, 2010 1:11 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
Thanks.

I hope Microsoft will actively support EB MEF Extensions/Plug-ins. It's the thing to do.
Left by Art Scott on Oct 06, 2010 1:24 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
Hello Timmy,

your articles here are a great resource and helped me so much. So I wanted to give something back to the community and published 2 articles that might be useful if one is building an Expression Blend 4 Extension:

One is about How To Control The Visibility Of An Extension For Expression Blend 4 Depending On The Project Type (WPF or Silverlight based):

http://silverlawone.blogspot.com/2010/10/sichtbarkeit-von-einer-expression-blend.html

Another is about How To Access Xaml Source Code Of Silverlight Project .xaml Files From Inside An Extension:

http://silverlawone.blogspot.com/2010/10/expression-blend-4-add-in-fur-zugriff.html

I will keep on exploring the undocumented Microsoft.Expression assemblies and will post more on that in the near future.

Regards,
Martin
Left by Martin on Oct 14, 2010 4:52 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
Hi Martin,

Thank you! I'm glad I could be of any help.

The articles about Blend Extensibilities are a great source of information too. I hope that we can get the rest of the community to do the same and unravel the "secrets" of building blend extensions together.

Timmy
Left by Timmy Kokke on Oct 14, 2010 5:02 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
With "The articles about Blend Extensibilities" I meant yours :)
Left by Timmy Kokke on Oct 14, 2010 5:11 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
Hello Timmy,

I feel very honored by your kind words. And I agree to you. It would be great if there where more community activities about Expression Blend 4 extension development.

By the way ... for my exploration on the Microsoft.Expression assemblies I am only using the Visual Studio Object Browser and the information from intellisense during debugging.
Left by Martin on Oct 14, 2010 5:20 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
Unfortunately the Microsoft link to the blend extension for WP7 is no more working..
Left by olivier on Nov 06, 2010 10:34 PM

# re: Building extensions for Expression Blend 4 using MEF
Requesting Gravatar...
Hello Sir
I am very much impressed about this tut.
I am facing some problem regarding this extension.
Can you please Clarify.

1. I don't know how to put break point in button click evnet as if now I inserted code like this below

private void button1_Click(object sender, RoutedEventArgs e)
{
BreakText.Text = "Breaked Me";
}
here BreakText is a name of a textblock below the button.
2. When I Clicked the button nothing is happening now (in .cs files)
3. What is carrot text _services text?
Will you Please clarify me?
Thank You in Advance.

Kanthesha Murthy S B
Left by Kanthesha Murthy on Aug 04, 2011 7:53 AM

Your comment:
 (will show your gravatar)


Copyright © Timmy Kokke | Powered by: GeeksWithBlogs.net