April 23, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

How to Use MEF in Silverlight

  • June 13, 2011
  • By Arun Karthick
  • Send Email »
  • More Articles »

Introduction

In this article I will explain about the Managed Extensibility Framework (MEF) and demonstrate the its use in Silverlight. I will also provide the source code of a sample Silverlight application implementing the MEF concept.

For creating the sample application I used Visual Studio 2010 IDE and Silverlight 4.0.

What is MEF?

MEF was introduced as a part of .NET framework 4.0. As the name indicates, MEF is helpful in improving the extensibility of an application. The concept is like modules, which can be developed independently with zero dependency. During run time these modules can be composed by the MEF framework and loaded into the application memory for further usage. The independent module will be exported and while composing uses the Managed Extensibility Framework. These exported modules will be imported for usage in the application. The modules which are to be imported or exported are termed as Parts.

Below are the advantages of using MEF:

  1. Parts are loosely coupled
  2. Extensibility is easy and straightforward
  3. Dependency between modules is eliminated
  4. Parts are composed at run time

MEF in Silverlight 4.0

The Silverlight MEF related classes are packaged under the namespaces System.ComponentModel.Composition and System.ComponentModel.Composition.Initialization. Below are some of the main attributes and methods:

  1. Export – Attribute used to export a MEF part
  2. Import – Attribute used to import a MEF part
  3. ImportMany – Attribute used to import many MEF parts
  4. SatisfyImports – Populates the respective Imports part

Demo Silverlight MEF application

As I have provided an insight about the MEF concept in the above sections, we will create a demo Silverlight application implementing MEF now.

Create a Silverlight application named SilverlightMEFSample. Add a reference to the two MEF libraries below:

  1. System.ComponentModel.Composition.dll
  2. System.ComponentModel.Composition.Initialization.dll

In the MainPage.XAML add a stack panel. The idea is to create multiple user controls as exportable parts then using MEF we will import and compose them onto the MainPage.XAML at runtime.

Now add a StackPanel named to the MainPage.XAML page as shown below. The composed parts will be added to this stack panel.

<StackPanel x:Name="MefContainerPanel" Orientation="Vertical">            
</StackPanel>

Now go ahead and add three Silverlight exportable user controls and name them as Part1.xaml, Part2.xaml and Part3.xaml.

Below is the code for all three parts:

Part1:

<Grid x:Name="LayoutRoot" Background="Red" >
        <sdk:Label Content="I am composed Part1" HorizontalAlignment="Center" FontWeight="ExtraBlack" FontSize="15"/>
</Grid>

namespace SilverlightMEFSample
{
    [Export(typeof(UserControl))]
    public partial class Part1 : UserControl
    {
        public Part1()
        {
            InitializeComponent();
        }
    }
}

Part2:

<Grid x:Name="LayoutRoot" Background="Blue">
        <sdk:Label Content="I am composed Part2" HorizontalAlignment="Center" FontWeight="ExtraBlack" FontSize="15"/>
</Grid>

namespace SilverlightMEFSample
{
    [Export(typeof(UserControl))]
    public partial class Part2 : UserControl
    {
        public Part2()
        {
            InitializeComponent();
        }
    }
}

Part3:

<Grid x:Name="LayoutRoot" Background="Green">
        <sdk:Label Content="I am composed Part3" HorizontalAlignment="Center" FontWeight="ExtraBlack" FontSize="15"/>
</Grid>

namespace SilverlightMEFSample
{
    [Export(typeof(UserControl))]
    public partial class Part3 : UserControl
    {
        public Part3()
        {
            InitializeComponent();
        }
    }
}

Notice that all the usercontrols are marked with Export attribute. Now go and implement the MainPage.xaml.

namespace SilverlightMEFSample
{
    public partial class MainPage : UserControl
    {
        [ImportMany]
        public UserControl[] Parts;

        public MainPage()
        {
            InitializeComponent();

            //Compose
            CompositionInitializer.SatisfyImports(this);

            //Loop through and add it to the StackPanel
            foreach (var part in Parts)
            {
                MefContainerPanel.Children.Add(part);
            }
        }
    }
}

In the above code the CompositionInitializer.SatisfyImports call performs the importing of the exported parts. That’s all--we are good to go. You can now run the application. Fig 1.0 below shows the output screen. Notice that all the three parts have been composed and added to the stackpanel.

Figure 1

Fig 1.0

Conclusion

I hope this article has provided a valuable insight about the Managed Extensibility Framework and implementing MEF in a Silverlight application. Please make use of the comments section to provide feedback or to ask for any clarification.

Happy reading!


Tags: Microsoft, Silverlight, tutorial, MEF, Managed Extensibility Framework




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel