Silverlight Application Not Working in Web Content Page

farminsure
farminsure used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
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>

Author

Commented:
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.

Commented:
Try taking the Width and Height attributes out of the Silverlight control.
Exploring SharePoint 2016

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

Author

Commented:
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?

Commented:
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%?

Author

Commented:
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

Author

Commented:
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.
Commented:
Ok, this sounds like to goes beyond my Silverlight experience.  Try pressing F12 in IE and find the container div, see if you can figure out if something is constraining the size.

If the site is available online I can take a look.

Author

Commented:
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!

Author

Commented:
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.
 

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial