Guitar Tuner Vista Gadget Using Silverlight

Guitar Tuner Vista Gadget Using Silverlight (cont'd)

More Resources

MSDN Evaluation Center: Microsoft Visual
Studio 2005

Microsoft Silverlight Software Development Kit

Presentation

The basic framework

It's time to get started. Before proceeding, I assume you have installed the Silverlight plugin. If not, please download and install it from here. Also, download and install the SDK from here.

Create a folder and call it GuitarTuner.gadget
Copy over the SilverLight.js file onto this folder. This file can be found here: [Drive]:\Program Files\Microsoft Silverlight 1.0 SDK\Resources.
Create a new text file, change its extension to HTML, and name it GuitarTuner.HTML. Copy over the following contents to it.

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <title>Guitar Tuner</title>
   <script type="text/javascript" src="Silverlight.js"></script>
</head>
<body>
</body>
</html>

This is the launching HTML. You now will use this to host the Silverlight control. To do this, you add a div tag and add JavaScript code to create your Silverlight control. After inserting the div tag for the control, the body element looks like that below:

<body>
<div id="SilverLightControlHost">
   <script type="text/javascript">
   var parentElement =
      document.getElementById("SilverLightControlHost");
   createGuitarTunerControl();
   </script>
</div>
</body>

You now need to point to the createGuitarTunerControl function. So, create a new text document, change the extension to .js, and call it GuitarTuner.js.
Add the following code to it.

function createGuitarTunerControl()
{
   Silverlight.createObject(
      "guitarTuner.xaml",      // Source property value.
      parentElement,           // DOM reference to hosting DIV tag.
      "guitarTunerControl",    // Unique plugin ID value.
      {
         // Per-instance properties.
         width:'400',      // Width of rectangular region of
                           // plugin area in pixels.
         height:'290',     // Height of rectangular region of
                           // plugin area in pixels.
         // Determines whether to display in-place
         // install prompt if invalid version detected.
         inplaceInstallPrompt:false,

         background:'Orange',    // Background color of plugin.
         // Determines whether to display plugin in Windowless
         // mode.
         isWindowless:'true',
         framerate:'24',    // MaxFrameRate property value.
         version:'1.0'      // Silverlight 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.
}

What you are doing here is actually instantiating a Silverlight control object and passing it the path to the XAML file that implements the control. In your case, it is guitarTuner.xaml. The other important items here are the plugin ID (guitarTunerControl) that can be used to access the tuner control through DOM methods such as getElementbyId. You also set the dimensions of the control at 400 X 290 pixels.

Add a reference to this script file in the head section of the HTML file like below:

<head>
<title>Guitar Tuner</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="guitartuner.js"></script>
</head>

What is missing now is the XAML file. Create another text document, change its extension to XAML, and name it guitarTuner.xaml.
Add the following content to it.

<Canvas
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                 presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="400" Width="290" >
</Canvas>

Cool. Now, just double-click the guitarTuner.HTML file to launch it in the web browser. If all is well, you should see an Orange rectangle on the screen like that below.

Downloads

GuitarTuner.zip - Finished gadget files ( rename .zip to .gadget extension to install as Vista sidebar gadget )

media.zip - Media files ( media.zip )

Previous Page: Introduction

Next Page: Guitar Tuner Presentation Layout

Page 1: Introduction	Page 4: Guitar Tuner in Action
Page 2: Presentation	Page 5: Converting to a Vista Gadget
Page 3: Guitar Tuner Presentation Layout

Submit article to:

Want to Know Who Won?

We have a winner in the RIA Run contest! Check out the Contest Winners Gallery and see which entries took the top prizes. You can play the games, too! Also, be sure to check out our interview with the grand prize winner to see how he crafted his winning entry. (Silverlight 2 Beta 2 required)