asked on

Silverlight Application Not Working in Web Content Page

I am trying to host a new silverlight application in an existing asp.net web application, using Silverlight 4. We currently use Master/Content pages in our existing web app. I copied the silverlight object tag created in the auto-generated "testpage" to a content page.

When accessing this content page, nothing happens - the silverlight application does not run, i don't see the animated circles, or anything. But if I create a regular aspx page - not using a master page, and copy the exact same silverlight object tag to it, then the silverlight application loads and runs perfectly.

I thought this was weird, and spent a while googling possible solutions. I found a post saying to change the height/width of the silverlight object tag to an actual px value instead of a % value. I did this, and it worked! Now my content page loads my silverlight application perfectly.

Why? I also do not like this solution - i want my silverlight application to take up 100% width and height, i dont' want to hard code actual px values. Does anybody know of a better solution to fix this?

Below is my silverlight object tag, using hard coding actual px values instead of %'s:

<div id="silverlightControlHost">
		<object id="silverlightObject" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="500px" height="1000px">
		  <param name="source" value="ClientBin/Sdi.Silverlight.Framework.xap"/>
		  <param name="onError" value="onSilverlightError" />
		  <param name="background" value="white" />
		  <param name="minRuntimeVersion" value="4.0.50401.0" />
		  <param name="autoUpgrade" value="true" />
          <param name="initParams" value="ApplicationName=Production" />
		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
		  </a>
		</object>
		<iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px">
		</iframe>
	</div>

Open in new window

ChetOS82

I think, and I am not sure about this, you need to setup a stylesheet and set html and body to 100%. After you do that, you can set the container to 100%.

<style type="text/css">
html, body {width:100%;height:100%;}
</style>

farminsure

ASKER

Thanks for the suggestion. I tried that, but did not work. As an extra measure, I also tried hard-coding a height/width of 100% directly in the html and body tags of the master page, just to eliminate potential style sheet issues, but that did not work either.

ChetOS82

Try taking the Width and Height attributes out of the Silverlight control.

farminsure

ASKER

We are getting closer! That sort-of worked. My silverlight application now loads! Yeah!
However, it only loads a small portion of the silverlight application - it appears that the height/width are getting cut off at about 200 or so px. Have any suggestions on what I can do about that?

ChetOS82

Do you have other controls in the Silverlight app that have a set Width and Height? Also, are you still setting the div to 100%?

farminsure

ASKER

In the Silverlight, I do not have hard-coded height and width. However, I am using a Javascript function to set the height and width of a StackPanel that surrounds my entire silverlight content. I had to do this to get my silverlight app to grow/shrink depending on which silverlight view was being shown...without this, my silverlight window would stay the same size no matter how wide or long the silverlight content was.
Maybe i dont' need this anymore?
Yep, I am setting the div surrounding my silverlight object tag to 100%.
Below is my entire code for the content page - the only thing on the content page is my silverlight control. Also is my silverlight MainPage code:

<asp:Content ID="ContentBody" ContentPlaceHolderID="cphBody" runat="server">

<script type="text/javascript">
function ResizeObject(height) {
try {
var host = document.getElementById("silverlightControlHost");
host.style.height = height + "px";
var slobject = document.getElementById("silverlightObject");
slobject.style.height = height + "px";
}
catch (err) { }
}
</script>
    
<!-- Object tag to host the Agent/Production Silverlight application -->
<div id="silverlightControlHost" style="height:100%; width:100%;">
<object id="silverlightObject" data="data:application/x-silverlight-2," type="application/x-silverlight-2">
  <param name="source" value="ClientBin/Sdi.Silverlight.Framework.xap"/>
  <param name="onError" value="onSilverlightError" />
  <param name="background" value="white" />
  <param name="minRuntimeVersion" value="4.0.50401.0" />
  <param name="autoUpgrade" value="true" />
          <param name="initParams" value="ApplicationName=Production" />
  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
  </a>
</object>
<iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px">
</iframe>
</div>

</asp:Content> 


MainPage.xaml:
<StackPanel x:Name="LayoutRoot" SizeChanged="LayoutRoot_SizeChanged">        
        <!--<ContentControl x:Name="contentHeader" HorizontalAlignment="Left"  VerticalAlignment="Top" Margin="0, 5, 0, 5" />-->
        <ContentControl x:Name="content"/>
    </StackPanel>   

MainPage.xaml.cs:
private void LayoutRoot_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            HtmlPage.Window.Invoke("ResizeObject", new object[] { e.NewSize.Height });
        }

Open in new window

farminsure

ASKER

I took out the code calling my javascript function for "resizing" my silverlight StackPanel control; so there are no height/width settings in my Silverlight page. But it still kept it at a really small size; is still cutting off the majority of my Silverlight content.

ASKER CERTIFIED SOLUTION

ChetOS82

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

farminsure

ASKER

Thanks for trying. Your suggestions have given me some ideas on some things i can try playing around with. I will also take a look at the CSS heiarchy.
Sorry, this is an internal company site; I don't have it published online anywhere.
Thanks for your help!

farminsure

ASKER

My issue was a CSS problem. My Height was getting overriden to 0px somewhere in the heiarchy of my CSS. So my Silverlight was getting loaded to the page, but the silverlight object tag was rendering with Height of 0. I Had to make some CSS changes to specify a Height on all of my parent controls surrounding the Silverlight object tag, and that made the height not get overriden to 0; that fixed my issue.