Validators

Microsoft officials wouldn’t say a month ago whether the actual Silverlight 3 bits would be available by the day of the official launch, which is July 10. But it turns out they are available a day earlier.

If you try to install this version but you have already Silverlight 2.0 for Developer installed on your machine, you will get error message: Unable to install Silverlight. Your Silverlight developer components are out of date.

If you are not a developer and want to avoid this error, please uninstall previous Silverlight version first by following the Silverlight Uninstall Instructions. If you are a developer, download and install Silverlight 3.0 for Developer here.

Installation will upgrade current version of Silverlight on your machine. You do not need to install Silverlight 3.0 if you have installed Silverlight 3.0 for developer.

I have created Silverlight avatar for Community Server blog list page (http://geeks.netindonesia.net/blogs) a week ago as requested by Naren. I think its no difficult to replace HTML avatar with Silverlight avatar on the fly. Just query DOM using jQuery for existing avatar, grab photo Url information, hide it and replace with new Silverlight avatar. Here is step by step to create Silverlight avatar for CS theme on geeks site.

Create Silverlight project using Expression Blend.

I'm created two path to put avatar image and two StackPanel contain text-boxes for view counter text. Second path and StackPanel will mirrored-down to make shadow-mirror effect. These path will be binded by same image.

Write code-behind to bind avatar image and view counter.

This code-behind used to bind avatar image and view counter. The image url and view counter passed by InitParams property from javascript. The App.xaml.cs code-behind used to get InitParams and Page.xaml.cs used to bind the image and text from parameter values.

Note: You must get absolute Url for downloading photo with query string, see line 21-25 above. Silverlight will ignored query string if you are not provide absolute url for image source.

Grab DOM using jQuery

jQyery is very powerful tool for DOM manipulation. You can query and modify DOM with single line of code. Before query the DOM, you should be knows the DOM structure of page. Target of DOM is the avatar image. Open IE development toolbar to get the DOM of avatar. Find ID or CSS classes that used by Avatar to be replaced by Silverlight avatar.

From this information you can analyze that every blog entry placed inside DIV element with content_main_con_be CSS class. This DIV element contain view count and avatar image DIV in first and second child element. Based on this information, you can query the DOM using jQuery as script in line number 11 and 12 below.

The script above will be execute when DOM is ready (evaluated in line 9).

Line 10 will verify if Silverlight 2 is installed in the machine. If Silverlight 2 is installed, DOM will be replaced with Silverlight object.

Line 11 and 12 is getting view counter and picture box elements.

Line 13: Make a loop the selected DOM.

Line 14: Set the width and height of element that will be used for Silverlight host

Line 15: Get image Url information from IMG element

Line 16: Create Silvelight object using javascript.

Line 22-33 is function to create Silverlight object.

Line 32: Set InitParams value to be passing to Silverlight application.

This script required Silverlight.js and jQuery 1.3.2. The last steps are upload xap file of Silverlight application and required scripts also included the script above, Silverlight.js and jquery-1.3.2.min.js into blog.master of theme.

Finally, the geeks portal have a new theme with Silverlight avatar. This avatar will available both installed Silverlight plung-ins or not. User will see HTML version of avatar if they don't have Silverlight plug-ins installed on the machine.