Take the Slalom Challenge at www.slalomchallenge.com!

A common challenge with building complex applications in Silverlight is the initial download size of the xap file.  MEF enables us to build composable applications that allows us to build complex composite applications.  Wouldn’t it be great if we had a mechanism to spilt out components into different Silverlight applications in separate xap files and download the separate xap file only if needed?

MEF gives us the ability to do this.  This post will cover the basics needed to build such a composite application split between different silerlight applications and download the referenced silverlight application only when needed.

Steps:

1.     Create a Silverlight 4 application

2.     Add references to the following assemblies:

System.ComponentModel.Composition.dll

System.ComponentModel.Composition.Initialization.dll

3.     Add a new Silverlight 4 application called ExternalSilverlightApplication to the solution that was created in step 1.  Ensure the new application is hosted in the web application for the solution and choose to not create a test page for the new application.

4.     Delete the App.xaml and MainPage.xaml files – they aren’t needed.

5.     Add references to the following assemblies in the ExternalSilverlightApplication project:

System.ComponentModel.Composition.dll

System.ComponentModel.Composition.Initialization.dll

6.     Ensure the two references above have their Copy Local values set to false.  As we will have these two assmblies in the original Silverlight application, we will have no need to include them in the built ExternalSilverlightApplication build.

7.     Add a new user control called LeftControl to the ExternalSilverlightApplication project.

8.     Replace the LayoutRoot Grid with the following xaml:

    <Grid x:Name="LayoutRoot" Background="Beige" Margin="40" >

        <Button Content="Left Content" Margin="30"></Button>

    </Grid>

9.     Add the following statement to the top of the LeftControl.xaml.cs file

using System.ComponentModel.Composition;

10.   Add the following attribute to the LeftControl class

    [Export(typeof(LeftControl))]

This attribute tells MEF that the type LeftControl will be exported – i.e. made available for other applications to import and compose into the application.

11.   Add a new user control called RightControl to the ExternalSilverlightApplication project.

12.   Replace the LayoutRoot Grid with the following xaml:

    <Grid x:Name="LayoutRoot" Background="Green" Margin="40"  >

        <TextBlock Margin="40" Foreground="White" Text="Right Control" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Center" ></TextBlock>

    </Grid>

13.   Add the following statement to the top of the RightControl.xaml.cs file

using System.ComponentModel.Composition;

14.   Add the following attribute to the RightControl class

    [Export(typeof(RightControl))]

15.   In your original Silverlight project add a reference to the ExternalSilverlightApplication project.

16.   Change the reference to the ExternalSilverlightApplication project to have it’s Copy Local value = false.  This will ensure that the referenced ExternalSilverlightApplication Silverlight application is not included in the original Silverlight application package when it it built.  The ExternalSilverlightApplication Silverlight application therefore has to be downloaded on demand by the original Silverlight application for it’s controls to be used.

1.     In your original Silverlight project add the following xaml to the LayoutRoot Grid in MainPage.xaml:

        <Grid.RowDefinitions>

            <RowDefinition Height="65*" />

            <RowDefinition Height="235*" />

        </Grid.RowDefinitions>

        <Button Name="LoaderButton" Content="Download External Controls" Click="Button_Click"></Button>

        <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" >

            <Border Name="LeftContent" Background="Red" BorderBrush="Gray" CornerRadius="20"></Border>

            <Border Name="RightContent" Background="Red" BorderBrush="Gray" CornerRadius="20"></Border>

        </StackPanel>

The borders will hold the controls that will be downlaoded, imported and composed via MEF when the button is clicked.

2.     Add the following statement to the top of the MainPage.xaml.cs file

using System.ComponentModel.Composition;

3.     Add the following properties to the MainPage class:

        [Import(typeof(LeftControl))]

        public LeftControl LeftUserControl { get; set; }

        [Import(typeof(RightControl))]

        public RightControl RightUserControl { get; set; }

This defines properties accepting LeftControl and RightControl types.  The attrributes are used to tell MEF the discovered type that should be applied to the property when composition occurs.

17.   Add the following event handler for the button click to the MainPage.xaml.cs file:

        private void Button_Click(object sender, RoutedEventArgs e)

        {

                DeploymentCatalog deploymentCatalog =

    new DeploymentCatalog("ExternalSilverlightApplication.xap");

                CompositionHost.Initialize(deploymentCatalog);

                deploymentCatalog.DownloadCompleted += (s, i) =>

                {

                    if (i.Error == null)

                    {

                        CompositionInitializer.SatisfyImports(this);

                        LeftContent.Child = LeftUserControl;

                        RightContent.Child = RightUserControl;

                        LoaderButton.IsEnabled = false;

                    }

                };

                deploymentCatalog.DownloadAsync();

        }

This is where the magic happens!  The deploymentCatalog object is pointed to the ExternalSilverlightApplication.xap file.  It is then associated with the CompositionHost initialization.  As the download will be asynchronous, an eventhandler is created for the DownloadCompleted event.  The deploymentCatalog object is then told to start the asynchronous download.

The event handler that executes when the download is completed uses the CompositionInitializer.SatisfyImports() function to tell MEF to satisfy the Imports for the current class.  It is at this point that the LeftUserControl and RightUserControl properties are initialized with composed objects from the downloaded ExternalSilverlightApplication.xap package.

18.   Run the application click the Download External Controls button and see the controls defined in the ExternalSilverlightApplication application loaded into the original Silverlight application.

Congratulations!  You have implemented download on demand capabilities for composite applications using the MEF DeploymentCatalog class.  You are now able to segment your applications into separate xap file for deployment.