My last post was about laying Silverlight on top of HTML, using CSS for positioning and ordering of the layers.
However one thing that had me stumped for a bit was how to set the transparency on the Silverlight area. Surely it can't be that hard!?
In my previous post I mentioned, possibly using the CSS opacity setting on the <object> tag to achieve the goal. Having had a play around, I found that, yes you can do it that way, and it seems to work fine (keep in mind different browsers support it somewhat differently). However there is a much simpler and neater way of doing it.
In the default test page that gets created the <object> tag takes a parameter named background , this gave me the first clue.
To make what was a pretty long story short( the long version including me stumbling around trying to figure things out) , here is what I learned.
A. There seems to be some issues with passing in parameters to HTML <object>, I got caught out a few times making changes then refreshing the page and nothing happening (making me think I was doing it wrong), this went on until I found some resources confirming that I was in fact doing it the right way. Once I started closing and restarting the browser between changes, things worked a lot better.
B. The background and windowless attributes seem to be SL2 specific ones. Looking at various resources (including both W3C and Microsoft) covering the HTML <object> tag gave me no information, however eventually I came upon this blog post by Alex Golesh, that briefly talks about the difference in between SL2 and CreateSilverlight(), this post in itself didn't really tell me what I wanted to know but it pointed me onwards and evetually I found my way to the Microsoft SL2 documentation about Instantiating a Silverlight Plug-In. You can tell it's beta documentation but at least it's got some info, I guess this was a lesson learnt, start by looking at the MS documentation, then hit the web.
So, on to the actual solution!
As I said it seems like it should be pretty simple, and guess what, it is! There's two steps, first edit the hosting page, then make the necessary modifications to the XAML.
If you're hosting your SL in a HTML page, set the background parameter to transparent and the windowless parameter to true. Also keep in mind the size, building a full SL app this is usually set to 100% width and height, however if we want to use it together with the HTML, we want to change it to match the actual size of your XAML/Silverlight element.
If you're hosting it in a aspx page using the SL2 Silverlight control, you want to do the same adjustments as above, adjust the size, then add the parameters PluginBackground and Windowless.
As per usual when working with server controls you can either change things in code as per above or use the properties window as below.
Adjust the opacity/transparency of the XAML, this can be done in a few different ways and they have slightly different outcomes.
Setting the opacity of the user control
Or on the LayoutRoot element
Gives the following result
The thing to notice here is that the opacity setting is inherited by the children of the control it's set on.
Hence both the canvas and the button are effected in both cases.
A slightly different and most of the time a probably, a more appropriate way of setting the transparency/opacity, is to set the background of the LayoutRoot, to the hexadecimal representation of a colour and include the alpha transparency.
Which gives us the following result, where the background is semi transparent but the button is not affected.
Hope you find this useful, I've definitely found that resources in regards to this seems a bit sparse at the moment. And the ones that are out there can be a bit tricky to find.
Blog post by Malky Wullur on overlaying Silverligth on top of Virtual Earth, very cool.
Post by Alex Golesh on Instantiating a Silverlight Plug-In
Instantiating a Silverlight Plug-In (Silverlight 2)
Anyway, he was saying how he'd found plenty of resources on how to lay HTML on top of Silverlight but none about going the other way. As I'd actually been thinking about this anyway, I decided to have a go.
Stephen asked for a step by step walk trough so here we go ;)
First a bit of a anecdote, the first project I created I used the Generate HTML test page etc., I figured as we're just working with Silverlight and HTML I'd keep it simple by just using a HTML page to host the Silverlight (I'd not tried to option before).
The default test page which is created by VS in this mode is hidden in the Clientbin folder, it keeps getting re generated and edited by VS, and I found it a bit annoying to work with. Hence I added a new HTML page to work with, doing this I ran into issues where IE would block the silverlight object because it was unsafe :(
I'm guessing this has to do with the fact that this page is run off the file system in the browser rather then trough the inbuilt web server in VS.
Hence I went back and created a new project, I called it SilevrlightOnTop and set it up as a Web Application project, why a application rather then a website? Purely because I know it better and is more comfortable with this style of projects, I'm pretty sure it would work just the same in a Website project.
So this gives us the following structure, and as we're just going to work with Silverlight and HTML, I created a HTML test page (which doesn't have all the extra stuff you find in the auto generated test page and we can add just what we need).
To start with I'll make a couple of minor changes to the default xaml to make it at least a bit more fun to look at.
Next I add another div, named myContent below the silverlight one with some content, giving me the code and browser view below
Ok, but they're not on top of each other! Well lets fix that with some funky CSS.
The "z-index=1" sets the content div to be behind any other objects, then it gets positioned absolutely in the upper left corner and the background colour is set to orange.
As the "z-index" is higher then the content div, this div will lay on top, I then just moved it in 100pix from the top and from the left side.
Now if we view our page in a browser the view is quite different
Voila, Silverlight on top of HTML!
However, one thing I noticed was that the opacity I tried to set in the xaml, doesn't actually work in the browser so that's something to keep in mind. Update: Thinking about it, we might be able to set the opacity of the HTML objects in CSS, I'll have to try and let you know.
I'm also thinking to follow up on this with a step by step guide on how to get the Silverlight to interact with the HTML page. Say for example a button in the HTML calling up the Silverlight area and a button in the Silverlight to hide it. I'll also post up the code for this if anyone wants it.
But that's for tomorrow night :) Edit: If you're interested in semi transparent Silverlight on top of HTML, I've now made a post purely about that.
If you've keept an eye on my blog you would have seen that I've just put up a two part tutorial/article (part 1, part 2) on how to build a simple animated menu using Silverlight 2, Blend 2.5 and VS 2008.
What you might also have noticed is that I've not been posting very frequently, well let me give you a hint, the two are connected. Writing a tutorial and trying to do it properly is hard work! This was my first attempt at something like this and there where a couple of things I picked up along the way that I thought I'd share.
If you're going to include screenshots, get some decent screen capture software, it'll make your life a whole heap easier. A popular and good one seems to be Snagit, the only "snag" (ok that was a cheap one) is that it comes with a price tag. The one I'm using, at least for the moment is Desktop Screenshot Whiz, it doesn't have quite all the fancy features but it's free, easy to use and it gets the job done.
Make sure you know what the end product will look like. I.e write the code first, then the write up. I don't know how many times I did a bunch of screenshots and the text to go with them, to then realise, actually that's not they way I want to do it. And then having to go back to redo all the screen shots and changing the text. The tricky thing with this is that when you're writing about step A and taking screenshots, you don't want Step B to be seen. The way I dealt with this in the end was to have two VS solutions, one where I did all the coding and tested things etc. and one for taking screenshots and such, the later one is then the code you publish.
Use a tool like Windows Live Writer or similar, it gives you benefits like an easy way to include images and spell checking. I strongly advise against using Word to write your article, I thought I'd have a play with it, and found the formatting of my text and images once I uploaded them to the blog a nightmare to sort out.
Cheers, and happy coding!
As you might have noticed, I've not managed to get the code up for the Menu animation *blushing with shame*.
First I was extremly busy at work then I managed to steal a week away to go on the first proper holiday I've had for years!
For anyone waiting, I apologiese,the code is done and cleaned up, now I just need to do the write up :)
Meanwhile take a moment and ponder your wishlist for Silverlight 3.0, once you're done head over to Scott Barnes at the Mossyblog Times and submit it :)
Scott is the Product Manager on the Rich Client Platform team,dealing with Silverlight WPF etc. He's recently put out the call for the community's requests for Silverlight 3.0 so here's your chance to tell someone who's actually in a position to do something about it!