I ran in to an interesting little feature in Silverlight 2b2 the other day. I was trying out a little idea I had. What would happen if I placed a Silverlight application with a width and height of 100% inside a DIV and then tried resizing the DIV using the HTML DOM bridge...? Well, I created a simple Silverlight application, which was basically a big button, and in the Click event I used the JavaScript bridge to resize the DIV dynamically. Worked like a charm. The DIV resized and the application followed along, just like I wanted. Until I started tweaking...
Time to take it a little further. What I was really looking to do was to have the DIV hidden and display it using JavaScript. That JavaScript would also call a function in the Silverlight application telling it to do something. I don't want to tell you too much about what I'm working on at the moment, so I will unfortunately be a little vague with the details...
To solve this, I set the CSS style for the DIV to hidden and added an anchor tag calling a JavaScript to change the visibility as well as call the method inside the Silvelright application. I also changed the Silverlight application to have the ScriptableObject attribute as well as registering the ScriptableObject in the Load eventhandler.
Back in IE I refreshed the page and clicked the anchor tag. The DIV went visible, but I got a JavaScript error saying "Object Expected". Hmmm... Thayt's wierd. So I changed the CSS letting the DIV be visible all the time. Refreshed the browser and the method was called like it should. Ok...this is annoying. I changed the implementation so that the DIV was visible, the buttons eventhandler would hide the DIV and the JavaScript would show the DIV and call the method as it should. Refresh...Clicked the button and the DIV disappeared...Clicked the anchor and the DIV became visible and I got a JavaScript error again.
After several different tests showing and hiding the DIV and testing the JavaScript bridge it seems to be that the bridge fails as soon as the Silverlight controls parent has it's visibility set to none. Kind of interesting. I have several ideas about why this could be, but they are all speculation so I wont tell you... :)
Solution? Yes...I did come up with an uggly ass solution that works. It actually works in both Firefox 3 and IE 7. What I decided to do was to set the height and width to 0 instead of hiding the layer. Makes it disappear, but doesnt brake the JavaScript bridge. So now I can create a hidden or partly hidden Silverlight application and the show it using JavaScript as well as tell it to do something. Hmmm...wonder what I'm working on? Well, maybe there will be an example in the future so stay tuned...