Web Development Adventures in a .NET world

By Ola Karlsson
Adobe to power NFL on the web, the race is on!

The US National Football League (NFL) and Adobe, yesterday announced that NFL has chosen Adobe Flash technology to deliver their online video content.

Personally I think this is great! But why you might say, aren’t you one of those Silverlight fan boy types?

Well even thought there might be some truth in that ;) I think looking at the bigger picture, this can only be a good thing. Adobe taking a step like this after Microsoft’s deal with NBC to broadcast the Beijing Olympics, now means the race is on for who’s technology will get to provide us with rich media content over the web. This means competition, competition in a market, which for quite a while now has been dominated by Adobe. As I’ve previously pointed out, I don’t think Silverlight will be the Flash killer media like to portray it as, but rather I think that it will provide some healthy competition to Adobe’s Flash / Flex platform. I very much look forward to seeing how this will play out. Hopefully it will mean better service to all the users on the web and better tools for us developers.

Animated Silverlight Panel on top of Html

As promised, here's my article from the "Silverlight: write and win" competition. 

A live example of the finished outcome can be viewed here: http://olakarlsson.com/SL2Beta2FlyoutDemo/SL2Beta2FlyoutDemoTestPage.aspx and the source can be downloaded from http://olakarlsson.com/downloads.aspx

Overview

In this article we’ll be looking at the concept of adding interactive Silverlight elements to existing Web pages to provide added rich features. We’ll be looking at creating an animated Silverlight panel which will slide in from the side of the browser window when a button is clicked.

The somewhat tricky bit is that we want the panel to lie on top on the normal HTML content of the page and when when the Silverlight UI is slid out we want to be able to interact with the HTML instead.
Why did I decide on this topic:

Working as an asp.net developer and having a keen interest for web development in general, I find this way of using Silverlight quite interesting but I have also found that it is not covered very much on the web at the moment.

Concepts and tools we’re using

Tools

  • Visual Studio 2008 with the Silverlight 2 Beta 2 tools installed
  • Blend 2.5 June Preview
  • C#

Concepts

  • Visual State Manager
  • Silverlight/Managed Code - DOM/JavaScript interaction
  • XHTML/CSS
  • Controlling the SL Plugin

First there was creation

First thing's first, open Visual Studio and create a new Silverlight 2 project/solution to get the full structure including a asp.net test project.

I created a new .Net 3.5, C#, Silverlight project and chose to add a Web Application project to test my Silverlight UI in.

(I only chose “Web Application” because that’s what I’m used to working with, you could as easily use a “Web Site” project.)

Once the IDE has finished loading our new solution, we want to open the page.xaml file in Blend, so we can create the Silverlight UI interface.

 image

Blending it up

In Blend, we now create our Silverlight interface.

For this demo I will simply use the default LayoutRoot grid and change the size to 200×300. However to create the effect we want, we then set the size of the usercontrol to 220×300.

Next drag on a button which we give a size of 20×40, then drag the button into position just outside the upper right corner of the grid. This is probably not the most elegant layout solution but as this article is about browser interaction and animating with Visual State Manager and not about advanced XAML layout, it’s good enough.

As a bit of a nice touch, we’ll make the background a dark semi transparent colour so that one implemented we’ll still be able to see a hint of the HTML content underneath it. To finish our UI, we also drag on a TextBlock, I then gave the controls the amazingly colourful names of “myText” and “myButton”. I also changed the foreground colour and font properties for the TextBlock so it will stand out a bit. This gave me the following:

image

<UserControl x:Class="SL2Beta2FlyoutDemo.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml
    Width="220" Height="300"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
    <Grid x:Name="LayoutRoot" Background="#35000000" RenderTransformOrigin="0.5,0.5" Width="200"      HorizontalAlignment="Left">
        <TextBlock Height="35" HorizontalAlignment="Stretch"
            Margin="41,42,45,0" VerticalAlignment="Top" FontSize="22"
            Foreground="#FFE25B1C" Text="TextBlock" TextWrapping="Wrap"
            x:Name="myText" FontWeight="Bold" />

        <Button HorizontalAlignment="Right" Margin="0,-1,-20,0"
            VerticalAlignment="Top" Content="&gt;" Click="myButton_Click"  x:Name="myButton"
            Width="20" Height="40"/>
    </Grid>
</UserControl>

Next we move on to use the new Visual State Manager to create our slide out, slide in effect. The Visual State Manger (VSM) is located in the upper left corner and lets us define visual “states” for our UI elements and group these states into “State Groups”. For our UI I defined a State Group called SlideStates and then added two States name Out and In, to it. Note that in VSM there is always a Base State which defines the default state/view in addition to any states you create. 

image 

Our next step is to define the base state of our UI, in our case we want create an effect where the UI comes sliding in from the side.

To accomplish this we first select the Base state, then we make sure the correct element is selected (the LayoutRoot grid) and finally we make any necessary adjustments. Since our UI is to slide in from out of view, it needs to start outside the screen, hence we set the x value for the LayoutRoot grid to a minus of its own width (in this case -200). This will set the main section of our UI off the screen but leaves the button on screen.

image 

Next we move on to defining our own states, as the Out state in fact will be the same as the Base state we don’t actually need to make any changes to it.

In the case of the “In” state however, we want the UI to be on screen. As per when we set up the base state, we select the state, then the element and finally make any adjustments. In this case, to bring the LayoutRoot grid back onto the screen we simply set the X value back to 0.

image

We can now preview the behaviour by clicking on out different states and seeing what happens. However if we were to run this as it currently is, the transition between the states would be pretty much nonexistent, so to get a nice animated transition between the states we use the “Transition Duration” in VSM, here I’ve set it to 0.4 of a second, meaning that, 0.4sec is the time it will take to transition from one state to another.

We could also add more specific transitions of we wanted by using the Add Transition buttons, however for our simply demo, the Default Transition setting works perfectly fine.

 image

Back to where we started (in VS2008)

With those final adjustments in Blend, it’s now time to go back to Visual Studio (VS), so make sure you have saved the changes and go back into VS, when asked if you want to reload the XAML, answer yes. NOTE: When the design surface in VS loads it will display and error message and won’t show the UI we created in Blend, this is a known bug and the good news is that the project will actually still build and when it’s run in the browser it should work fine.

So we now move from the world of XAML into the world of HTML, CSS and JavaScript. For this demo, I’m using the automatically created test page SL2Beta2FlyoutDemoTestPage.aspx, first step is to get the Silverlight plugin on top of the HTML. And to accomplish this we need to edit the default setup somewhat.

We’ll do it in a few steps:

1. To start with I’ve changed the size of the plugin, building a full Silverlight app the size of the Silverlight plugin is usually set to 100% width and height, however if we want to use it together with the HTML, we need to change it to match the actual size of your XAML/Silverlight element. We will also revisit these setting later when creating our slide in, slide out effect. This gives us the following:

<asp:Silverlight ID="Xaml1" runat="server"
                Source="~/ClientBin/SL2Beta2FlyoutDemo.xap"
                MinimumVersion="2.0.30523" Width="220" Height="300" />

2. Next we add another <div> tag with some HTML content, just after the div that holds the Silverlight plugin. (I’ve also set the background of the page to a gray colour so we can see better what’s happening with our Silverlight plugin).

<body style='height:100%;margin:0;background-color:#CCCCCC'>
    <form id="form1" runat="server" style='height:100%;'>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div id="SLDiv" >
            <asp:Silverlight ID="Xaml1" runat="server"
                Source="~/ClientBin/SL2Beta2FlyoutDemo.xap"
                MinimumVersion="2.0.30523" Width="220" Height="300" />
        </div>
        <div id="contentDiv" >
            <h2 style='text-align:center;'>Lorem ipsum dolor sit amet</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vestibulum lacinia tortor eros.</p>
            <p>Sed ornare ullamcorper lacus. Ut vel risus. Vestibulum laoreet ligula et, per inceptos himenaeos. Nulla ipsum. Nullam metus. </p>
            <p>Sed nisl nisi, sagittis non, ullamcorper ac, . Aliquam erat volutpat. In hac habitasse platea dictumst. Nunc vehicula enim et justo. </p>
        </div>
    </form>
</body>

All this will do however is to add some Content text on the page after our Silverlight plugin. You can note thought that we now can see the first part of our UI on the page!

image 

3. To actually get the Silverlight area on top of the other content we turn to the power of CSS, and make the following changes:

<div id="SLDiv" style='position:absolute; left:0; top:0; z-index:2;'>

<div id="contentDiv" style='position:absolute; top:0; left:0; z-index:1;'>

Basically, we’re using CSS to lock the two divs in absolute positions and then we use the z-index attribute to layer them on top of each other (higher number = higher up in the stack). These changes give us quite a different result, where the Silverlight plugin is layered on top of our HTML content.

image

Now some of you might be saying, “Hey, what happened the transparency we set back in Blend?”
Well, what we did in Blend was that we set the XAML to be semi transparent, but to get the actual plugin transparent there’s a couple of things we need to change in how we set up the plugin on our page. Namely we need to add the two new parameters, Windowless and PluginBackground to the Silverlight control:

<asp:Silverlight ID="Xaml1" runat="server"
                Source="~/ClientBin/SL2Beta2FlyoutDemo.xap"
                MinimumVersion="2.0.30523" Width="220" Height="300"
               Windowless="true" PluginBackground="Transparent" />

If we now run our page again, you should find that the Silverlight plugin area is no longer visible, so where’s our UI? Well all is as it should, as you might recall, the base state for our XAML UI is actually to start off page, hence we can’t see it!

image

However, to make things a bit easier for ourselves while working with the plugin, we’ll change the PluginBackground to Black for now, so we can see the plugin area.

But I want to see the rest of my XAML UI

Ok fair enough, this is all very exciting but I’m sure by now most of you want to see if this actually works?!

Well lets get coding! So to prove to you that this actually works, we’ll go over to VS and open up the code behind file for our XAML file “Page.xaml.cs”. Just as a quick test we make the following change to the Page method:

 

public Page()
        {
            InitializeComponent();
            VisualStateManager.GoToState(this, "In", true);
        }

All this does is that it tells the VSM, that our current control (this) should go to the state “In”, the final boolean value decides whether a transition should be used. If you now go ahead and compile the solution and run the  page, you should see our XAML UI slide in from the left hand side in all its glory! (Minus the transparency of course but we’ll get back to that later)

image

So how do we control this? We don’t want it coming in when the page loads! Well head back into code land.

Take control

Step one of taking control of our animated UI is to create a new event handler for out button, open the XAML view of Page.xaml, in the tag for the button, add a Click event:
image

Next right click on the new event and select “Navigate to Event Handler”, this will take us into the code behind file straight to the newly created event handler. Once there, simply move the line for the VSM interaction from the Page method into the new event handler. In the code behind make the changes to make it look like the following code:

public partial class Page : UserControl
{
    String state;

    public Page()
    {
        InitializeComponent();
        state = "out";
    }

    private void myButton_Click(object sender, RoutedEventArgs e)
    {
        if (state == "out")
        {
            VisualStateManager.GoToState(this, "In", true);
            state = "in";
            myButton.Content = "<";
        }
        else
        {
            VisualStateManager.GoToState(this, "Out", true);
            state = "out";
            myButton.Content = ">";
        }
    }
}

Basically we’ve set up a variable to hold the current state of the control, then we’re using the Click event handler to slide the UI in or out based on the value in out variable. Just as an extra touch I also change the content (text) of the button to reflect which direction it will go when clicked.

So if we now set the PluginBackground to Transparent, we’re done right?!

We’ll, almost, the problem we’ll run into with our project that way it is currently. Is pretty plain to see while we don’t have the PluginBackground set to Transparent, as the Silverlight plugin is layered on top of our HTML, it stops us from interacting with the HTML below. Setting the PluginBackground will let us see what’s underneath, but as I’ve been pointing out to people when discussing these kind of implementations, just because you can see it doesn’t mean you can click it!

So how do we solve this problem? In steps JavaScript to save the day!

 

Two worlds come together

To solve this issue, we’ll use JavaScript to change the size of the Silverlight plugin container.

First we need to make a couple of adjustments to the Silverlight plugin tag, we’re adding a OnPluginLoaded event which I’ve set up to call the JavaScript function “PluginLoaded”. That function will be used to get a JavaScript reference to the Silverlight plugin object.

We also set the width of the plugin to 20(the width of our button), this so that our button appears but the rest of the Silverlight area isn’t hindering us from interacting with the HTML. As we’re not changing the height there will be a narrow strip left but if we really wanted to we’d just change that as well.

image

Next we go into our Page.xaml.cs file and add a "using System.Windows.Browser; " then modify our Click event handler to what's shown below.

Then once we have the System.Windows.Browser using statement in place, we can use HTMLPage.Window to get a reference to the browser window and thereby interact with it from our managed code!  CreateInstance, simple calls and executes the JavaScript methods defined.

private void myButton_Click(object sender, RoutedEventArgs e)
{
    if (state == "out")
    {
        VisualStateManager.GoToState(this, "In", true);
        HtmlPage.Window.CreateInstance("GrowHorisontal");
        state = "in";
        myButton.Content = "<";
    }
    else
    {
        VisualStateManager.GoToState(this, "Out", true);
        state = "out";
        myButton.Content = ">";
       HtmlPage.Window.CreateInstance("DelayedShrink");
    }
}

Next step is to add the necessary JavaScript functions to the header section of out aspx page:

<head runat="server">
    <script type="text/javascript">
        var slCtl = null;

        function pluginLoaded(sender)
          {  // Get a refernce to the Silverlight plugin when the page loads
             slCtl  = sender.get_element();
          }  

        function GrowHorisontal()
        {
            //Grow the width
            slCtl.style.width='220px';
        }

        function DelayedShrink()
        {
            //Delay the call to the actual shrink function to let the animation finish before shrinking the area
            setTimeout(ShrinkHorisontal, 500);
        }

        function ShrinkHorisontal()
        {  //Shrink the area
            slCtl.style.width='20px';
        }
    </script>
    <title>Test Page For SL2Beta2FlyoutDemo</title>
</head>

Pheew, well the good news is, we’re almost done!

The only real thing that remains is to set the PluginBackground to Transparent and we’re done, if you’ve made it this far, give yourself a pat on the shoulder from me, well done for sticking with it. :)

The final thing I did was to set the background colour of the HTML body back to white to better see the Silverlight UI.

 

image

Conclusion

Using the new Visual Sate Manger we were able to very easily create a animated Silverlight and using JavaScript and CSS we dynamically slid the Silverlight on top of the HTML without hindering interaction with the HTML.
References:

Results of the "Silverlight: Write and Win contest"

As I mentioned in my last post, I entered an article in the "Silverlight: Write and Win contest" run by Michael Sync over at his blog.

Well, the results have been published and I was happily surprised to find that my article with the somewhat cryptic name "Silveright FlyoutPanel", actually ended up in second place!! :)

I must say I'm very happy with the result, especially after having to pull a couple of really late nights to get the article in on time. If you happen to have read the article over at Michael's blog and voted for it, thank you very much :)

As far as the name "Silveright FlyoutPanel" goes, basically the article describes how to create an animated sliding panel in Silverlight, and then laying it on top of an existing html page without restricting the access to the html content.

I need to make a couple minor changes to the article then I'll put it up here as well and make the source available.

Silverlight 2 writing competition

If you've not come across it yet, Michael Sync is running a conpetition for best Silverlight 2 article over at his blog http://michaelsync.net/.

There's about 10 or so submissions on various Silverlight 2 topics, all well worth checking out.

And while you're over there din't miss the chance to vote for my article Silveright FlyoutPanel  ;)

 

Web services, VSM, DOM interaction and other goodies

 

I’ve been playing around with a pet project lately calling web services, using VSM and interacting with the DOM etc.and I've finally gotten it to a state where I reckon it's wort show it to people without feeling ashamed ;)

I’ve implemented it on http://www.olakarlsson.com/ , excuse the sparseness of the site, it’s a work in progress ;),  what you’re looking for though is in the upper left corner of the browser window, it’s the “myFlickr” button.

I’m planning on trying to do a proper write up about it at some stage but to family commitments, it might not happen for a while....

A quick glance at the things that have gone in there however

· Calling Flickr Web service

· Using VSM for the UI

· Some Templates for the buttons

· Interaction with the HTML Dom and JS

The big one in my opinion, and which I’m pretty please with how it worked out is, that the flyout overlays the HTML but when it’s in the “out” state, it takes the div for the Silverlight HTML plugin with it, out of the window, so You can still interact with the HTML underneath, I hope that makes sense.

There’s some work still to be done, especially in the transitions between different states and some of the button effects etc., also it would be nice to pull in the info about the selected image from Flickr. But that's for version2 :)

Any constructive feedback is welcome.

Cheers,

Ola

Silverlight 2 Beta 2 has been released
Following my post last week about the imminent release of Silverlight 2 Beta 2, I thought I'd better point out to anyone who might have missed it, although I'm not sure how you would have if you have any interest in Silverlight ;). That Beta 2 has now been released, ScottGu the source of all knowledge, when it comes to Asp.Net related technologies has a post describing some of the changes and linking to even more detailed resources. Happy coding everyone :)

 

Silverlight 2 beta 2 available this week!!

I don't usually post news etc. as I think there are plenty of other people doing a good job in that area.

However I just saw something that got me really exited, Bill Gates announced today at Microsoft Tech·Ed North America 2008 Developers that Silverlight 2 beta 2 will be available this week!

And why is this sooo exiting, well for one thing it's one step closer to being RTW (Released To Web) it's also bound to have some bug fixes and possible some new features. However the really big deal is that it comes with a commercial Go Live license! So now we can finally start using Silverlight 2 in real world projects for clients.

Aside from looking forward to starting building real apps in Silverlight 2 myself, I'm also very much looking forward to seeing what other people will come up with now that it's commercially available.

Update: The folks over at the Silverlight SDK Blog now has a post that mentions some of the changes that we'll be seeing in Beta 2.

Silverlight, Microsoft's Flash Killer - NOT

As an early adopter of Silverlight etc. the one phrase that grates me each time I hear or read it is "Silverlight, Microsoft’s Flash killer".

And why does it so bother me? Well in my mind it's not a matter of one technology killing the other! As with most technologies, I believe that they'll quite happily live side by side, some people favouring one, some the other.

At least for the foreseeable future, it's not even a matter of who's got the bigger feature set etc., the hard reality, like it or not, is that corporate enterprise type of companies favours Microsoft technologies just like they lean towards Microsoft over open source solutions. While the smaller more fast moving Web 2.0 type companies favour technologies like Ruby on Rails, Flash/Flex and often use open source software.

I recently read a very interesting blog post called Post Microsoft MIX 2008 Thoughts, it's by a Flex/Flash developer called Jesse Warden and it gives an interesting insight into how Silverlight is probably viewed by many in the Adobe Flash/Flex camp.

The post is well written and fairly objective (not much of the MS bashing you might expect from a Flex/Flash developer), it covers his impressions of MIX 2008 and especially the Silverlight related topics that were demoed there. One thing that has stuck in my mind after reading it is how he felt frustrated over the "oohs" and "aahs" of the audience, over things now possible with Silverlight 2 but which according to him have been easily achieved with Flex and Flash for quite some time.

That exact type of thing however is one of the main reasons, which makes me believe that the feature set of the technologies play a lesser role than most may think.

Most people developing in the .Net space, who are often mainly focused on corporate enterprise type applications, just simply don't know anything about what is or isn't possible with technologies like Flex/Flash.

If we lived in a perfect world, we would all live and play together, .Net developers and architects with experience in building large scale enterprise applications, would be bringing their skills end experiences to the table. While the often more UX focused Flex and Flash developers would be bringing their expertise in building visually compelling and well functioning user interfaces along and together we'd be creating truly great User Experiences for the end users.


One can but dream ;)

Semi transparent Silverlight on top of HTML

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!?

Lessons learned

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.

SilverlightControlHost

Next I saw Michael Kordahi's example of overlaying SL on top of HTML and got some ideas from how he was doing things, the problem was that he was using the SL 1.0 way of calling up the silverlight using the createSilverlight() in a silverlight.js file etc. So I had to figure out how to translate that into what I was doing, it would seem pretty basic. Michael was passing in the following as part of his javascript call to create the Silverlight object. background:'transparent', isWindowless: 'true'. However passing in those as parameters to my HTML objet tag didn't work.

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.

Step 1 

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.

SL-HTML 
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.

SL-ASPX

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.
SL-Properties

Step 2

Adjust the opacity/transparency of the XAML, this can be done in a few different ways and they have slightly different outcomes.

Option 1

Setting the opacity of the user control
image
Or on the LayoutRoot element
image 
Gives the following result
image
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.

Option 2

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.
image
Which gives us the following result, where the background is semi transparent but the button is not affected.
image 

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.

Links

Blog post by Malky Wullur on overlaying Silverligth on top of Virtual Earth, very cool.
http://geeks.netindonesia.net/blogs/malky/archive/2008/04/16/route-animation-silverlight-with-virtual-earth.aspx

Post by Alex Golesh on Instantiating a Silverlight Plug-In
http://blogs.microsoft.co.il/blogs/alex_golesh/archive/2008/03/16/silverlight-2-amp-createsilverlight.aspx

Using Silverlight.js
http://msdn2.microsoft.com/en-us/library/cc265155(VS.95).aspx

Instantiating a Silverlight Plug-In (Silverlight 2)
http://msdn2.microsoft.com/en-us/library/cc189089(VS.95).aspx#

HTML Objects
http://msdn2.microsoft.com/en-us/library/ms535859(VS.85).aspx#

Silverlight on top of HTML

A question popped up on the OzSilverlight mailing list regarding how to lay silverlight on top of HTML.

The question was by Stephen Price, who I happen to know from the .Net scene here in Perth, Stephen is something as rare, as a mix between .Net developer and Cartoonist, beside being a nice guy :)

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 :(

image

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.

image

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).

image

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.

image

Next I went to the HTML test page and copied over the "silverlightControlHost" div from the auto generated test page. But took out a couple parameters we don't need.
image

Also I edited the width and height of the object tag to match what I did in my xaml (we don't want the tag to be bigger than needed).
image

Next I add another div, named myContent below the silverlight one with some content, giving me the code and browser view below

image    image

Ok, but they're not on top of each other! Well lets fix that with some funky CSS.

Start with adding the following line of code to the myContent div:image

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.

Next similarly add the following line to the silverlightControlHost div:image

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

image

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.

More Posts « Previous page - Next page »