First Guide to MEF & Silverlight (Part–II)

In my previous article “First Guide to MEF & Silverlight (Part–I)” I discussed about MEF with a small simple console application. Hope that was useful to you to understand the basic knowledge of MEF. In this article, I will guide you to create a simple Silverlight application using the MEF. If you are new to MEF, I strongly recommend you to read my previous article to gain knowledge on the basic things of MEF like Importing, Exporting, Catalog, Container etc.

Read the complete article and at the end if you have any queries, please let me know. I will try to answer them as soon as possible. Always Appreciate your valuable feedbacks.

Prerequisite

To start working with the Silverlight & MEF application, you need to setup your development environment. In your development PC, you need the following things already installed:

1. Visual Studio 2010 with .Net Framework 4.0
2. Silverlight 4.0 Tools for Visual Studio 2010

Once your environment is ready with the above tools, we can start with our next step.

Setting up the Project

First of all, we need to create a Silverlight application project and then we have to add some assembly reference in order to work with the MEF. Hence, follow the following steps to setup your project:

• Open your Visual Studio 2010 IDE
• Now go to File –> New –> Project or just press Ctrl + Shift + N to open the “New Project” dialog window.
• From the left panel expand “Visual C#” and then select “Silverlight”. This will populate the right pane with the Silverlight templates.

   

  

   

• In the right pane, select “.Net Framework 4” from the DropDown present at the top of the screen. This is require because, we want to do application programming for the target version i.e. Framework 4.
• Chose “Silverlight Application” from the right pane and click “OK”. I assumed that, you selected proper location and named your application project properly (in our case, I named it as “MEFWithSilverlightDemo”).
• Once you click “OK”, it will ask you to create a new Web site. This step is require to host the Silverlight application.

   

  

   

• Be sure that, in the above dialog “Silverlight 4” has been selected as the Silverlight version.
• Once you click “OK” the Visual Studio IDE will start creating your Silverlight project. It will create two project (one is your Silverlight application project and the other is your Silverlight application hosting website).

   

  

   

• Once the project created by the IDE, you need to add a reference of the Assembly named “System.ComponentModel.Composition” and a reference of the Assembly named “System.ComponentModel.Composition.Initialization” to your project. To do this, right click on your Silverlight Application project and click “Add Reference”. From the “Add Reference” dialog find the assembly named “System.ComponentModel.Composition” and “System.ComponentModel.Composition.Initialization” to add them to your project.

   

   

Once done with all the above steps, your project is ready for the MEF development.

Building our First MEFWithSilverlightDemo application

Let us first decide what we want to do in our example. We will create a Silverlight application where we will include some UserControls as a Widget. This is for learning purpose and hence don’t go with the UI.

So, in our sample application we will create a UserControl and mark it as Exportable. Then we will import the UserControl in our application to add it in the UI. Next we will create another UserControl and mark it as Exportable, so that without any other change in the code, it should add in the main UI. This is just an example to showcase the MEF functionality in Silverlight applications.

Common Interface Design

Let’s jump into the code. First of all, we will create an Interface called IWidget and we will use this interface to build our UserControl. We will just inherit this to the UserControl and while exporting or importing we will use the same interface type. Reason behind this is to make sure only the specified type of control will be marked for MEF. If we have two different types for two different kind of controls, it will be easier for us to manage in the main screen. So, just create a blank interface named IWidget which will look like below:

Hosting the Controls

Now, in the MainPage.xaml add an ItemsControl & name it as “widgets”. Wrap the ItemsControl with a StackPanel to hold the items. The XAML file will look as below:

Designing Employee Widget

Now it’s time to create a UserControl. Right click on the Silverlight project and add one UserControl & name it as “EmployeeWidget”. We will not design more inside it as it is not require to understand the MEF. To make it properly visible just add one TextBlock with some strings. In our example, I am setting “Employee Widget” as the text string for the TextBlock and also setting a color “Red” to the Grid background. Resize the UserControl to 150 x 150, so that, it will set properly in the screen.

Let’s see the below code for detailed layout:

As mentioned above, I resized the control to 150 x 150 and then changed the background color to Red. Added a TextBlock having “Employee Widget” as the value to the TextProperty of the TextBlock with a foreground color of White, so that, it will be visible on top of the Red color. No need to describe more on it. Just check the above xaml and you will get the idea behind it.

Exporting Employee Widget

Press F7 in the EmployeeWidget.xaml page to open up the code behind file. Inherit the EmployeeWidget class from IWidget. Once done, add the attribute “Export” having the type of IWidget to the class. This will ensure that the class will export for the MEF to Satisfy. Look into the code here:

Importing the Widget

As our UserControl has been exported for the MEF to satisfy, it’s the time to import it in our MainPage. To do this, open the MainPage.xaml.cs and create a property “Widgets” of IWidget type array. We are using array type to ensure that, we can import many widgets there. So, mark the property with the atrribute “ImportMany” of type IWidget. Once that is done, our code is ready to import the exported class.

Now inside your MainPage constructor, iterate through the array and add all the Widgets as the item to the “widgets” items control which we already added in the XAML. Now if you run your application, you will notice that the Widgets array is null. Why? Just think. Oh yea!!! We forgot to satisfy the MEF Initializer to satisfy the property. What to do for that?

To satisfy the imports, you need to call “CompositionInitializer.SatisfyImports(this);” just before iterating through the array list. Have a look into the code:

Now, run your application once again and this time you will see the EmployeeWidget added to the UI screen with a text “Employee Widget” having a Red background. Here is the screenshot of the same:

Woho!!! Nice. We didn’t create the object of the UserControl and add it to the ItemsControl. The MEF framework did it for us. Once satisfied, it created the object and imported it to the MainPage.

Designing Customer Widget

That’s it. Now we will do one more thing. We will create another UserControl named “CustomerWidget” and follow the same steps mentioned above for exporting the control. This time we will set the text to “Customer Widget” and will set the background color to Green. This will make it easy for us to distinguish between the items.

Here is the XAML code of the CustomerWidget usercontrol:

Exporting Customer Widget

Now open the code behind file of CustomerWidget by pressing F7 in the xaml page and follow the same step as we did for the EmployeeWidget i.e. implement the CustomerWidget from the interface named IWidget and mark the class exportable by setting the Export attribute of the IWidget. Here is the code for your reference:

That’s it. This time we didn’t add/modify anymore code in our MainPage. Just run the application and you will see the CustomerWidget added in the panel along with the control named EmployeeWidget. See the screenshot of the same here:

Summary

So, what did we learn here? We learnt that without changing the original code, we can easily import any control with the help of MEF. It is very easy to plug something into our original application without doing any change in the main application. In such case, instead of updating the original application we can easily attach our feature like a plug-in.

Hope, this article helped you to understand the basic functionality of MEF with the help of Silverlight. In my next article, I will show you more on MEF with the help of a Console Application. Till then keep learning about MEF & do your small small POCs to learn in depth.

Please don’t forget to post your feedbacks and/or suggestions to improve this article. Appreciate your time for reading through this article.