Silverlight doesn't show if everything is inside a table

6 replies. Latest Post by WishStar99 on February 1, 2008.

(0)

wishstar99

Member

132 points

140 Posts

Silverlight doesn't show if everything is inside a table

02-01-2008 11:48 AM |

Hi all,

I am just starting playing with silverlight. I'm encountering a problem where the silverlight doesn't come up on the browser when everything is inside a table.
Like this:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
   <div id="silverlightcontrolhost">
    <script type="text/javascript">
      createSilverlight();
    </script>
</div>
</td>
</tr>
</table>

if i remove the table completely, then everything works, but does not work inside a table. Any input would be appreciated. thank you.

//---------------------------------------------//
//------------------- Chloé ------------------//
//---------------------------------------------//

mchlSync

Star

14606 points

2,730 Posts

Re: Silverlight doesn't show if everything is inside a table

02-01-2008 12:28 PM |

Hello,

No. It depend on the size that you set to DIV (e.g. silverlightcontrolhost in your case) and XAML.

Try the code below. It will works.

(If this has answered your question, please click on "Mark as Answer" on this post. Thank you!)

Regards,
Michael Sync
Silverlight MVP

Blog : http://michaelsync.net

wishstar99

Member

132 points

140 Posts

Re: Silverlight doesn't show if everything is inside a table

02-01-2008 1:23 PM |

hi,

thanks for the reply. You're right, i missed the CSS. =)

but i'm still having a problem. Here's my HTML and so on.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html lns="http://www.w3.org/1999/xhtml">

<head runat="server">
<title>Untitled Page</title> </head>
<body style="margin: 0px; padding: 0px;">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server">
    <Scripts>
     <asp:ScriptReference Path="~/includes/Silverlight.js" />
     <asp:ScriptReference Path="~/includes/Default_html.js" />
     <asp:ScriptReference Path="~/includes/Page.xaml.js" />
   </Scripts>
</asp:ScriptManager>

<div><div id="silverlightControlHost" class="silverlightHost"></div></div>
    <script type="text/javascript">
      function onLoad(plugin,context,args) {
      slPlugin = plugin;
      slPlugin.content.onResize = onResize;
    }

   function onResize(sender, args)
   {
    updateLayout(slPlugin.content.actualWidth, slPlugin.content.actualHeight);
}

function updateLayout(width, height)
{
    var rectangle = slPlugin.content.findName("TheRectangle");
    if (rectangle!=null)
    {
      rectangle.width = width - 20;
      rectangle.height = height - 20;
   }
}

var slPlugin;
var SilverlightControl = document.getElementById("silverlightControlHost");
createSilverlight();

</script>

</form> </body> </html>

//---------------------------------------------//
//------------------- Chloé ------------------//
//---------------------------------------------//

wishstar99

Member

132 points

140 Posts

Re: Silverlight doesn't show if everything is inside a table

02-01-2008 1:23 PM |

Default_html.js file

function createSilverlight()
{
Silverlight.createObject("Page.xaml", SilverlightControl, "slPlugin",
{ width: "100%", height: "100%", background: "Yellow", isWindowless: "false", version: "1.0" },
{ onError: null, onLoad: onLoad }, null );
}

And Page.xaml file:

//---------------------------------------------//
//------------------- Chloé ------------------//
//---------------------------------------------//

wishstar99

Member

132 points

140 Posts

Re: Silverlight doesn't show if everything is inside a table

02-01-2008 1:42 PM |

so this works fine. The silverlight gets expand by the browser resize.

when i put everything inside the table:

<table border="0" cellpadding="0" cellspacing="0"><tr><td>
<div><div id="silverlightControlHost" class="silverlightHost"></div></div>
   <script type="text/javascript">
   function onLoad(plugin,context,args) { slPlugin = plugin; slPlugin.content.onResize = onResize; }
function onResize(sender, args) { updateLayout(slPlugin.content.actualWidth, slPlugin.content.actualHeight); }
   function updateLayout(width, height)
   {
     var rectangle = slPlugin.content.findName("TheRectangle");
     if (rectangle!=null) { rectangle.width = width - 20; rectangle.height = height - 20; }
   }

   var slPlugin;
   var SilverlightControl = document.getElementById("silverlightControlHost");
   createSilverlight();
</script>

</td></tr></table>

I can hear the music plaing, but don't see anything.

You said to add the CSS to div. OKAY i did it.

<div><div id="silverlightControlHost" class="silverlightHost"></div></div>

and set put this in the header:

I was able to accomplish it just HTML, but not with the xaml. here my CSS for the HTML only:

html,body { height: 100%; }
body
{
margin: 0 0 0 0;
background-image: url('../images/web_images/bgcolor.jpg');
background-position: 50% 50%;
background-repeat: repeat;
}

.table
{
width: 900px;
height: 100%;
background-image: url('../images/web_images/lightblue_bg.jpg');
}

hope you/anybody can help. thanks.

//---------------------------------------------//
//------------------- Chloé ------------------//
//---------------------------------------------//

mchlsync

Star

14606 points

2,730 Posts

Re: Silverlight doesn't show if everything is inside a table

02-01-2008 2:17 PM |

Can I ask you one thing before asking your question? Why do you want to use HTML table? I think HTML table-based layout is kinda obsolete.

You want to show your silverlight object at the center ( horizontally ). Okay. That's not an issue.

Try the following code.

Setting the Silverlight object at the horizontal center

TestPage.html.js

<!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>
    <title>Silverlight Project Test Page </title>

    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="TestPage.html.js"></script>
    <style type="text/css">
        .silverlightHost { width: 900px; height: 480px; }
    </style>
</head>

<body>
    <div>
    <center>
    <table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>

   <div id="SilverlightControlHost" class="silverlightHost" >
    <script type="text/javascript">
      createSilverlight();
    </script>
</div>
</td>
</tr>
</table>
</center>
    </div>
</body>
</html>

Page.xaml

<Canvas x:Name="parentCanvas"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="Page_Loaded"
        x:Class="Animation1.Page;assembly=ClientBin/Animation1.dll"
        Width="900"
        Height="480"
        Background="Red"
        >

</Canvas>

wishstar99:
I want it to be 100% ... when i set the width and height to 100% ... it doesn't work.

Setting 100% is weird. If you are using Silverlight 1.1, you have to do like that. (but if you are using Silverlight 1.0, you have to change the size of DIV onload event of body.) Otherwise, it won't work.. <link>

1. Set [Scriptable] in Page.xaml

2. Add the constructor in Page.xaml

public Page()
        {
            try
            {
                WebApplication.Current.RegisterScriptableObject ("EntryPoint", this);
            }
            catch ( Exception ex )
            {

            }

        }

3. Update this function in TestPage.html.js. (Take a look at bold)

document.body.onload = function() {
      var silverlightControl = document.getElementById('SilverlightControl');
      if (silverlightControl)
         silverlightControl.focus();

      var control = document.getElementById("SilverlightControl");
      control.Content.EntryPoint.InitResolution(screen.width, screen.height);

    }

4. Add this function in Page.xaml

double _width;
        double _height;

        [Scriptable]
        public void InitResolution(string width,string height)
        {
            _width = Convert.ToDouble(width);
            _height = Convert.ToDouble(height);
            this.SetValue (WidthProperty, _width);
            this.SetValue (HeightProperty, _height);
        }

then, it will work.

wishstar99:
I was able to accomplish it just HTML, but not with the xaml. here my CSS for the HTML only:

You was able to accomplish or you want to accomplish? Actually, you have to adjust the height and width at run time if you want 100%. It wont' work with CSS. (AFAIK)

(If this has answered your question, please click on "Mark as Answer" on this post. Thank you!)

Regards,
Michael Sync
Silverlight MVP

Blog : http://michaelsync.net

wishstar99

Member

132 points

140 Posts

Re: Silverlight doesn't show if everything is inside a table

02-01-2008 2:57 PM |

hey,

thank you for taking the effort and looking into my problem. Since the silverlight came out, everything confuses me. Silverlight 1.0, 1.1 and now there's a 2.0.

I don't know which one is 1.0 or 1.1 or even 2.0? I've used flash, but since Silverlight is out, why not. Since i'm a .NET 2.0 programmer with ASP.NET AJAX.

I tried to do Silverlight on VS2008 beta 2, but it adds so many DLLs into my bin folder that my hosting provider (GoDaddy) cannot run. Right now, I'm sticking with VS2005 and Expression Blend (December version)

If you have an example of setting the xaml content in the middle of the browser , so I don't have to use the <table>, than I will be very thankful.

I will look at your posting and give it a try. Thanks again ...

//---------------------------------------------//
//------------------- Chloé ------------------//
//---------------------------------------------//