Sunny Man’s Blog

April 16th 2007

(2) Microsoft Silverlight (WPF/E)

Internet, Programming, Technology

I saw in the news yesterday that Microsoft released its competitor to Adobe’s (formerly Macromedia’s) hugely successful and widely-used Flash presentation software and ActionScript scripting language. Microsoft hopes that its Windows Presentation Foundation/Everywhere, now Silverlight, will claw some market share from Flash’s monopolistic grip on the web. Employing already established JavaScript and Microsoft’s proprietary XAML language, Silverlight would seem to be something to watch, even at this early stage. Today I decided to take a go at it and see if even I could use it. I’ve had limited experience with ActionScript and XML so I wanted to to compare it to my previous experiences. Here’s how I got on.

Before you read on, to view the things I’ve made, go to the download page and download the cross-browser plugin.

Silverlight Basics

I’m not going to turn this into a tutorial on how to setup everything - it can all be found in the official SDK, also available on the download page - but I will show the XAML and relevant JavaScript files that accompany each of the things I am to show.

The SDK’s quickstart guide was a really simple and easy explanation of the process of creating very simple shapes at first. I was a little confused at first because the XAML files I create utilise the canvas tag and initially I got it mixed up with the HTML tag of the same name. Firstly you create the canvas you’re going to ‘draw’ in. [Nearly] everything else goes inside this. The layers on the canvas, or z-index, are defined by the order the objects are created - those created later on in the script are on the top layers.

My first foray into it was a simple monochrome target which just created several ellipses in each other with the smallest one having a border instead of a fill. Here’s the .xaml file:

You can view the example’s finished product if you have the plugin installed.

Using Images

Next I did a bit of playing around with images. There are several ways you can use images on your canvas which include using them as a filling for an object or importing them on their own. In this example, I’ve created a rectangle and used an image of a pound coin and then overlayed it with 4 rectangles of differing colours with an opacity set. Along side it, I’ve added a gradient overlay to the image.

You can view the example’s finished product if you have the plugin installed.

Adding Multimedia

Adding media like music and video is incredibly easy for beginners to grasp. A single deceleration is used for both music as well as video which is rather handy. Controlling the media object is also incredibly easy and my quick look over the documentation for the MediaElement object showed a lot of options are available for controlling it. Firstly I tried just simply embedding a sound:

Next, I added the parameter to stop it automatically playing when loaded and added the controls for stop, pause and play the file. These controls also work with video media, as shown in the quick start guide provided in the SDK. The code involved this XAML code and the following JavaScript.

  
    
      
        
          
          
        
      
    
    stop
  

  
  
    
      
        
          
          
        
      
    
    pause
  

  
  
    
      
        
          
          
        
      
    
    play
  

And this JavaScript, inserted either in the head of the page or an external JavaScript file:

You can view the example’s finished product if you have the plugin installed. Click the play, pause and stop buttons to test it out.

Lighting up the web?

Obviously I have to take into account the infancy in terms of development of Silverlight but it’s wide array of features is quite appealing. It took me a quarter of the time to stream a video in Silverlight than it did to do it manually in Flash via ActionScript. At the moment, Silverlight isn’t anywhere near Flash in terms of functionality but even at this early stage it does have some advantages over Flash in terms of the time saving it allows.

I’ve quite enjoyed doing some stuff in it and I’m sure that the abilities of Silverlight go far beyond drawing circles and streaming media. One nice example of the capabilities is this page turning program and this interactive WYSIWYG editor. For me it still feels like it’s a glorified version of the HTML canvas element with some JavaScript added. It doesn’t feel smooth like Flash and currently feels slightly buggy and laggy but I hope this will change in future revisions.

I’ve enjoyed using HTML, XAML and JavaScript and I think that it will eventually catch on - if it doesn’t then Microsoft will probably force it on us in some way. At the moment the plugin is available for both Windows and OSX but I hope Microsoft don’t make the mistake Adobe made by not keeping the Linux community up to date. Try it out.