Multiple Silverlight User Controls on aspx page

In this article I will discuss how to use multiple Silverlight controls in aspx page.

Silverlight does not have the Page type, the term is currently used is RootVisual UserControl. RootVisual object is analogous to the root window in WPF and can only be set once for the lifetime of the app, and is effective once the Application's Startup event is raised. But this not true, you can set RootVisual as many times you want. So Application_Startup can be used to call multiple Silverlight controls.

1. Create a Silverlight application in visual studio 2008
2. Add 3 new Silverlight controls and lets name them Header, Footer and Leftbar.
3. Now put some text in these controls so that they can be distinguished on the aspx page.

<UserControl x:Class="SilverlightApplication3.Leftbar"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="150" Height="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.RowDefinitions>

            <RowDefinition Height="400"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="150"/>

        </Grid.ColumnDefinitions>

        <Border Grid.Row="0" Grid.Column="0" BorderThickness="2" CornerRadius="10,10,10,10">

            <Border.Background>

                <LinearGradientBrush EndPoint="400,250" StartPoint="400,0" MappingMode="Absolute" SpreadMethod="Pad">

                    <GradientStop Color="#FF41E422" Offset="0"/>

                    <GradientStop Color="#FFF92909" Offset="1"/>

                </LinearGradientBrush>

            </Border.Background>

            <TextBlock Text="Leftbar" TextAlignment="Center" RenderTransformOrigin="0.5,0.5" Height="28">

                  <TextBlock.RenderTransform>

                        <TransformGroup>

                              <RotateTransform Angle="270"/>

                              <TranslateTransform/>

                        </TransformGroup>

                  </TextBlock.RenderTransform></TextBlock>

        </Border>

    </Grid>

</UserControl>

 

4. Call these control s in the Form of Testpageforsilverlightapplication and set the InitParameters.

<form id="form1" runat="server" style="height:100%;">

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <div  style="height:150px; width:100%; position:absolute; top:0px; left:0px;">

            <asp:Silverlight ID="Xaml1" runat="server" InitParameters="ControlId=Header" Source="~/ClientBin/SilverlightApplication3.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />

        </div>

        <div  style="height:400px; width:150px; position:absolute;left:0px;top:150px;">

            <asp:Silverlight ID="Silverlight2" runat="server" InitParameters="ControlId=Leftbar" Source="~/ClientBin/SilverlightApplication3.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />

        </div>

        <div  style="height:100px; width:100%; position:absolute;left:0px; bottom:0px;">

            <asp:Silverlight ID="Silverlight1" runat="server" InitParameters="ControlId=Footer" Source="~/ClientBin/SilverlightApplication3.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />

        </div>

</form>

 

 

5. Change the Application_Startup in App.xaml.cs as below.

private void Application_Startup(object sender, StartupEventArgs e)

        {           

            if (e.InitParams.ContainsKey("ControlId"))

            {

                switch (e.InitParams["ControlId"])

                {

                    case "Header":

                        this.RootVisual = new Header();

                        break;

                    case "Leftbar":

                        this.RootVisual = new Leftbar();

                        break;

                    case "Footer":

                        this.RootVisual = new Footer();

                        break;

                }

            }

}

 

Run the application and all the 3 controls can be seen on aspx page.  If we put a breakpoint at Application_Startup and we can see that it is called as many times as there silverlight controls on aspx page.