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

Guitar Tuner Presentation Layout

With the basic structure up and running, you now are ready to start laying out the guitar tuner elements that you saw in the goals section. Break them up into different objects as you see here.

You need a circular object representing the sound hole in the middle (marked 1).
You need six strings (marked 2).
You need a rectangle representing the bridge. This is the location where all strings end beyond the sound hole (marked 3).
You need a circular button to stop the sound (marked 4). This is actually not part of a real guitar, but you need it for the gadget.

Each of these can be represented in XAML as an element. The circular object can be represented as a Ellipse element, each string can be represented as a Rectangle element, the bridge as a Rectangle element, and the stop button again as a Ellipse element. These are all Shape elements and thus have properties such as fill color (to fill their interior) , size, and so forth.

All elements in XAML are laid out on what is called a Canvas (à la DC in traditional Win32 programming). The canvas is simply a container for its child elements. The child elements can be control elements (button and so on), Shape elements (Rectangle, ellipse, and the like), media element, and such. The child element can be another canvas too.

All these elements form a kind of hierarchical tree structure as below:

So, in your case, that is what you do. You write the XAML in such a way that you lay out this tree and specify the location for each element. What is to be noted here is the way the XAML is rendered. It always goes from the topmost item in the tree downwards. This means the ones lower in the tree render on top of those higher up. This is the default (unless the Z ordering is changed explicitly).

What this means in this case is that the circle object (marked 1) should be one of the first elements that you describe in the XAML file. The rest of the elements do not overlap with each other, so they can take any ordering.

The layout and the positions are as shown in the following diagram:

(Full Size Image)

Open your XAML file and add an Ellipse element (shown in black color in the layout) like that below. What you are doing is adding an Ellipse Shape element at (30, 25) relative to the canvas' (0,0) position (which is the top-left corner). Also, you specify the width and height to be 100, which makes it a circle of 50 pixels' radius. You also describe the element to be filled with a black color. Also, you give the element a name, Hollow. The name is important if you need to identify the element from code or in XAML as you will see later. Save the XAML file and refresh the HTML file in the browser.

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                      presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="400" Width="290" >
        <Ellipse x:Name="Hollow" Height="100" Width="100"
                 Canvas.Left="30" Canvas.Top="25" Fill="Black"/>
</Canvas>

Next, in the Z-order hierarchy comes the bridge (shown in red color in the layout). You add a Rectangle Shape element this time. Specify the location and size relative to the parent canvas and give it a name, Bridge.

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                      presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="400" Width="290" >
<Ellipse Height="100" Width="100" Canvas.Left="30"
         Canvas.Top="25" Fill="Black"/>
<Rectangle x:Name="Bridge" Width="10" Height="90"
           Canvas.Left="10" Canvas.Top="30" >
</Rectangle>
</Canvas>

In a guitar, the bridge is actually an embossed piece. It would be interesting if you could convey this info. Well, it seems you can do this easily with the Fill attribute. For the hollow, you specified a soild flat fill—a fill that was a uniform color all the way. This was the right way for the hollow. However, for this embossed look, you will use a gradient fill. You want the color to grade from black to gray from the left side to the center and grade back from gray to back from the center to the left. You specify this like below:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                      presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="400" Width="290" >
<Ellipse Height="100" Width="100" Canvas.Left="30"
         Canvas.Top="25" Fill="Black"/>
   <Rectangle x:Name="Bridge" Width="10" Height="90"
              Canvas.Left="10" Canvas.Top="30" >
      <Rectangle.Fill>
         <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
         <GradientStop Color="Black" Offset="0.0"/>
         <GradientStop Color="Gray" Offset="0.5"/>
         <GradientStop Color="Black" Offset="1.0"/>
         </LinearGradientBrush>
      </Rectangle.Fill>
   </Rectangle>
</Canvas>

Pay attention to the details. The StartPoint and EndPoint specify the direction in which the gradation has to work. In your case, you want only horizontal gradation, so you want it to start at the 0th position to the full length of the element (indicated by 1). You specify 0 for the Y direction. The GradientStops specify the behavior of the gradient. You say that at 0th interval of the full gradation interval, you want to start with the Black color and gradually grade to Gray at half intervala and from there on over the next half you want to grade back to Black. Save the XAML file and refresh the HTML file in the browser.

Next in the Z-order hierarchy come the strings (shown in blue color in the layout). For the purpose of this article, just add one string (because the procedure is the same for all the other strings, except that their top location changes). The strings in a guitar are called the Low E, A, D, G, B, and High E strings in that order, from top to bottom. On a real guitar, the top strings (which produce the lower frequency notes) are thicker and they become gradually thinner as you reach the lowest one. You will use all this information to depict it as such in your XAML. All you have to do is the change the height/width.

A string can be thought of as a cylinder. You want to depict a cylinder lying horizontal. Again, you resort to using a rectangle. And again, you will use the same gradation technique you used earlier, except that you use different colors to match a string look and also, you apply veritical gradation (note the StartPoint and EndPoint changes compared to that for Bridge) like below:
```
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                      presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="400" Width="290" >
<Ellipse Height="100" Width="100" Canvas.Left="30"
         Canvas.Top="25" Fill="Black"/>
<Rectangle x:Name="Bridge" Width="10" Height="90"
           Canvas.Left="10" Canvas.Top="30" >
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
         <GradientStop Color="Black" Offset="0.0"/>
         <GradientStop Color="Gray" Offset="0.5"/>
         <GradientStop Color="Black" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>

<Rectangle x:Name="LowEString" Width="315" Height="5"
           Canvas.Left="15" Canvas.Top="37">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Brown" Offset="0.0"/>
<GradientStop Color="White" Offset="0.5"/>
<GradientStop Color="Brown" Offset="1.0"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
```
Save the XAML file and refresh the HTML file in the browser.
Okay. The last element is the Stop button (shown in a green color in the layout). This will again be a Ellipse Shape element and, to give it a 3D look, you apply another type of gradation called Radial gradation. The element declaration is like below:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                      presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="400" Width="290" >
<Ellipse Height="100" Width="100" Canvas.Left="30"
         Canvas.Top="25" Fill="Black"/>
<Rectangle x:Name="Bridge" Width="10" Height="90"
           Canvas.Left="10" Canvas.Top="30" >
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
         <GradientStop Color="Black" Offset="0.0"/>
         <GradientStop Color="Gray" Offset="0.5"/>
         <GradientStop Color="Black" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="LowEString" Width="315" Height="5"
           Canvas.Left="15" Canvas.Top="37">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="StopButtonb" Height="15" Width="15"
         Canvas.Left="8" Canvas.Top="125" Stroke="Black"
         StrokeThickness="1" >
   <Ellipse.Fill>
      <RadialGradientBrush>
         <GradientStop Color="Red"   Offset="1.0"/>
         <GradientStop Color="White" Offset="0.0"/>
      </RadialGradientBrush>
   </Ellipse.Fill>
</Ellipse>
</Canvas>

Save the XAML file and refresh the HTML file in the browser.

For the sake of completion, go ahead and add all the strings like below:

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/
                      presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Height="400" Width="290" ><Ellipse Height="100"
   Width="100" Canvas.Left="30" Canvas.Top="25" Fill="Black"/>
<Rectangle x:Name="Bridge" Width="10" Height="90"
           Canvas.Left="10" Canvas.Top="30" >
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
         <GradientStop Color="Black" Offset="0.0"/>
         <GradientStop Color="Gray" Offset="0.5"/>
         <GradientStop Color="Black" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="LowEString" Width="315" Height="5"
           Canvas.Left="15" Canvas.Top="37">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="AString" Width="315" Height="5"
           Canvas.Left="15" Canvas.Top="52">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="DString" Width="315" Height="4"
           Canvas.Left="15" Canvas.Top="67">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="GString" Width="315" Height="4"
           Canvas.Left="15" Canvas.Top="82">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="BString" Width="315" Height="3"
           Canvas.Left="15" Canvas.Top="97">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="HighEString" Width="315" Height="3"
           Canvas.Left="15" Canvas.Top="112">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
         <GradientStop Color="Brown" Offset="0.0"/>
         <GradientStop Color="White" Offset="0.5"/>
         <GradientStop Color="Brown" Offset="1.0"/>
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>
<Ellipse x:Name="StopButtonb" Height="15" Width="15"
         Canvas.Left="8" Canvas.Top="125" Stroke="Black"
         StrokeThickness="1" >
   <Ellipse.Fill>
      <RadialGradientBrush>
         <GradientStop Color="Red" Offset="1.0"/>
         <GradientStop Color="White" Offset="0.0"/>
      </RadialGradientBrush>
   </Ellipse.Fill>
</Ellipse>
</Canvas>

Save the XAML file and refresh the HTML file in the browser. It should look like this:

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: Presentation

Next Page: Guitar Tuner in Action

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)