Silverlight Tips of the Day - Blog by Mike Snow

Silverlight Tip of the Day #84 – How to Dynamically Load a Control from a DLL

If you have a large game or application it might be wise to break it up into smaller components (DLL’s) that can be downloaded to the client from the server as needed. This way your customers are not stuck waiting for a large download to complete when they first connect to your application on the web.

In this tip I will show you how to package Silverlight controls into a DLL and place them on your web server. Then, I will show you how to have the client download the DLL, create and instance of the Silverlight control from the DLL and then to add the control to your Silverlight application.

Step 1. Create a Silverlight Component DLL.

To start, create a new Silverlight Class library. This can be done through the menu in VS: File | New->Project. In Project Types expand the Visual C# node and choose Silverlight. From the Templates pane on the right of this dialog choose Silverlight Class Library. Give the project a name (such as “Mage”) and click OK on the dialog when ready.

In the Solution Explorer right click on your Class node and choose Add->New Item. This will bring up the Add New Item dialog. Select Silverlight User Control, give it a name (such as “Mage.xaml”) and click OK when ready.

Add whatever content you want to this control. For my demo purposes I have simply added an image of a mage character.

<UserControl x:Class="Mage.Mage"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation 
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml 
    Width="96" Height="96">
    <Canvas>
        <Image Source="mage.png"></Image>
    </Canvas>
</UserControl>

Ctrl+Shift+B to build the project. This will put your component in a DLL in your bin folder such as bin\Mage.dll.

Step 2. Create a Silverlight Application.

Now that you have your Silverlight component built and ready to go it’s time to create a Silverlight application that will load and display the component. Create a Silverlight application by selecting in the menu File->New Project and choosing Silverlight Application this time instead of Silverlight Class Library. Give the project a name (such as MyGame) and click OK when ready.

Copy the Silverlight component DLL that you built earlier (such as Mage.dll) to your Web site folder (such as MyGame\MyGame.Web).

Step 3. Download and Display the Silverlight Control

The following code below shows you how to load and display the Silverlight control. Few things to note:

1. Add a using statement to reference System.Reflection since they component we are creating is declared as an Assembly object.
2. Use the WebClient component to open a asynchronous read of the DLL.
3. Make certain you point to the absolute path of your DLL. An absolute path uses the full URL.
4. Once the download is complete the assembly is loaded and an instance of the control is created.
5. Finally the control is added to the root level of the application.

The result, a nice little mage is rendered:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Reflection;

namespace MyGame

{

    public partial class Page : UserControl

    {

        private Assembly _mageComponent;

        public Page()

        {

            InitializeComponent();

            LoadMageComponent();

        }

        private void LoadMageComponent()

        {

            WebClient downloader = new WebClient();

            downloader.OpenReadCompleted += new OpenReadCompletedEventHandler(downloader_OpenReadCompleted);

            string component = "Mage.dll";

            string absoluteUri = System.Windows.Application.Current.Host.Source.AbsoluteUri;

            string path = absoluteUri.Substring(0, absoluteUri.IndexOf("ClientBin")) + component;

            downloader.OpenReadAsync(new Uri(path, UriKind.Absolute));

        }

        void downloader_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)

        {

            AssemblyPart assemblyPart = new AssemblyPart();

            _mageComponent = assemblyPart.Load(e.Result);

            UserControl control = (UserControl)_mageComponent.CreateInstance("Mage.Mage");

            LayoutRoot.Children.Add(control);

        }

    }

}

Thank you,
--Mike Snow

 Subscribe in a reader