locked
Silverlight application not showing up on html page. RRS feed

  • Question

  • I am building a Silverlight application + Web site project, but I can't seem to get the Silverlight application to show up on the html page.  I have tried to do it using javascript, and html, but nothing seems to work.  I have found a couple of tutorials, hand have followed them, but that didn't seem to work.  It doesn't throw any errors or exceptions, and the HTML page displays(minus the silverlight application) when I run it.  I have compared my code to several samples, but can't find any inconsistencies.

    Does anyone know where I can find some good tutorials or videos about the setup between the html and the xaml?  Any help would be greatly appreciated.

     

    Thanks,

    Chriss

    Thursday, October 6, 2011 9:32 PM

Answers

  • Thanks, Chuck for all of your help.  The problem was that I  am apparently not allowed to call a silverlight project inside of a form tag.  I didn't create the original web page, so when I removed the form tag, it fixed the issue.  The content that required the form tag has been removed, so it is no longer needed.

    Thanks again,

    Chriss

    Monday, October 10, 2011 5:36 PM

All replies

  • One good place to look would be to examine the default template when you create a new project.

     

    Otherwise, feel free to post your html here so we can take a look and try to locate the problem.

    Friday, October 7, 2011 2:37 PM
    Moderator
  • Thanks chuck.  I have compared my code to one of the samples that came with Blend, and I didn't see anything wrong.  I have to be missing something.  Here is my code for defining and using the silverlight in the page.

    <head>
        <title>ScrollingBanner</title>

        <style type="text/css">
        html, body {
            height: 100%;
            overflow: auto;
        }
        body {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #silverlightControlHost {
            height: 100%;
        }
        </style>
        <script type="text/javascript" src="Silverlight.js"></script>
        <script type="text/javascript">
            function onSilverlightError(sender, args) {
           
                var appSource = "";
                if (sender != null && sender != 0) {
                    appSource = sender.getHost().Source;
                }
                var errorType = args.ErrorType;
                var iErrorCode = args.ErrorCode;
               
                if (errorType == "ImageError" || errorType == "MediaError")
                    return;
               
                var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;

                errMsg += "Code: "+ iErrorCode + "    \n";
                errMsg += "Category: " + errorType + "       \n";
                errMsg += "Message: " + args.ErrorMessage + "     \n";

                if (errorType == "ParserError")
                {
                    errMsg += "File: " + args.xamlFile + "     \n";
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " + args.charPosition + "     \n";
                }
                else if (errorType == "RuntimeError")
                {          
                    if (args.lineNumber != 0)
                    {
                        errMsg += "Line: " + args.lineNumber + "     \n";
                        errMsg += "Position: " +  args.charPosition + "     \n";
                    }
                    errMsg += "MethodName: " + args.methodName + "     \n";
                }

                throw new Error(errMsg);
            }
        </script>
    </head>
    <form id="form1" runat="server">

    <table align="center" cellpadding="0" cellspacing="0" style="border: 1px solid #F5F5F5; width: 980px; height: 80px; background-color: #ffffff">
        <tbody>

        <!-- Runtime errors from Silverlight will be displayed here.
        This will contain debugging information and should be removed or hidden when debugging is completed -->
        <div id='errorLocation' style="font-size: small
        <div id="silverlightControlHost">
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
                <param name="source" value="ClientBin/ScrollingBanner.xap"/>
                <param name="onerror" value="onSilverlightError" />
                <param name="background" value="white" />
                <param name="minRuntimeVersion" value="4.0.50401.0" />
                <param name="autoUpgrade" value="true" />
                <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:0;width:0;border:0px'></iframe></div>
    </body>

    <body onload="FP_preloadImgs(/*url*/'button18.gif',/*url*/'button19.gif',/*url*/'button4C.jpg',/*url*/'button4D.jpg',/*url*/'button66.jpg',/*url*/'button67.jpg',/*url*/'button10.gif',/*url*/'button11.gif')" style="margin: 0px; background-color: #F1F3F5">
        <div id='errorLocation' style="font-size: small;color: Gray;"></div>
    <div id="silverlightControlHost">
    <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ec="http://schemas.microsoft.com/expression/2010/controls" xmlns:Expression_Samples_PathListBoxUtils="clr-namespace:Expression.Samples.PathListBoxUtils;assembly=Expression.Samples.PathListBoxUtils" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" mc:Ignorable="d"
        x:Class="ScrollingBanner.MainPage"
        Width="640" Height="480">
            <Style x:Key="NextButton" TargetType="Button"/>
            <Style x:Key="PrevButton" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content=""/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        etc...

    I tried putting this code into another project in Expressions Web, and now it is giving me an error on the xaml code: In XHTML 1.0 transitional the tag <UserControl> is not permitted.  It now shows all of the xmal code underlined in red. 

    I appreciate the help, as this is my second week at a new job, and I am trying to teach myself all of this to advance the company site.

    Thanks again,

    Chriss

    Friday, October 7, 2011 2:53 PM
  • If nothing shows up at all, it may not be able to find the .xap file as specified in the param source tag, the URI specified in your html is "ClientBin/ScrollingBanner.xap". This is relative to where your html document is I believe, so check if the .xap file is accessible by taking the URI to your webpage and changing the html file name to "ClientBin/ScrollingBanner.xap".

     

    Example:

    http://mywebsite.com/main/page1.html -> http://mywebsite.com/main/ClientBin/ScrollingBanner.xap

    Friday, October 7, 2011 2:59 PM
    Moderator
  • Chuck,

         I just tried that and it tried to download the xap file, so it is leading to the file.

     

    Thanks,

    Chriss

    Friday, October 7, 2011 3:03 PM
  • What browser are you using? Try it in IE and see if you get an error warning in the lower left corner.

     

    I would probably also try stripping out the <table> tags that surround the divs to see if they have any effect.

     

    Is this site publicly accessible? I might be able to determine the problem if you send me the URI. If you don't want to post it publicly you could email me at first.last@microsoft.com (using my name).

    Friday, October 7, 2011 3:05 PM
    Moderator
  • This is a project in process and is not on the web yet, but I will email code to you.  Being the company site, I am not comfortable posting it publicly.

     

    Thanks,

    Chriss

    Friday, October 7, 2011 3:10 PM
  • Let me know if you need any supporting files.

     

    Thanks,

    Chriss

     

    Friday, October 7, 2011 3:18 PM
  • The html doc you sent me is a bit malformed. The first few sets of tags are outside of the <body> tag.

     

    It is roughly:

    <html><head></head><form><table>...</table><table><body>....

    There are also multiple <body> tags, as well as some Xaml after that. XAML is meant to be compiled in a SL project, it won't work in html. You will need to clean up the html file a bit so there is a single <body> </body> tag that encloses the entire body as a start.

    Friday, October 7, 2011 8:04 PM
    Moderator
  • Okay,  I have cleaned up the code, and switched to try to load the .xap file:

    1    <div id='errorLocation' style="font-size: small;color: Gray;"></div>
    2
    3   <div id="silverlightControlHost">
    4        <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
    5            <param name="source" value="ClientBin/ScrollingBanner.xap"/>
    6            <param name="onerror" value="onSilverlightError" />
    7            <param name="background" value="white" />
    8            <param name="minRuntimeVersion" value="4.0.50401.0" />
    9            <param name="autoUpgrade" value="true" />
    10          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration: none;">
    11              <img src="http://go.microsoft.com/fwlink/?LinkID=161376" alt="Get Microsoft Silverlight" style="border-style: none"/>

    12         </a>
    13      </object><iframe id='_sl_historyFrame' style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    14  </div>

     

    When I control click  on line four:  data:application/x-silverlight

    I get the following error:

     

    Am I missing a plugin?  Any ideas?

     

    Thanks,

    Chriss

     

    Monday, October 10, 2011 4:38 PM
  • Thanks, Chuck for all of your help.  The problem was that I  am apparently not allowed to call a silverlight project inside of a form tag.  I didn't create the original web page, so when I removed the form tag, it fixed the issue.  The content that required the form tag has been removed, so it is no longer needed.

    Thanks again,

    Chriss

    Monday, October 10, 2011 5:36 PM
  • When I created my Silverlight solution, it created a test page with the following code (which has the Silverlight controlhost inside a form tag):

    <body>
        <form id="form1" runat="server" style="height:100%">
        <div id="silverlightControlHost">
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
    		  <param name="source" value="ClientBin/RemLifeWeb.xap"/>
    		  <param name="onError" value="onSilverlightError" />
    		  <param name="background" value="white" />
    		  <param name="minRuntimeVersion" value="5.0.61118.0" />
    		  <param name="autoUpgrade" value="true" />
    		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.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>
        </form>
    </body>

    What should it be?  It's just showing an empty page.  Any help is appreciated

    Wednesday, February 26, 2014 2:20 AM