Silverlight Tip of the Day #37 – How to Dynamically Load and Display Silverlight Applications
Up to now we have been statically declaring our Silverlight application in our web page ASPX file directly like this:
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication29.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />
</div>
</form>
</body>
The purpose of this tip is to show you how to dynamically load and display Silverlight applications. This is useful if you want to switch between Silverlight applications shown on a web page. For our demo purpose, we will create a single page with two Buttons and one Panel. Pushing Button #1 will load the first Silverlight application into the panel. Pushing Button #2 will load a second Silverlight application into the Panel.
To accomplish this follow these steps:
- Create a new Silverlight Application project in Visual Studio 2008. To do this, simply choose File->New Project, Silverlight Application.
- Right click on the project node in Solution Explorer, choose Add->New Project, Silverlight Application and link it to the web site. This way you will have two Silverlight applications associated with the web site.
- Open default.aspx and add a ScriptManager, Panel, and two Buttons as shown below.
- Make default.aspx your default web page by right clicking on it and selecting “Set as Start Page”.
<body style="height: 100%; margin: 0;">
<form id="form1" runat="server" style="height: 100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="SilverlightApp" runat="server">
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="Show First App" OnClick="OnShowFirstApp"
OnCommand="Button1_Command" />
<asp:Button ID="Button2" runat="server" Text="Show Second App" OnClick="OnShowSecondApp"
OnCommand="Button1_Command" />
</form>
</body>
- In the code behind in Default.aspx.cs add the to two events as shown below. In each event we are dynamically creating the Silverlight control and setting the Source to point to the XAP file.
protected void OnShowFirstApp(object sender, EventArgs e)
{
System.Web.UI.SilverlightControls.Silverlight sl = new System.Web.UI.SilverlightControls.Silverlight();
sl.Source = "ClientBin/SilverlightApplication1.xap";
sl.ID = "SilverlightApp1";
sl.Width = new Unit(800);
sl.Height = new Unit(600);
sl.Windowless = true;
SilverlightApp.Controls.Clear();
SilverlightApp.Controls.Add(sl);
}
protected void OnShowSecondApp(object sender, EventArgs e)
{
System.Web.UI.SilverlightControls.Silverlight sl = new System.Web.UI.SilverlightControls.Silverlight();
sl.Source = "ClientBin/SilverlightApplication2.xap";
sl.ID = "SilverlightApp2";
sl.Width = new Unit(800);
sl.Height = new Unit(600);
sl.Windowless = true;
SilverlightApp.Controls.Clear();
SilverlightApp.Controls.Add(sl);
}
Looking at the code above you will see we first declare a Silverlight object which is found in the namespace System.Web.UI.SilverlightControls. Once created, we set the Source to point to the location of the Silverlight application’s XAP file. Optionally, we also set an ID, width, height and Windowless = true.
Download this entire project here: Source Code
Thank you,
--Mike Snow
Subscribe in a reader