Guitar Tuner Vista Gadget Using Silverlight


.. and then Redmondians said, “let there be Silverlight, and there was Silverlight”. So, just what is Silverlight? In a nutshell, Silverlight is Microsoft’s solution for creating next generation interactive content for the web. Silverlight uses XAML and JavaScript for creating killer applications that are rich with multimedia and interactivity. It currently uses a subset of WPF. The cool thing about Silverlight is that it is a cross-browser development framework and, as such, all you need is to have the Silverlight plug-in installed on the host system. This might sound like Macromedia (now Adobe) Flash, but, where Silverlight differs is that the content that drives the application (XAML) is all text and thus is search engine friendly.

Formerly code named WPF/e, Silverlight (version 1.0) is now available to download from Microsoft’s web site and Microsoft has already released 1.1 beta for developers.

Note: For the puposes of this article, you’ll concern yourslf with version 1.0 RC.

About the Article

This article is not really a exhaustive in-depth drill down into Silverlight, nor into Sidebar gadget details. Here, all you will attempt to do is to use Silverlight to create a nifty little Vista gadget. In the process, you will tread through some of the commonly used elements and usage scenarios. What is interesting is that you don’t need much of anything to get started. The only pre-requisites are the following:

In fact, for the most part—in other words, until you really hit creating a gadget—you won’t even need Vista. XP is just fine because most of your work would be editing some files and refreshing the browser.

Guitar Tuner

I don’t think there are very many guitar fans out here in the CodeGuru community. But I am one and as such, I decided to do a guitar tuner, just because it is a pretty simple tool that lends itself well to being used as a Vista gadget just because of its simplicity.

For those who don’t know what a guitar tuner is, let me explain. The rest can skip this section. A guitar is a stringed instrument. Typically, a guitar has six strings and each string is tuned to a particular frequency to make it easier to play. So, each string, when plucked, will produce a unique sound. The sound of these six strings is typically standardised and called a tuning. Tuning is essentially the sound of each string in relation to the others. There are different tunings such as standard, Drop D, and such. One of the first things guitarists do is to tune their guitars before they start playing. This gives them a known platform to play from. When tuned, all notes sound pleasant; otherwise, all you hear would be cacophony. The guitar tuner assists in this. It just plays the sounds of the six strings, so players can pluck their strings and try to match the sounds. When all strings match the sounds from the tuner, the guitar is said to be tuned. These days, most players use their laptops to check tabs for popular songs online, listen to their favorite songs, and record their own. So, as such, it is useful to have a guitar tuner handy. Hence, the idea to create a gadget out of it.


The basic goals will be these. Please take a look at the image below:

In the image, you see you are mimicing the look of a guitar. You see that there are six strings and a hole in the center (just to make it look like a guitar).

  • Tiy want to depict the body of a guitar and the strings. This will familiarize you with the Shape elements, the drawing operations, and other features in XAML.
  • When you click on any of the strings, you want to play the sound associated with the string. Also, you want to display a blinking element to indicate the string that is being played. This will familiarize you with the handling events, animating elements, and using media (audio) and such in XAML.
  • When you have clicked the string once, the plucking sound of the string that is played should be repeated continously. This is needed to allow the user sufficient time to turn the knobs on their guitars to bring it in unison with the tuner’s sound. This will familairize you with media element and some of its properties.
  • When you click on the red button, the sound should stop playing. (You want some way to shut it up when done, right?)

This way, you will get your hands wet with XAML and a little JavaScript and their intermingling.

The finished Vista gadget should look like this when docked…

…and like this when undocked

More by Author

Must Read