locked
Silverlight Web App Page Centering RRS feed

  • Question

  • My app is centered in the web page when I build and run the solution in Blend 4, but when I run the Default.html from the Web site folder, it's in the top left corner of the page.

    I have the Layout Root - Layout set to 1024 x 768 with the User Control itself set to Auto for Width and Height. I've got the vertical and horizontal alignments of both the layout root and user control set to stretch - when I tried setting them to center, either nothing happened, or the build also moved to the top left on the page also

    I've tried every combination of Layout - Auto and alignment and can't shift the deployable version to the center of the page. Does anyone have any suggestions?

    Thanks,

    Gary

    Monday, June 27, 2011 3:35 PM

Answers

  • Wrap it in a div:
    <div style="width:1024px; margin: 0px auto;">
      <!-- Silverlight goes here -->
    </div>
    

    You have to remember, SL isn't native to browsers - it's a plugin. To position it on the page, you still need to use the standard html layout techniques.
    Leon Terry
    Blog | TFK Labs | Twitter
    • Proposed as answer by VLTII Monday, June 27, 2011 3:46 PM
    • Marked as answer by Kvinneby Monday, June 27, 2011 7:16 PM
    Monday, June 27, 2011 3:45 PM
  • After you build your app, go to Bin > Debug > TestPage.  You can just copy the html code from there and paste it into the web page you are designing.

     

    example:

    <div id="myDivToHoldSilverlight" style="margin: auto; position: relative; width: 300px; height: 150px; z-index: 1;">
    
    <form id="form2" runat="server" style="height:100%">
     <div id="silverlightControlHost0">
      <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" style="width: 300px; height: 150px">
    		 <param name="source" value="MusicPlayer.xap"/>
    		 <param name="onError" value="onSilverlightError" />
    		 <param name="windowless" value="true" />
    		 <param name="background" value="transparent" />
    		 <param name="minRuntimeVersion" value="4.0.50826.0" />
    		 <param name="autoUpgrade" value="true" />
    		 <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.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="I1" style="visibility:hidden;height:0px;width:0px;border:0px" name="I1"></iframe></div>
     </form>
    
    </div>
    
    

     

    If you want your app to show in all browser types you may want to include the <form> </form> tabs and set your app to an actual size rather than percentage.  Which could very well be wrong, but Firefox always gives me problems and this seems to work.

     

    ~Christine

     


    Oh and VL's answer is correct.  Wrap your silverlight code in a div and set that div's margins to auto.
    • Marked as answer by Kvinneby Monday, June 27, 2011 7:16 PM
    Monday, June 27, 2011 5:32 PM
  • Hi.

    I think you're on the right track (default.html).

    If it helps... below is a sample of how to wrap the control with a little additional css selectors for deliniation.

     

    <!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" >
    <!-- saved from url=(0014)about:internet -->
    <head>
     <title>test</title>

     <style type="text/css">
     html {
         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>

    <body>
     <!-- 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;color: Gray;"></div>
    <div  style=" width: 1024px; height:768px; margin: 0 auto;padding: 10px;background-color: #FF3333;">
     <div id="silverlightControlHost">
      <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
       <param name="source" value="ClientBin/test.xap"/>
       <param name="onerror" value="onSilverlightError" />
       <param name="background" value="white" />
       <param name="minRuntimeVersion" value="4.0.50826.0" />
       <param name="autoUpgrade" value="true" />
       <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.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>
    </div>
    </body>
    </html>

    • Proposed as answer by Carmine Z Monday, June 27, 2011 6:29 PM
    • Marked as answer by Kvinneby Monday, June 27, 2011 7:16 PM
    Monday, June 27, 2011 6:28 PM

All replies

  • Wrap it in a div:
    <div style="width:1024px; margin: 0px auto;">
      <!-- Silverlight goes here -->
    </div>
    

    You have to remember, SL isn't native to browsers - it's a plugin. To position it on the page, you still need to use the standard html layout techniques.
    Leon Terry
    Blog | TFK Labs | Twitter
    • Proposed as answer by VLTII Monday, June 27, 2011 3:46 PM
    • Marked as answer by Kvinneby Monday, June 27, 2011 7:16 PM
    Monday, June 27, 2011 3:45 PM
  • Thanks for the reply. I'm guessing this would be in the Default.html file in the Blend-generated site folder? Can you tell me where in that file...if so, would it be wrapping this (code illustrates what's already there)?

    	<div id="silverlightControlHost">
    		<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="1024" height="768">
    			<param name="source" value="ClientBin/Lungv5_1.xap"/>
    			<param name="onerror" value="onSilverlightError" />
    			<param name="background" value="white" />
    			<param name="minRuntimeVersion" value="4.0.50826.0" />
    			<param name="autoUpgrade" value="true" />
    			<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration: none;">
    			<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.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>
    

     Or have I got it all wrong?

     

     

     

     

    Monday, June 27, 2011 5:15 PM
  • After you build your app, go to Bin > Debug > TestPage.  You can just copy the html code from there and paste it into the web page you are designing.

     

    example:

    <div id="myDivToHoldSilverlight" style="margin: auto; position: relative; width: 300px; height: 150px; z-index: 1;">
    
    <form id="form2" runat="server" style="height:100%">
     <div id="silverlightControlHost0">
      <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" style="width: 300px; height: 150px">
    		 <param name="source" value="MusicPlayer.xap"/>
    		 <param name="onError" value="onSilverlightError" />
    		 <param name="windowless" value="true" />
    		 <param name="background" value="transparent" />
    		 <param name="minRuntimeVersion" value="4.0.50826.0" />
    		 <param name="autoUpgrade" value="true" />
    		 <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.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="I1" style="visibility:hidden;height:0px;width:0px;border:0px" name="I1"></iframe></div>
     </form>
    
    </div>
    
    

     

    If you want your app to show in all browser types you may want to include the <form> </form> tabs and set your app to an actual size rather than percentage.  Which could very well be wrong, but Firefox always gives me problems and this seems to work.

     

    ~Christine

     


    Oh and VL's answer is correct.  Wrap your silverlight code in a div and set that div's margins to auto.
    • Marked as answer by Kvinneby Monday, June 27, 2011 7:16 PM
    Monday, June 27, 2011 5:32 PM
  • I'm confused - I'm not 'designing a web page', I'm building a Silverlight + Web app. All the web stuff is generated automatically by Blend is it not - any changes I make should be exclusively in the Blend IDE, right? What I don't understand is what code in which Blend file I'm supposed to be wrapping in a <div>.

    Besides, when I first started working on this, the app in both the development server web page and the web app itself was showing up in the center of the page. Somewhere in the weeks I was working on it, I must have changed something (in the Blend IDE) but I can't figure out what.

    I'm building my Blend app with IE9, so I'd expect the dev. server version to be the same as the generated web version. If I run Bin\Debug\Testpage.html, it also comes out centered like I want, but not in the generated version.

    Anyway, if I can get around it by doing what has been suggested, I'd like to try it - I just need to know which file to modify :)

     

    Thanks

    Monday, June 27, 2011 6:00 PM
  • Hi.

    I think you're on the right track (default.html).

    If it helps... below is a sample of how to wrap the control with a little additional css selectors for deliniation.

     

    <!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" >
    <!-- saved from url=(0014)about:internet -->
    <head>
     <title>test</title>

     <style type="text/css">
     html {
         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>

    <body>
     <!-- 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;color: Gray;"></div>
    <div  style=" width: 1024px; height:768px; margin: 0 auto;padding: 10px;background-color: #FF3333;">
     <div id="silverlightControlHost">
      <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
       <param name="source" value="ClientBin/test.xap"/>
       <param name="onerror" value="onSilverlightError" />
       <param name="background" value="white" />
       <param name="minRuntimeVersion" value="4.0.50826.0" />
       <param name="autoUpgrade" value="true" />
       <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.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>
    </div>
    </body>
    </html>

    • Proposed as answer by Carmine Z Monday, June 27, 2011 6:29 PM
    • Marked as answer by Kvinneby Monday, June 27, 2011 7:16 PM
    Monday, June 27, 2011 6:28 PM
  • I've always built my web pages in Expression Web, imported the XAP file from the Blend Project Bin > Debug > myXapFile.xap and included it in my html page I am building.  Wrapped in a div like VL said.

     

    If you are simply going to upload the default.html and xap file generated in Blend, then change your default.html to have the div wrapper. 

     

    I believe there is a video in the "Learn" section of this site on how to publish your work to the internet.

     

    Good luck!

     

    ~Christine

    Monday, June 27, 2011 6:30 PM
  • It seems odd to me that I have to modify the generated default.html like that, but I'm grateful for the suggestions - it works.

     

    Thanks again,

     

    Gary


    Monday, June 27, 2011 7:17 PM