Web Development Adventures in a .NET world

Simultaneously calling multiple methods on a WCF service from silverlight

Wed, 19 May 2010 15:58:47 GMT

A while back I had to debug some performance issues in an existing Silverlight app, as the problem / solution was a bit obscure and finding info about it was quite tricky, I thought I’d share, maybe it can help the next person with this problem.

The App

On start, the app would do a number of calls to different methods on a WCF service, this to populate the UI with the necessary data. Recently one of those services had been changed and was now taking quite a bit longer than it used to. This was resulting in quite a long loading time for the whole UI, which was set up so it wouldn’t let the user interact with anything, until all the service calls had finished.

First I broke out the longer running service call from the others, then removed the constraint that it had to be loaded for the UI in general to become responsive. I also added a loading indicator just on that area of the UI, thinking that the main UI would load while this particular section could keep loading independently.

The Problem

However this is where things started to get a bit strange. I found that even after these changes, the main UI wouldn’t activate until the long running call returned. So now, I did what I should have done to start with, I got Fiddler out and had a look at what was really happening.

What I found was that, once the call to the long running service method was placed, all subsequent call were waiting for that one to return before executing.

Not having really worked with WCF previously or knowing much about it in general, I was stumped… I knew of the issues where Silverlight is restricted by the browsers networking features in regards to number of simultaneous connections etc. However that just didn’t seem to be the issue here, you can clearly see in Fiddler that there’s numerous calls, but they’re just not returning. I thought of the problem maybe being in the WCF service, but the calls were really not that complicated and surely the service should be able to handle a lot more than what I was throwing at it!

So I did what every developer does in this type of scenario, I hit the search engines. I did a whole bunch of searching on things like “multiple simultaneous WCF calls from Silverlight” and “Calling long running WCF services from Silverlight” etc. etc. This however, pretty much got me nowhere, I found a whole heap of resources on how to do WCF calls from Silverlight but most of them were very basic and of no use what so ever.

The fog is clearing

It wasn’t until I came across the term “ WCF blocking calls” and started incorporating that in my searches I started to get somewhere. Those searches quite quickly brought me to the following thread in the Silverlight forum “Long-running WCF call blocking subsequent calls” which discussed the exact problem I was facing and the best part, one of the guys there had the solution!

The short answer is in the forum post and the guys answering, has also done a more extensive blog post about it called “Silverlight, WCF, and ASP.Net Configuration Gotchas” which covers it very well.

So come on what’s the solution?! I heard you ask, unless you’ve already gone to the links and looked it up ;)

The Solution

Well, it turns out that the issue is founded in a mix of Silverlight, Asp.Net and WCF, basically if you’re doing multiple calls to a single WCF web-service and you have Asp.Net session state enabled, the calls will be executed sequentially by the service, hence any long running calls will block subsequent ones. So why is Asp.Net session state effecting us, we’re working in Silverlight, right? We'll as mentioned earlier, by default Silverlight uses the browsers networking stack when doing service calls, hence to the WCF service, the call looks like it might as well be coming from a normal Asp.Net. To get around this, we look to a feature introduced in Silverlight 3, namely the Client HTTP Stack.

The Client HTTP Stack to the rescue

By using the following syntax (for example in our App.xaml.cs, Application_Startup method)

WebRequest.RegisterPrefix("http://", WebRequestCreator.ClientHttp);

we can set our Silverlight application to use the Client HTTP Stack, which incidentally solves our problem! By using Silverlights own networking stack, rather than that of the browser, we get around the Asp.Net - WCF session state issue.
The above code specifies that all calls to addresses starting with “http://” should go through the client stack, this can actually be set more granular and you can specify it to be used only for certain domains etc.

Summary

The actual solution is well covered in the forum and blog posts I link to above. This post is more about sharing my experience, hopefully helping to spread the word about this and maybe make it a bit easier for the next poor guy with this issue to find the solution.

Until next time,
Ola

New Silverlight 4 books

Mon, 17 May 2010 15:00:05 GMT

A while back I was contacted by a publishing company called PACKT Publishing, they were saying they had some new Silverlight books and were looking for reviewers.

To be honest, to start with I was a bit sceptic, I’d never heard of PACKT publishing, so my first step was to look it up and make sure the message was even real. Having had a look at their site etc., it all seemed legit, and I decided to have a look at what they had to offer. Hey what can I say, who am I to pass up on some free Silverlight 4 books?! :)

The two new books they’ve released are “Microsoft Silverlight 4 Data and Services Cookbook” and “Microsoft Silverlight 4 Business Application Development : Beginner's Guide”.

So in the next few weeks I’ll be reading through these books and share my thoughts about them here.

IF you’re interested in checking out these books yourself, here’s some linked images the publishers provided.

Also you can download some sample chapters here:

Microsoft Silverlight 4 Business Application Development : Beginner's Guide :
Chapter 1 – Getting Started

Microsoft Silverlight 4 Data and Services Cookbook:
Chapter No.2 – An Introduction to Data Binding

Past and current state of Smooth Streaming Development

Sat, 06 Mar 2010 16:10:00 GMT

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

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,
Ola

Is it worth learning Silverlight and WCF RIA Services?

Thu, 04 Feb 2010 10:38:52 GMT

Tonight I came across this question on the QA site Stackoverflow, basically a person was asking if it was worth learning “Silverlight RIA” or if he should just learn “normal Silverlight”.

He had a background on VB6 and Winforms but had done some WPF. Also by the sound of it he works building intranet LOB applications as he was saying that the apps would run internally and that they were currently using Click Once.

Anyhow, my answer got a bit long and turned into something of a rant but I think it had some decent point making it worth to cross-post it here :-)

Start of Answer:
-------------------------------------------------------------------------------------------

Hi Jonathan,

To start with I'm wondering if there might be some confusion going on here.

There's actually no such thing as "Silverlight RIA", so lets clarify some concepts, RIA is commonly defined Rich Internet Applications, Silverlight is one of a number of technologies that can be used to build such applications.

However there's also the Microsoft technology WCF RIA Services, which is what I'm guessing you're referring to. WCF RIA Services were until recently known as .Net RIA Services.

WCF RIA Services (currently in Beta 2) has so far largely been targeted at Silverlight and is even hosted under the silverlight.net domain, which is probably where a lot of the confusion comes from.

However in theory it's not tied to Silverlight at all, and is just a technology on top WCF to provide easy data access for RIA type of applications, for a more technical overview have a look at this blogpost by Nikhil Kothari it was written back in March 2009 about .Net RIA Services, so it might be a little out of date but it will give you a good idea on what it's about.

After defining these terms, it's a bit tricky to answer your question "Is Silverlight RIA worth learning or should I stick to normal Silverlight?"

Silverlight is definitely worth learning, by the looks of things Microsoft is going to stick with it. The latest recommendation I heard from someone close to Microsoft, was to go with Silverlight if you can for new LOB (Line Of Business) Apps, if there's something Silverlight can't do, then look to WPF.

Coming from a VB6/Winforms background there will be a bit of a learning curve, but if you've already done a couple WPF apps then you're on good way already.

Silverlight for LOB? Silverlight 3 started bringing in more features related to development of LOB, like for example support for WCF RIA Services. It looks like this is set to continue in Silverlight 4 (due out first half of 2010), with things like support for printing and COM for working with MS Office applications. There's also coming more and more pre-made controls from various 3rd party vendors for many of the standard LOB type of functionality.

So what about WCF RIA Services? It's definitely worth having a look at, it seems to be the preferred way of data access by Microsoft. It provides things like easy access to authentication and data validation. However saying that it's still in beta and there has been some voices raised against it, around the internet so it's probably worth doing some research, before going all in.

Finally, you say that you're applications will be accessed internally but that you don't want the hassle of locally installed software, Silverlight fits that perfectly, just roll out the small Silverlight plugin to your users machines and you're good to go. Any changes needed, just recompile your project and deploy your .xap file to the webserver and it will automatically get pushed out to the users next time they use the app.

Sorry for the somewhat long and rambling answer, I hope it's helped answer your questions :)

Cheers,
Ola

Resources for my SDDN presentation on Silverlight and IIS Smooth Streaming

Wed, 09 Dec 2009 14:25:47 GMT

I recently (25/11/2009) did a presentation on using Silverlight and IIS Media Services – Smooth Streaming, at the Perth SDDN November meeting.

As promised, here’s the resources I mentioned in that presentation, apologies for the delay.

IIS 7 – Media Services
- Experience IIS Smooth Streaming (aka Big Buck Bunny)
  http://www.iis.net/media/experiencesmoothstreaming
- Download IIS Smooth Streaming & IIS Media Services 3
  http://www.iis.net/expand/SmoothStreaming
- Windows Media Services
  http://www.iis.net/expand/WindowsMediaServices
- IIS Media Services 3 announced
  http://blogs.iis.net/vsood/archive/2009/10/09/iis-smooth-streaming-player-development-kit-1-0-beta-1-released.aspx

Development Resources
- Smooth Streaming, developer kit announced
  http://blogs.iis.net/vsood/archive/2009/10/09/iis-smooth-streaming-player-development-kit-1-0-beta-1-released.aspx
- MSDN – Smooth Streaming API
  http://msdn.microsoft.com/en-us/library/microsoft.web.media.smoothstreaming.aspx
- Jeff Paries blog with instructions on extracting dlls
  http://designwithsilverlight.com/2009/10/14/using-adaptive-streaming-with-encoder-3/
- Silverlight Media Framework
  http://smf.codeplex.com/
- Open Video Player
  http://openvideoplayer.sourceforge.net

Can’t view pages from the Web Development Server (Cassini)

Wed, 18 Mar 2009 03:25:31 GMT

Are you all of the sudden getting “Internet Explorer cannot display the webpage” / “Address Not Found” when trying to run a web application from inside Visual Studio?

This caused me a fair bit of headache yesterday, so now that I found the solution, I figured I’d try to spread the word.

Basically what’s happened is that an update for “Windows Defender and Microsoft Forefront Client Security” in the form of a new signature file was released on the 9th of March (Signature versions 1.53.283.0). This update was to address possible scenarios where a machines host file might get changed by a trojan or the like. Unfortunately however this had the side effect on some systems that the localhost entry in the host file was removed or corrupted, leading to any attempt to got to http://localhost/[whatever] will fail.

The solution as outlined in the links below in further detail, is to re-add the localhost entry (127.0.0.1 localhost) to your host file (C:\Windows\System32\drivers\etc\hosts).

I appreciate that these things are important etc. but for [insert appropriately bad word here] sake Microsoft, if you push out potentially breaking changes let us know!

In my case what happened was that, as a good Windows user I have automatic updates turned on and I let the machine restart when it needs to etc. Yesterday, after I’d not used Visual studio on my laptop for a couple days, all of the sudden while sitting on a bus trying to do some Silverligth stuff, I couldn’t display any html pages when running then from VS. After some attempts at working out what the heck was going on and being on a bus with no internet connection I had to give up and pack up my laptop. Later after 30 min of Googling I found these two post helping me work out what had happened.
ASP.NET Web Development Server Stops Working
Visual studio Development Server problem in Vista

So I guess Microsoft had let us know in the way that the “Visual Web Developer team” let us know on their blog but come on, this should have been more publically announced in some way, according to some of the comments there are people out there who have struggled for days with this issue. I’m not really sure how they should have done it and maybe I’m just irritated because I got stung, lesson learnt from this. Turn off the automatic update and apply updates manually, once you know what they’re doing!

Happy coding :)
Ola

The Alternative Podcast List

Tue, 10 Feb 2009 14:43:00 GMT

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.

February Perth .Net UG Silverlight talk

Mon, 09 Feb 2009 13:02:00 GMT

Thursday last week I did a presentation on RIA and Silverlight for the Perth .Net Community of Practice and as promised here’s the links from the presentation.

Some great examples of how RIA can be used to enhance the user experience of a website.
http://silverlight.net/samples/sl2/silverlightairlines/run/default.html
http://maps.google.com
http://memorabilia.hardrock.com/

Where does the desktop end and where does the web start, RIA blurring the lines
https://www.photoshop.com/express/landing.html

RIA Benchmarking, Bubbelmark is an animation test to practically benchmark different RIA technologies against each other.
http://www.bubblemark.com

Shine Draw(http://www.shinedraw.com/) – Flash vs Silverlight repository, compares various animation effects implemented in Flash and Silverlight and lets the visitors vote which is better.

Thanks to everyone who came to the presentation, if you have any feedback or questions, don’t hesitate to drop me a line.

Cheers.

Blogging, Life and jQuery

Sun, 18 Jan 2009 14:22:26 GMT

Soooo, it’s been a bit quiet here lately, eh.

Well as per always, life got in the way. Between work, family and life in general, there just haven’t been much time for anything else. However as things are slowly calming down, I’m now hoping to get back into the swing of things with the blog!

The title says “Blogging, life and jQuery”, what’s that all about? Well firstly I thought I’d talk a bit about that changes I’m wanting to make to this blog. Then as part of of those changes, I’ll talk a bit about what’s been going on in my world in general.

Blogging

I’ve decided to try and make some changes to this blog. When I started blogging, I tried to make my posts very focused, “professional” and tutorial like. However that style of posts require lots and lots of time and effort to produce. I would still like to post tutorials every now and then but they wont be very frequent.
So instead to get some more life into the blog I’ll try to make more frequent posts reflecting what ever is on my mind at the time, a little bit like the later posts before “the big silence”.

Life

Well as a father of two, a three and half year old and a 6months old. I can tell you one thing for certain, the people who say that once you have one child, you might as well have two, because there’s not much difference in the effort involved looking after them, they’re lying! That said I wouldn’t change a thing!
However having a young family, means there’s not much time for extra curricular activities and take a way time for some sports activities to keep me at least reasonably fit, I’m afraid the old computing passion has had to go on the back burner to some extent.

jQuery

Ok time to get something web dev related in this post. I was recently fortunate enough, to be on a project which involved developing a product/plan recommendation engine/app, for one of our clients. The fortunate thing about this was that it was to be done all in jQuery.

Not having worked with jQuery before, it was quite a learning curve. However seeing as there’s been a alot of talk about jQuery lately with the announcement of it being endorsed by Microsoft and everything. I was looking forward to getting a chance to having a look at it.

Basically it took me and another developer a couple of weeks to get our heads around it but in the end we got the job done and it’s now up and running, you can check it out here: http://www.iinet.com.au/needhelp/

Silverlight

What about Silverlight? The blog has up until now been very focused on Silverlight, will this change? Not really, as I mentioned earlier I’m hoping to getting some more general content in here, but Silverlight is still very much one of my main interest when it comes to web development.

And that being the case I’m exited to announce that the Perth .Net User Groups’ February presentation will be on Silverlight 2 and it will be presented by no ne less then myself and Stephen Price. We’ve still not locked down 100%, what we’ll cover etc. but it should be a good evening. So if you’re in or around Perth make sure you come and check it out :)

Cheers,
Ola

Silverlight 2 RTW on Monday?

Sat, 11 Oct 2008 14:38:00 GMT

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

Fri, 05 Sep 2008 06:37:00 GMT

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.

Adobe to power NFL on the web, the race is on!

Fri, 05 Sep 2008 05:51:00 GMT

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

Fri, 01 Aug 2008 12:19:00 GMT

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.

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

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

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

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)

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

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.

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"

Fri, 01 Aug 2008 05:11:00 GMT

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

Sun, 27 Jul 2008 04:44:00 GMT

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

Tue, 01 Jul 2008 17:16:40 GMT

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

Mon, 09 Jun 2008 13:23:00 GMT

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

Tue, 03 Jun 2008 15:21:00 GMT

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

Tue, 20 May 2008 15:39:00 GMT

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

Fri, 18 Apr 2008 05:24:00 GMT

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.

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://msdn.microsoft.com/en-us/library/cc265155(VS.95).aspx

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

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