Web Development Adventures in a .NET world

By Ola Karlsson

  • Past and current state of Smooth Streaming Development

    16/06/2010 - Update, this info was current when it first was published, however please note that it isn't any longer. Both the Smooth Streaming SDK/PDK and the SMF have had new versions released since this post was originally published, see more info at http://www.iis.net/download/SmoothClient and http://smf.codeplex.com/.  I'm hoping to get a post up coverering these new realeses in the near future.

    Over the last year, a rather large part of my development work has included working with IIS Smooth Streaming, especially in relation to Silverlight. 
    When I started looking at Smooth Streaming, about a year ago, there were not many places around the web where you could find Smooth streaming development related resources. And although the pictures is somewhat better today, there’s still not a whole lot of good material around, so I thought I’d try and putt together some posts sharing my experiences with Smooth Streaming development.

    My Smooth Streaming background

    About a year ago I started looking at building a solution for one of our clients, one of the main features, was to provide a rather large quantity of video material to their online users. Some of the requirements included, that the video content had to be “synced” with other content on the screen. At certain points in the video,  other content needed to change etc. however it also had to work the other way around. I.e. the video had to be able to respond to items on the screen being selected, by going to the corresponding spot in the video. As the client wanted a highly interactive and rich experience, and video delivery being such a large part. Silverlight was an natural choice for the general development technology, however how to deliver the video content took some consideration. Not having worked with media on the web previously I set out to see what the options were.

    The options

    I quite quickly ran into to trouble, finding that neither of the two most common approaches progressive downloads nor streaming media really suited my requirements. Progressive download, which is in general the most used technique, just couldn’t provide a rich enough experience, especially when it comes to start up time and “jumping around” (seeking) in the video.  Streaming Media provided a better experience but was still struggling to provide the level of smooth and rich experience we were aiming for. Plus the added complexity when it comes to requirements on servers and configuration for streaming, also added to making it a not so attractive option.

    IIS Smooth Streaming

    Luckily I remembered having recently heard about this new technology Microsoft had released called Smooth Streaming. After some initial research and tests, it quickly it became apparent that this was a pretty much perfect fit for what we needed. Very fast start-up time for the videos, almost instant seeking, support for markers in the videos and all of this provided by a free IIS plugin called IIS Media Services! Granted I never looked at what other companies beside Microsoft had to offer. A, I’m Working for a company specialising in the Microsoft stack, and B, once I had done some initial trials with Smooth Streaming, there was just no reason to look any further.

    The development experience back in the day

    The development experience back in those early days, left a lot to wish for. One of the major reason being that, as I mentioned earlier, there was almost no resources or documentation on how to build a Smooth Streaming enabled Silverlight player, on the web or elsewhere. Eventually Microsoft released a couple of templates for Expression Encoder which were Smooth Streaming enabled. And thanks to a blog post by Tim Heuer about “Using Expression Encoder templates in your Silverlight Applications”, I caught on to the fact that I could actually get hold of the source for those templates. So by looking at that code and by digging out the classes and libraries from there that I needed, I eventually managed to get my player going. I could of course have taken the source from one of the templates and just re-skinned it, however the template players included quite a lot of extra functionality and styles I didn’t need. Which would have added alot of extra size, to an already rather large xap file. Ripping out all the things I didn’t need, was an option but seemed like it would have been as much work as building my own. Anyhow, I got the player working and skinned as per the design, the client was duly impressed with the performance of the Smooth Streaming video delivery and was very happy.  

    Today’s experience

    For quite some time after Smooth Streaming was released, the development story was pretty much limited to what I just described, however over last few months, this has changed quite a bit.

    IIS Smooth Streaming Player Development Kit (SSPDK)

    It started with Microsoft releasing beta 1 of the “IIS Smooth Streaming Player Development Kit”,  which included the “Smooth Streaming Player SDK” in October last year (2009). The “SSPDK” (trust Microsoft when it comes to naming things) includes, a tool called pushencoder for simulating live smooth streaming scenarios, a xap file with a “sample player” built with the SDK and a dll, which once referenced in your project gives you a “Smooth Streaming Media Element” (SSME) control to use instead of the standard Media Element.

    The SSME (yes that’s what they’re calling it, see above comment about naming), has quite a lot of both basic and advanced functionality, including DVR capability for Live Smooth streaming and slow motion functionality, as well as fast forward and rewind. It also includes things like logging and ad playback integration, to help you with monetization (making money!).

    Beta 2 of the SSPDK was released in January 2010, even though it’s version 2, it is still very much in beta and it shows. For one the documentation is till very sparse and if you add the SSME to a “page” and then open it in Blend, Blend promptly Crashes (Microsoft.Web.Media.SmoothStreaming.dll, fileversion 3.0.711.8).

    Silverlight Media Framework

    Shortly after the SSPDK was released, the Silverlight Media Framework was released for PDC09 in November 2009. The Silverlight Media Framework (SMF) is a Codeplex project under the Microsoft Public License, and it’s built on top of the SSPDK. The SMF codebase has been used for a number of the big Smooth Streaming “Showcase” projects on the web, like Wimbledon, Sunday Night Football on NBCSports, the UEFA Super Cup on Canal+, Roland Garros and the Tour de France on France Télévisions (Source smf.codeplex.com).

    Since the initial release, there’s been another release and the current version is 1.1, however the team behind the SMF, only recently announced that they are now working on version 2.

    In addition to the functionality provided by the SSME, the SMF also include things like support for markers, the possibility of including external data, alternative language tracks and more.

    Plus of course the facts that it doesn’t crash when opened in blend and that they provide a number of videos and sample projects to show how to implement the SMF in a number of common scenarios.

    So where does this leave us

    Well basically, this leaves us in a heck of a better situation than we had a year ago, the development options are however still somewhat limited. Unless you want to use the source code from the player templates in Encoder, which I would probably only recommend if you pretty much like the template the way it is, and only want to make minor tweaks. The SMF is currently the only reasonably “accessible” option for doing custom Smooth Streaming Development, especially with the current lack of a fully supported Microsoft SDK.

    Personally, I think the SMF seems like a very good project and a good option if you want to do Smooth Streaming development (disclaimer, I’ve so far only been playing with it, and not actually used it for any major project), however the fact that it’s not an official product backed by Microsoft or any other company, might deter some people/companies. I've later been told by people involved with the Smooth Streaming project at Microsoft, that Microsoft is very much backing the SMF.

    I’m sure that by the time the SSPDK gets out of beta, the current issues will be fixed and the people who doesn’t want to or can’t use the SMF, will have a viable option open to them.

    Until next time

    With that I think it’s time to wrap this up, I hope that at least someone has made it this far down the page and that you’ve gotten something out of it :-)

    Until next time,


  • The Alternative Podcast List

    Earlier today I noticed a new post on Scott Hanselmans blog, where he lists potential technical podcasts for .Net developers and asks other to put up their lists.

    Now, most of the ones on his list are pretty much the same as I subscribe to, but having quite an interest in non .Net web development and RIA etc. I do have a couple he’s not mentioning.

    I figured I’ll just add the ones which are a bit different from the ones mentioned on Scots' list.

    • Pixel8ed http://getpixel8ed.com
      This is a podcast by Craig Shoemaker, who also does the Polymorphic podcast, where the Polymorphic podcast is aimed at general programming and .Net concepts. Pixel8ed is focused on UX and related ideas and areas.
    • RIA Weekly http://www.riaweekly.com/
      A podcast dedicated to news in the RIA space. Even though the podcast is sponsored by Adobe and one of the hosts is Ryan Stewart, a platform evangelist for Adobe, they do a pretty decent job of covering news across the board, not just Adobe specific things.
    • Boagworld http://www.boagworld.com/
      ”A podcast for those who design, develop or run websites”, a podcast mainly about web design but also covering thing like accessibility and web standards.


  • Silverlight 2 RTW on Monday?

    I just spotted this on Twitter and I must say this is looking good!

    Basically Microsoft came out yesterday on their PressPass site, with a press release saying that there will be a teleconference on Monday (13 October) where ScottGu (Scott Guthrie) will make a "significant announcement related to Microsoft Silverlight".

    I did some poking around on the internet and found one or two mentions of this, at ZDNet and on Kurt Brockett's blog but that was it, for some reason, maybe because it's weekend? This doesn't seem to have been covered much on other blogs, so I thought I'd spread the word :)

    On Kurt's blog there are some comments discussing the possible release, and among others, there's a comment by Adam Kinney hinting that he's busy upgrading his Beta 2 projects for release. Someone else however is saying that Silverlight 2 won't be released on Monday, and that it will just be an announcement about the release date.

    Either way, exiting stuff, bring on Monday!!




  • NFL Flash Player

    As per my last post the US National Footaball League (NFL) have choosen to go with Adobe and Flash to provide online video and media content. A couple of people like Gilbert Corrales  and Ryan Stewart have already had a look at the look and feel of the player and some of it's features. Notable features include 5 concurrent feeds giving the possibility to swap between cameras etc. Unfortunately, just as with the NBC coverage of the Beijing Olympics using Silverlight, the content on the NFL site is US only. So unfortunately no NFL Flash goodness for the rest of us.



  • 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


    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


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


    • Visual State Manager
    • Silverlight/Managed Code - DOM/JavaScript interaction
    • 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.


    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:


    <UserControl x:Class="SL2Beta2FlyoutDemo.Page"
        Width="220" Height="300"
        <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"/>

    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. 


    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.


    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.


    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.


    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"
                    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"
                    MinimumVersion="2.0.30523" Width="220" Height="300" />
            <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>

    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!


    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.


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


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


    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:

    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()
            state = "out";

        private void myButton_Click(object sender, RoutedEventArgs e)
            if (state == "out")
                VisualStateManager.GoToState(this, "In", true);
                state = "in";
                myButton.Content = "<";
                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.


    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);
            state = "in";
            myButton.Content = "<";
            VisualStateManager.GoToState(this, "Out", true);
            state = "out";
            myButton.Content = ">";

    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

            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
        <title>Test Page For SL2Beta2FlyoutDemo</title>

    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.




    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.


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


    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.

    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.

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

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

    Using Silverlight.js

    Instantiating a Silverlight Plug-In (Silverlight 2)

    HTML Objects


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


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

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

    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


    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.


  • Writing a tutorial

    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!



  • Sorry for the delay - meanwhile how about that SL 3.0?

    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!



  • Building a simple animated menu with Silverlight 2


    In this two part exercise, we’ll use MS Expression Blend 2.5 - March Preview and Visual Studio 2008 with Silverlight Tools Beta 1, in part one, we’ll use Blend to create the XAML for our menu and in part two we’ll use VS2008 to add the interactive elements.

    Update: I have updated the source code to work with Beta 2 and moved it to a different location, download the code here:  http://www.olakarlsson.com/Downloads.aspx

    Part 1 – Creating the XAML in MS Expression Blend 2.5 - March Preview

    Even though this part will mainly be done in Blend, we start by opening Visual Studio and creating a new project, New Project – Visual C# - Silverlight Application, I named it Silverlight2MenuDemo.
    This will bring up the following dialogue, where you can chouse if you want to host your Silverlight in a simple HTML page or if you want Visual Studio to create a Web site project or a web application project to host the Silverlight. I chose to create a Web Application project.



    Next step is to move into Blend, once your solution is loaded, you will have a Solution Explorer view similar to the one on the right in. As we want to use Blend for at least our initial XAML design, the next step is to right click the page.xaml file and select “Open in Expression Blend”. This will open up Expression Blend into the view below.










    Note when working with the tool box in Blend, as Blend is based on a designer style application, it uses a model where the same button can hold several options and if you’re not used to this it might be somewhat confusing.





    If a button has multiple options is indicated by a little arrow symbol and the options are accessed by clicking the button and holding the mousebutton down.





    To start with I changed the grid to a canvas and set the width and height, in this case 800 wide by 50 high and background White, no real reason for this except me being most comfortable working with the canvas layout model. If you want to view the whole canvas adjust the zoom.


    Ok, so there’s our background canvas, now as we’re building a menu, we need some menu options.

    To do this we start by adding a TextBlock, do this by selecting the TextBox tool and double click it.

     To be able to later access the canvas programmatically it needs to have a x:Name. You can either do this with Blend by right clicking the TextBlock object in the Objects and Timelines” view and choosing Rename. Or just add the x:Name property in the code view. In this case I decided to call it MenuItemHome.


     I then used the Properties toolbox to set the Foreground, Font size etc.  

    I also use the properties settings in Blend to change the cursor into a hand when hovering over the TextBox.




    Once that’s done, repeat the procedure and create two more menu items and then arrange them on the canvas, I’ve decided to put my Home in the middle (don’t worry too much about the positioning, we’ll change it later).


    Next step is to create the slider which will glide along and indicate the chosen option etc.

    As our slider we’ll use a rectangle, so add a rectangle to the canvas by double clicking the rectangle tool. I named it mySlider, and I again use the properties box to set the appearance of the object.






    Which will give something like the following:



    That’s the end of part one, in part two we’ll dive into Visual Studio and actually get it to do things.

    The source code for the project so far can be found here and part 2 shouldn't be too far away.

    Update: I have updated the source code to work with Beta 2 and moved it to a different location, download the code here:  http://www.olakarlsson.com/Downloads.aspx

    Hope you enjoyed the article, any constructive feedback is more than welcome as this is my first attempt at this sort of thing.

    I apologise for the somewhat bad quality of the screen shots, I'm still getting the hang of this whole blogging business. :)


  • What happened?

    Soo, I stated in my goals when I started this blog (not long ago at all) that I would post one general web dev related post a week and one code sample/tutorial style post per month.

    So does this mean I failed my goals already?

    I guess so....

    A strange thing happened and I've actually realised something about myself in the last couple of weeks, that I possibly knew but I don't think I'd really fully realised before.

    The team running http://www.asp.net/ had decided to open up for a number of new bloggers, a whole bunch of people jumped on the chance, me included. I read the Term of use and off I went, something that struck me right away was, is that it? Yes, that was it, as easily as that I now had a blog on weblogs.asp.net!

    However of course it wasn't as easy as that, there was quite quickly an outcry from the existing community. All these new people were posting all sorts of things, many of them not tech related. These posts, helped by the default functionality in community server, got posted to what's called the weblogs.asp.net "Main feed", a lot of people subscribing to that feed, pretty quickly got pretty sick of these "off topic" posts and the solution was to split the feed and cut the "new bloggers" from the main feed if "you made a non technical post and included it in the main feed, and it got some negative attention".

    Sorry if this seems a bit long winded, I'll get to my first point. 



    You give all these people access to this awesome tool, but you don't give them any directions whatsoever in how to use it, of course people are going to post whatever pops in to their head! They're excited, they're on weblogs.asp.net! So although I fully appreciate the irritation from the people subscribed to the main feed etc. I must stand up for all us "new bloggers". No one tolds us these things, I didn't even realise that there was such a thing as the main feed, until all these people got all up in arms, leaving nasty comments on peoples blogs etc. Sure you could argue that as a "new blogger" you should research this kind of stuff but honestly, come on, that would be like asking a guy to read the manual before setting up and starting to play with his new 50 inch plasma TV.

    My story:
    Being a pretty cautious type of guy I held off a while before I started posting and, once I did I tried to keep my posts technical and to provide some valid opinions etc. and not just link to what others put up or to old msdn articles etc. etc.

    And this is where things started getting interesting, I had set up a blog, as it happened it was on asp.net and there was an easy way to reach A LOT of people. This was never part of my initial motives or idea when I was planning to set up my blog. However the power of wanting to be recognised or whatever you might call it, is amazing and already after a couple of posts I found myself checking my stats at least a couple times per day.

    And after I had read about the issues people were having with the new people posting non technical posts and taking that to heart. I all of the sudden was cut from the main feed! I was devastated or more like quite annoyed (to put it in modest terms), but then again maybe devastated might not be such a bad word for it. I had been rejected, my content and my opinions weren't good enough to be in the all mighty main feed. So I didn't make any more posts....

    I find this a really curious thing, although I'd not even considered how many or who would read my blog when I decided to start blogging and I would have said I didn't care. Put on the spot, I started caring very quickly and was brought down to the point of considering just simply not bothering, when facing an in reality quite small set back. So I guess what I've come to realise, is that however much I'd like to thinks I am, I'm not imune to such human flaws as pride and self-importance. And that it's really important to keep track of your goals and why you're doing something.

    Well, as you can see from this post, I have decided to (as they'd put it here in Western Australia) "toughen up" and get over it.

    With all the stuff going on in the webdev area and with Silverlight 2.0 just around the corner there's just too many exciting things to post about, to worry about what other people think. Hopefully someone will find my rants and ravings interesting and maybe even useful, if not with any luck I will have gained some better understanding of the things I post about by putting my thoughts down in writing. Which as it happens was one of the main goals with me starting a blog anyway.

    I link to a lot of Joe Stagner's content in this post, this is not meant to be a personal criticism of Joe in any way, and Joe has actually several times made it a point to ask the people complaining to be considerate and have patience with the new bloggers etc. And he's tried to keep a positiv spin on things, which I think he deserves credit for.

    However as he's been the outward facing contact of asp.net in all of this, it's easiest to refer to him. As he states in his blog, "Growing an on-line community is hard" no doubt this is the case, I think though that providing the "new bloggers" with some, at least basic guidance on what's appropriate and what not etc. when they signed up, would have been a really good idea. Nothing too big or too detailed (remember my point about reading manuals). Just a few basic main pointers, which could possibly have saved a lot of people a lot of grief.


  • To MOSS or not to MOSS...

    Sharepoint and MOSS seems to be the buzz at the moment and I've seen more and more developers around me move over to the MOSS camp and I must say I've never been overly interested. I've probably viewed it as many others, too much point and click, not enough code writing...

    However, last week I actually started a MOSS/SharePoint course and I guess I've had to reevaluate my views somewhat, there is actually a fair bit of coding to do, actually too much! One of the big things that struck me with Sharepoint development (and this has given me a new found respect for the people who do it I must say) is the lack of tools. Soo much of the work has to be done manually, update this piece of XML (by hand), copy this guid from here to there, recycle the IIS app-pool, refresh the site. Pheew, feels like I'm back in the old gray days working on some remote server with ftp access. And the slightest mistake and you get a almost totally meaningless error message thrown in your face.

    So those were the negatives, are there any positives? Sure there is as a development platform it's got an incredible amount of pluming already done for you. Security, collaboration tools, exposing RSS, etc. etc. most of it readily available to be enabled with a few clicks. And it seems that once you get your head around the object model etc. you can do almost anything with it.

    I must say thought at the end of the day, being a developer mainly focusing on Internet sites and (at least not at this point in time) not doing much work in the intranet space. I'm still not convinced that Sharepoint is for me.....

    The course I'm taking is in two parts so no duobt this rant is "To be continued" after the next installment ;)


  • TFS 2008 Product keys finally arrive!

    The TFS 2008 product keys have just been shipped and as I've just gone through the procedure of upgrading our trial version install. As there has been quite a few questions floating around about it. I thought I'd point out this excellent post by Martin Woodward on the topic of upgrading a TFS 2008 trial install to the full standard version.

    He goes through the whole procedure step by step with screen shots and all and then points you in the direction of Brian Harry's VersionDetection tool so that you can make sure everything worked as it should.

    I must say that I as many other have had my doubts about if this would work or not, when the day came to upgrade from the trial version, however after going through and upgrading our TFS install yesterday, I'm happy to say it worked perfectly. This was very nice to see after all the various problems that was associated with installing/upgrading TFS 2005.

    Well done Microsoft and the Visual Studio/TFS Team!



  • Silverlight plugin soon comming to you?

    I just spotted in a blogpost by the Swedish developer evangelist Robert Folkesson (warning Swedish only) that the Silverlight plugin install is now available for WSUS (Windows Server Update Service) and also is available from MU (Microsoft Update) as an optional update.

    Having a strong interest in Silverlight and having a dark background in Computer support, dealing with rolling out similar updates in large environments, I think this is a great move by Microsoft.

    There's been some moaning and groaning going around about the install process of Silverlight and as late as this morning, I had one of my coworkers having a digg at me for my Silverlight passion, based on him having had a bad Silverlight install experience. Hopefully this will help alleviate some of those pains.