MEF for Beginner – Part 3 (Hello Silverlight)
in this post we will cover the basic steps that is needed for building your first Silverlight MEF application.
the following instructions will lead you through very simple steps of building simple Silverlight shell application
that can consume plug-ins.
this post is written on Visual Studio 2010 and Silverlight 4.0 (using Visual studio 2008 and Silverlight 3
will need some minor modification and download the MEF Silverlight 3 bits from the MEF site).
in the next post on this series, we will extend the current post by learning how to consume external plug-ins using a-sync loading .
the code sample for this post can be download from here.
Step 1: Creating Silverlight Application
Create solution using the Silverlight application template.
Step 2: Setting the Shell layout
the layout of the shell will have 2 area (plug-in command area and main area):
the plug-ins commands will host in StackPanel control
and the main content area will have a Border and TextBlock controls within a Canvas.
add the following Xaml into the Grid element of the main page.
Step 3: Binding the StackPanel to plug-ins list
add the ItemControl element into the StackPanel (see it’s binding definition)
add ObservableCollection of UserControl property called ToolbarItems into the Shell code behind
(the binding definition at the Xaml level refer to this property)
initialize the ToolbarItems property and the Context at the constructor,
(the following lines should be add to the constructor).
Step 4: add reference to MEF
before adding the plug-able functionality, we have to add reference to MEF.
add new reference and browse for System.ComponentModel.Composition.dll under the following folder:
64 bit: C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Libraries\Client
32 bit: C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client
Step 5: decorate the ToolbarItems property
decorating the ToolbarItems property with ImportMany attribute, will shift the responsibility of
filling it with UserControl instances to MEF (which is basically saying to MEF
that it should add any item that was Export and match the contract (in our case UserControl).
the ToolbarItems should now look like this:
Step 6: expose the Element within the main area
the shell will expose the Border and the TextBlock within it main area so it can be
discoverable by the plug-ins.
to achieve this task we will add 2 properties (at the code behind) and decorate it with Export attribute.
Step 7: Create exportable entities (create plug-ins)
Note: on this post we will add the plug-ins within the same package as our Shell,
but in the next post in this series we will show how to discover exportable
parts within external packages.
Create Parts folder in the project and add Silverlight User Control (PlugableEffect1.xaml)
Step 7.1: Stet the look and feel of the effect command
add the following Xaml into the Grid element (of the effect xaml)
Step 7.2: Add TextBlock property that present the TextBlock at the Shell main area
also this plug-in is capable of manipulate a TextBlock, it shouldn’t be aware of
the TextBlock origin.
to achieve the above requirements we will once again add decorated property,
which will be assigned by MEF at runtime.
this time we expecting single value, therefore we will decorate the property with the Import attribute
rather the ImportMany attribute.
Note: MEF will find the exported TextBlock which we expose at step 6 and assign it into the following property.
Step 7.3: Set the effect command
looking at the Xaml of the button we can see that it use the Command="Binding"
this mean that the button expect ICommand implementation within it’s data context.
at the code behind of this effect, add the following line to the constructor.
and implement ICommand
Step 7.4: Export our effect
making the effect visible to MEF done by decorating the class with Export attribute.
Step 8: Create another exportable entities (create plug-ins)
repeat step 7 for Effect 2 (replace the Effect 1 text to Effect 2).
then add another property decorated with Import for the shell Border element.
replace the Execute method implementation of the Effect 2 command to the following:
Step 9: Compose it all together
before we continue we have to add reference to System.ComponentModel.Composition.Packaging.Toolkit.dll
this dll is part of the MEF Silverlight Toolkit
after installing the toolkit you can find the System.ComponentModel.Composition.Packaging.Toolkit.dll
at C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Nov09\Bin (for 64 bit)
and at C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Nov09\Bin (for 32 bit)
Step 9.1: Compose
the last step involve is asking MEF to compose.
we will supply MEF with some basics instruction and ask it to assign all the Import with
Export that matches the Import’s needs.
Add the following method to the App.xaml code behind.
the above code create a Catalog (at lines 3,4) ,
Catalog used as instruction for where to search for the compose-able parts.
in this case we instruct MEF to look for compose-able parts within the current Silverlight package.
at lines 5,6 we add the current instance of the Shell into CompositionBatch, this will instruct the MEF container
to use this instance rather of creating new one.
line 7, 8 add the Catalog and the CompositionBatch to a CompositionContainer and perform the composition.
the last peace of code is calling the above method from the application startup.
this post had demonstrate how to build compose-able shell using Silverlight 4.0.
in the next post we will continue to enhance the sample by adding a-sync loading capability
to external Silverlight packages that holding compose-able parts (Plug-ins).
the code sample for this post can be download from here.
you can find more information on how to use MEF over Silverlight in the following posts (by Glenn Block):
the MEF API for Silverlight Catalog has changed,
instead using the PackageCatalog you should now use the DeploymentCatalog.
other changes were:
PartIntializer renamed to CompositionInitializer (Silverlight only)
and PartCreator renamed to ExportFactory<T> and moved to System.ComponentModel.Composition.Initialization assembly (Silverlight only)