Skip to main content

Microsoft Silverlight

Answered Question how to use more than one silverlight control in one aspx page?RSS Feed

(0)

kent.zhou
kent.zhou

Member

Member

109 points

397 Posts

how to use more than one silverlight control in one aspx page?

When create a silverlight app, I can create silverlight usercontrol like page1, page2. Page1 and page2 are independent control.

After page1.xaml, page2,xaml. are confirmed. Then I want to use these silver light controls in aspx pages. For example, I want to put them into one page webform1.aspx and maybe mixed with some other asp.net traditional controls, like gridview, textbox. treeview, etc.

It looks like one silverlight project has only one entry point page(default page.xaml) to outside through app.xaml code behind.

With markup in testing aspx page, it looks like:

<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/SilverlightApplication1.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
        </div>
    </form>
</body>

 It only reference the whole file SilverlightApplication1.xap, no information allow to point a particulat silverlight control, such as page1.xaml or page2.xaml. only way it trhout app.xaml code behind to initialize page.xaml.

Is it possible to use silverlight control in aspx page same as traditional asp.net control like textbox, treeview and even I can put them inside UpdatePanel for ajax?

 Sample code please.

prujohn
prujohn

Contributor

Contributor

3567 points

703 Posts

Re: how to use more than one silverlight control in one aspx page?

Implement a single UserControl as a container (this can be a blank Canvas or Grid). Using the Loaded event of this container control, you can use code-behind logic to load in other UserControls, based on whatever criteria you desire, like so:

MyContainerControl_Loaded(object sender, EventArgs e)
{
     MyContainerControl.LayoutRoot.Children.Add(MyPage1UserControl);
}

To answer your second question, it is possible to integrate the Silverlight control with some Ajax controls. But if you read around the forums a bit, you'll find more information about this.  Some folks have reported cross-browser issues with Silverlight/Ajax integration.

sladapter
sladapter

All-Star

All-Star

17441 points

3,172 Posts

Re: how to use more than one silverlight control in one aspx page?

You can use InitParameter to indicate which UserControl you want to use as Root for your application. So you can have one Silverlight Application project, but on each different ASP.NET page, they load different UserControl as application start up page.

See this thread:

 http://silverlight.net/forums/p/21674/76345.aspx#76345

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

prujohn
prujohn

Contributor

Contributor

3567 points

703 Posts

Re: how to use more than one silverlight control in one aspx page?

Yeah I guess it depends on how early or late you need to make your content decision.

kent.zhou
kent.zhou

Member

Member

109 points

397 Posts

Re: how to use more than one silverlight control in one aspx page?

 Thanks for information. I followed the instruction from the link but get nothing.

My senario is:

 Create a silverlight app TestSilverlight with web app(default|). In the silverlight project, create 2 silverlight controls: Page.xaml and Page1.xaml.

Then change App.xaml code for Applocation_Startup as:

       private void Application_Startup(object sender, StartupEventArgs e)
        {
            //this.RootVisual = new Page();
            if (e.InitParams.ContainsKey("Control"))
            {
                this.RootVisual = this.GetType().Assembly.CreateInstance(e.InitParams["Control"]) as FrameworkElement; // Create your Control
            }
        }

 In web app aspx page set markup as:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestSilverlight.Web._Default" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <table>
            <tr>
                <td>
                    <div style="height: 100%;">
                        <asp:Silverlight ID="Xaml1"  InitParameters="Control=TestSilverlight.Page" runat="server" Source="~/ClientBin/TestSilverlight.xap"
                            MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
                    </div>
                </td>
                <td>
                    <div style="height: 100%;">
                        <asp:Silverlight ID="Xaml2" InitParameters="Control=TestSilverlight.Page2" runat="server" Source="~/ClientBin/TestSilverlight.xap"
                            MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

I pass the compiling. but when run the aspx page, nothing come out from silverlight control.  

How to fix this problem?

sladapter
sladapter

All-Star

All-Star

17441 points

3,172 Posts

Re: how to use more than one silverlight control in one aspx page?

Put break point at Application_Startup function to see what is going on. Check e.InitParams["Control"] to see what is the value of it? The value should be the FullName of your TestSilverlight.Page UserControl. Is this control at the same Assmebly as your App.xaml? Check what is this.RootVisual after CreateInstance call.

private void Application_Startup(object sender, StartupEventArgs e)
        {
            //this.RootVisual = new Page();
            if (e.InitParams.ContainsKey("Control"))
            {
                this.RootVisual = this.GetType().Assembly.CreateInstance(e.InitParams["Control"]) as FrameworkElement; // Create your Control
            }
        } 

The code above is a generic way to specify the start up control.  Another simple way (easy to understand, but you have add more cases if you add more pages) to do it is just specify the  InitParameters="Control=Page" or InitParameters="Control=Page2" etc, then create the Page control in your Application_StartUp function using the following code:

private void Application_Startup(object sender, StartupEventArgs e)
        {
            //this.RootVisual = new Page();
            if (e.InitParams.ContainsKey("Control"))
            {

                if(e.InitParams["Control"] == "Page")

                     this.RootVisual = new Page();

                if(e.InitParams["Control"] == "Page1")

                     this.RootVisual = new Page1();               
            }
        }  

 

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

kent.zhou
kent.zhou

Member

Member

109 points

397 Posts

Re: how to use more than one silverlight control in one aspx page?

 Yes, I did set the break and check the value for key/value when debugging. It looks fine.

Very interesting is: If I use default testing aspx TestSilverlightTestPage.aspx, it works fine. But if I use default.aspx page or any new aspx page, nothing happens.

What's going on? any setting or configuration place need to change  to slove this problem?

sladapter
sladapter

All-Star

All-Star

17441 points

3,172 Posts

Re: how to use more than one silverlight control in one aspx page?

What's in your default.aspx page? The TestSilverlightTestPage.aspx is generated by VS that contains correct Sivlerlight tag. Did you add Silverlight tag to your default.aspx page? Otherwise it does not even have any Silverlight control embed in it.

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

kent.zhou
kent.zhou

Member

Member

109 points

397 Posts

Re: how to use more than one silverlight control in one aspx page?

Here is the default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestSilverlight.Web._Default" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <table>
            <tr>
                <td>
                    <div style="height: 100%;">
                        <asp:Silverlight ID="Xaml1"  InitParameters="Control=TestSilverlight.Page" runat="server" Source="~/ClientBin/TestSilverlight.xap"
                            MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
                    </div>
                </td>
                <td>
                    <div style="height: 100%;">
                        <asp:Silverlight ID="Xaml2" InitParameters="Control=TestSilverlight.Page2" runat="server" Source="~/ClientBin/TestSilverlight.xap"
                            MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
                    </div>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

sladapter
sladapter

All-Star

All-Star

17441 points

3,172 Posts

Answered Question

Re: how to use more than one silverlight control in one aspx page?

 Try to put a height setting to the TD that contains the Silverlight control:

  <table>
            <tr>
                <td style="height: 100%;">
                    <div style="height: 100%;">
                        <asp:Silverlight ID="Xaml1"  InitParameters="Control=TestSilverlight.Page" runat="server" Source="~/ClientBin/TestSilverlight.xap"
                            MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
                    </div>
                </td>
                <td>
                    <div style="height: 100%;">
                        <asp:Silverlight ID="Xaml2" InitParameters="Control=TestSilverlight.Page2" runat="server" Source="~/ClientBin/TestSilverlight.xap"
                            MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
                    </div>
                </td>
            </tr>
        </table>

I think the your code is fine, just the TD is collapsed so you do not see the control inside of it.

 

sladapter
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

brijesh.tm.in
brijesh....

Member

Member

2 points

1 Posts

Re: Re: how to use more than one silverlight control in one aspx page?

thanks!

Brijesh
  • Unanswered Question
  • Answered Question
  • Announcement
Microsoft Communities