The zen of Silverlight

I just finished teaching Pluralsight's 3-day course on ASP.NET Ajax, and one of the things we now include in the course is coverage of Silverlight. In my opinion, this is one of the most exciting pieces of technology to come along for Web developers in years. More than ASP.NET 2.0, more even than the many slick features of ASP.NET Ajax…

If you haven't seen it demoed or tried it out yet, take a minute and just walk through the following steps:

1. Download and install Silverlight and the Feb. 2007 CTP SDK (http://www.microsoft.com/silverlight/asp/downloads.aspx).
2. Create a new Web site in Visual Studio 2005.
   
3. Copy the aghost.js file from C:\Program Files\Microsoft SDKs\WPFE\quickstart\samples to your new Web site directory (note there is also a VS template you can install to automate some of these steps in WPFE\Tools).
      aghost = ag + host = 'silver' + host, get it? (thanks to Chris Bowen for illuminating me :)
4. In your Default.aspx file's element add a reference to the aghost.js file:
   

   <script type="text/javascript" src="aghost.js"></script>
   

5. In your <form> element, add the following <div> and script
   

   <div id="slControl1Host">
   </div>
          
   <script type="text/javascript">
     new agHost("slControl1Host", // hostElementID
                "slControl1",   // ID of the ActiveX control 
                "1000",         // Width
                "1000",         // Height
                "White",        // Background color
                null,           // SourceElement (name 
                                // of script tag containing xaml)
                "spheres.xaml", // Source file
                      "true",   // IsWindowless
                      "30",     // MaxFrameRate
                      null      // OnError handler    
               );
   </script>

6. Now, add a new text file to your Web site named spheres.xaml, and populate it with the following XAML:
   

   <Canvas 
   	xmlns="http://schemas.microsoft.com/client/2007"
   	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       x:Name="mainCanvas">
   	<Ellipse Canvas.Left="100" Canvas.Top="100" Width="200" Height="200"
   		MouseLeftButtonDown="javascript:onButtonDown">
   		<Ellipse.Fill>
   			<RadialGradientBrush GradientOrigin="0.75,0.25" Center="0.5,0.5"
   			  RadiusX="0.5" RadiusY="0.5">
   				<GradientStop Color="Yellow" Offset="0" />
   				<GradientStop Color="Green" Offset="1" />
   			</RadialGradientBrush>
   		</Ellipse.Fill>
   	</Ellipse>
   	
   </Canvas>
   

   
   
7. Finally, go back to your Default.aspx file, and add an inline script block in your element defining the onButtonDown handler - be prepared, this is the zen part!
   

    <script type="text/javascript">
       function onButtonDown(sender, args)
       {
           sender.Width += 10;
           sender.Height += 10;
       }
   </script>
   

   
   
8. Now run your page and click on the green sphere repeatedly...

Suddenly a whole new world is available, all of it accessible through standard languages we've been using for years, and all of it easy for existing clients to consume. I haven't had this much fun programming since I first tried graphics programming with off-screen bitmaps on a black and white Macintosh :)

---

Posted Apr 30 2007, 11:20 AM by fritz-onion