How to reference a silverlight user control?

Question

I am trying to build a library of silverlight controls where the client can choose which control they want to use. The Silverlight Application project will have several user controls. The structure is something like:

Project
-App.xaml
-MainPage.xaml
--Controls (Folder)
------ControlA.xaml
------ContorlB.xaml

How can i reference ControlA or ControlB from my HTML pages? It seems like its only possible to reference xap assemblies so do i need to create a Silverlight application for each usercontrol? Seems like overkill?

If i wanted to use ControlA from the library so i want to be able to do something like:

<object>
    <param name="source" value="ClientBin/Silverlight.xap"/>
    <param name="class" value="ControlA"/>
</object>

I know the above is not valid SL markup but i think you can understand what I'm trying to do?

Answer 1

Your Silverlight controls are not exposed to the HTML. The Silverlight app itself is merely an <object> in HTML markup (simplified story, of course); the controls are only available inside the Silverlight application.

There are ways of communicating between your Silverlight app and the web markup, e.g. you could find a way to have the Silverlight app change which control it's rendering.

Answer 2

You could have a controller XAML file which reads the InitParams.

Pass the value in HTML to Silverlight:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
      <param name="source" value="ClientBin/SilverlightApplication1.xap"/>
      <param name="onError" value="onSilverlightError" />
      <param name="initparams" value="control=ControlA" />
      ...

And in your Application_Startup event read out your value:

private void Application_Startup(object sender, StartupEventArgs e)
{
    var initParams = e.InitParams;

    if (initParams.Keys.Contains("control"))
    {
        if (initParams["control"] == "ControlA")
        { 
            // Render control A
            // this.RootVisual = new ControlA();
        } else  if (initParams["control"] == "ControlB")
        { 
            // Render control B
            // this.RootVisual = new ControlB();
        }
    }

    // Default page.    
    this.RootVisual = new MainPage();
}