Introduction

Microsoft Expression blend 3 is an important user interface design tool to create WPF and Silverlight 3 applications. However, to date, there are few materials on the Internet for creating Expression blend 3 plug-in. Despite some on how to build blend 2 plug-in, there are considerable differences between the two versions of the plug-in. In this article, I will through a simple example show you how to create a basic Microsoft Expression blend 3 plug-in.

Next, let's first take a look at the typical routine to write a Microsoft Expression blend 3 addin.

The Basic Steps to Write a Microsoft Expression Blend 3 Plug-in

Expression blend 3 plug-in is essentially a .NET .dll assembly. Typically, you can follow the following steps to set up a basic Expression Blend 3 plug-in:

1. Start Visual Studio 2008 (SP1) to create a common class library, and name it ExBlend3Addin. Please do remember to set its operating platform -.Net 3.5.

2. Add a reference to the assembly Microsoft.Expression.Framework to your project. This assembly is located in Microsoft Expression blend 3 application folder (the default installation location should be C:\Program Files\Microsoft Expression\Blend 3).

3. Suppose your main class in the library is called DemoAddin. Make the main class inherited from the interface Microsoft.Expression.Framework.IPackage.

4. As for the above interface, you only need to implement its two methods -Load and Unload.

5. In the project add a text file named ExBlend3Addin.Addin. This file will serve as your Microsoft Expression blend 3 plug-in configuration file.

6. Add the following line to the text file:

7. Close the text file, and select the file, in its properties dialog box change the option for "Copy to Output Directory" to "Copy if newer."

8. Open the Project Settings dialog (menu "Project" - " ExBlend3Addin property ...").

9. Switch to "Debug" tab, change the "Startup operation" to "Start the external application" and select "C:\Program Files\Microsoft Expression\Blend 3\Blend.exe".

10. Under the folder of your Expression blend 3, create a new sub-folder named Addins.

11. Switch to the "Build" tab to change the project output directory to the path "C:\Program Files\Microsoft Expression\Blend 3\Addins\".

12. Inside the above Load method, add your own custom code. This position is the key site where you interact with Expression blend 3. In addition, if you want to verify whether the plug-in is loaded, then in this method you can add a breakpoint to trace the debug.

13. Press the F5 key, you can run the sample project to use the add-in in your Expression blend 3.

Up till now, the work to create a plug-in is over. This plug-in will be loaded automatically into Microsoft Expression blend 3. Moreover, if you want the debug your add-in with breakpoints set as above, Visual Studio debugger will be automatically linked to Expression blend 3, so you can start debugging your code.

Next, let's take a look at how to initialize the plug-in.

Initialize Your Plug-in

There are two ways you can use to load your plug-in. One is to let Expression blend 3 automatically load it from the folder /addins. The other is through the shortcut or command line start the Expression blend 3:

Please note that Expression blend 3 under the both cases will load your plug-in in different ways.

Loading the plug-in from the folder /addins

As you may image, in this case, when the plug-in is loaded Expression blend 3 is just starting. This means that at this time you can not access the menu bar and similar components. However, you can add an applicationService.WindowService.Initialized event handler to overcome this problem. Thus, Blend will be able to call your callback function, and then you can continue to initialize your application.

Loading plug-in via the command line

The second situation is, you can from the command line "blend.exe-addin: ExBlend3Addin.dll" to load the plug-in. In this case, Expression blend 3 has fully loaded, and then loads the plug-in. So, your plug-in can immediately access the menu bar and similar contents. As the Blend program has already started, so if you just rely on the applicationService.WindowService.Initialized event handler, then you can do nothing, because this event has been triggered a long time.

In the following example, we choose to use applicationService.WindowService.IsVisible to determine whether the application has been initialized. The code fragment provided below shows you the baseline of an Expression blend 3 plug-in.

Listing 1: The baseline of an Expression blend 3 plug-in

In the next section, we are going to develop a concrete Expression Blend 3 Plug-in.

Write a Simple Expression Blend 3 Plug-in

First, create the main framework code of an Expression blend 3 plug-in in accordance with the above steps 1 to 11. Then, before starting the real work you should learn at least two very crucial interfaces.

Two important interfaces used by plug-ins

With a brief analysis of the above code, you will notice two important interfaces IPackage and IApplicationService.

First of all, let's take a look at the definition of interface IPackage:

Listing 2: The original definition of interface IPackage

In some degree, you can take interface IPackage as a plug-in application.

Then again, let us continue to look at the definition of another important interface IApplicationService:

Listing 3: Listing 3: the original definition of interface IApplicationService

As you've seen, the above code involves many important things: IAddIn, ICommandBarService, MainWindowRootElement, IViewService, IWindowService, AddService, RemoveService...

In fact, if you are familiar with Microsoft's framework for building typical desktop applications, such as Office applications, and a variety of MDI applications, presumably you've already become well known to all: the application object -IApplicationService, the window object -IWindowService, the view object -IViewService, and so on. Of course, if you are very familiar with Expression blend 3, I believe you will not feel strange to IConfigurationService, IWorkspaceService, IFeedbackService and IWebServerService.

Besides the above guessing analysis, starting your .NET Reflector to trace an implementation of some add-in should lead to a better result.

I bet the results should confirm the case. Well, more good things will be left to the readers to enjoy. Let's next start to write a simple Expression blend 3 plug-in application.

Develop a simple Expression blend 3 plug-in

Right-click the above demo project, select "Add" - "New Item.... ". In the "Add New Item" dialog box, select to add a WPF user control, using the default file named UserControl1.xaml.

Because Visual Studio 2008 provides a good visual development support for WPF applications, we can easily establish the following key XAML code (UserControl1.xaml):

Listing 4: The key XAML markups in the WPF user control

They are very simple, with mainly a Button control and a Label control in it.

Then, switch to the code-behind file (UserControl1.xaml.cs) to add a little something:

Listing 5: The behind code for the WPF user control

In the above code, we add a new user control constructor UserControl1, and pass an IWindowService typed parameter. To do so is because we want to call the user control class in the above class DemoAddin, through the intermediary role of this parameter to achieve the goal of interacting with our interested internal structure of Expression blend 3.

Interactive programming is realized in the above event handler button1_Click. In this case, we traverse all the panel (Palette) components of Expression blend 3 indicating the title of their contents, so that our brief vision can be verified - to achieve the interaction with Expression blend 3.

Next, let's modify the plug-in class DemoAddin, in order to call the user control class:

Listing 6: Rewrite the Load method of the class DemoAddin

As is seen, the key lies in the last line of code. By invoking the RegisterPalette method we register a custom panel to Expression blend 3.

Visualize the running results

Now, press F5 key to build and run the sample library. All going well, you will notice, Microsoft Expression Blend 3 starts up just as usual. But when you roll out the Window menu, you will notice a special menu item "Demo Extension Caption", shown in Figure 1.

Figure 1: A special menu item "Demo Extension Caption" is inserted in the Blend 3 Window menu

Quickly tap the menu item "Demo Extension Caption", and then pop up the panel shown in Figure 2:

Figure 2: A custom panel embedded by our own addin

Click the button in Figure 2, and then pops up a dialog box shown in Figure 3.

Figure 3: All the panels’ Caption related strings are retrieved

Note the contents displayed in Figure 3 are just the results returned by us to traverse the Microsoft Expression Blend 3 panels!

Summary

The first and key step to develop any application plug-in is to find a "head." With this "head" in your mind, then you can play to your talent to build a practical plug-in. This article aims to provide such a "head" for you to write the Microsoft Expression blend 3 plug-ins.

As already pointed out above, this article only provides clue for writing Microsoft Expression blend 3 plug-ins. As for the Microsoft Expression blend 4 plug-in development techniques, please refer to a good article Building extensions for Expression Blend 4 using MEF.

About Xianzhong Zhu

I'm a college teacher and also a freelance developer and writer from WeiFang China, with more than fourteen years of experience in design, and development of various kinds of products and applications on Windows platform. My expertise is in Visual C++/Basic/C#, SQL Server 2000/2005/2008, PHP+MyS... This author has published 81 articles on DotNetSlackers. View other articles or the complete profile here.