The zen of Silverlight (Beta 1.0 update)

My last post on how to incorporate Silverlight into an ASP.NET page had a shelf life of exactly 2 days - that should teach me to post a sample based on a technology just before the next beta is about to be released :)

Here are an updated set of instructions for trying the same sample with the Beta 1.0 release just announced.

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

1. Install Silverlight Beta 1.0 (http://www.microsoft.com/silverlight/install.aspx).
2. Install Microsoft Silverlight 1.0 Beta SDK (http://go.microsoft.com/fwlink/?linkid=89144&clcid=0x409).
3. Create a new Web site in Visual Studio 2005.
   
4. Copy the Silverlight.js file from C:\Program Files\Microsoft SDKs\Silverlight1.0SDK 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).
5. In your Default.aspx file's element add a reference to the Silverlight.js file:
   

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

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

   <div id="slControl1Host">
   </div>
          
   <script type="text/javascript">
         Sys.Silverlight.createObject(
           "sphere.xaml",           // Source property value.
           document.getElementById('slControl1Host'), // DOM reference to hosting DIV tag.
           "slControlHost",         // Unique control ID value.
           {                               // Control properties.
               width:'1000',                // Width of rectangular region of 
                                           // control in pixels.
               height:'1000',               // Height of rectangular region of 
                                           // control in pixels.
               inplaceInstallPrompt:false, // Determines whether to display 
                                           // in-place install prompt if 
                                           // invalid version detected.
               background:'white',       // Background color of control.
               isWindowless:'false',       // Determines whether to display control 
                                           // in Windowless mode.
               framerate:'24',             // MaxFrameRate property value.
               version:'0.9'               // Control version to use.
           },
           {
               onError:null,               // OnError property value -- 
                                           // event handler function name.
               onLoad:null                 // OnLoad property value -- 
                                           // event handler function name.
           },
           null);                          // Context value -- event handler function name.
    
         
   </script>
         

7. Now, add a new text file to your Web site named sphere.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>
   

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

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

Note this will all work with a standard Default.htm file as well (ASP.NET is not involved). Happy Silverlighting!