Hello readers,

For a little bit of a change, I'm going to guide you through creating a simple application. The purpose of it is to play musical notes in response to clicks and keyboard commands. It is a digital piano.

It's going to look like a piano. To achieve this, I've made it a fixed width application, and done the modifications to the UserControl below. If you need more detailed instructions on getting started see my earlier postings here.



for the main notes (i.e. the larger white ones), we should create some columns. Create a grid inside the LayoutRoot in "Objects and Timeline" and add some columns. Start off by clicking them roughly along the top of the grid.



we need 6 dividers to make 7 columns - one for each A, B, C, D, E, F, and G - the musical notes on a piano. Once these dividers are in place, you will see 7 "Star sized" icons above their respective columns. Click these icons to toggle until each is "Pixel sized".



In the split view, or selecting each column by clicking beneath the icon, edit their width values and make them all equal.

Create 7 Rectangles, by double clicking them on the toolbar on the left. This will add them with default settings. For each of these rectangles, reset the margins - since we will use the grids to determine the size of the rectangles, they can simply stretch.



Name them starting from C to G, followed by A and B. That is how a piano octave is laid out. Now you need to change the Grid.Row property of each of these. The first should be 0, the next 1, and so forth up to 6. This can be edited in the "Layout" section of the properties of each Rectangle, or directly in the xaml.



The next step is to add all of the audio files to the project. I have put the zip filled with the note sound bytes you will need here.

I got these from an old open source Silverlight 1.0 Piano project which you can find here (also, the source, thanks to Chris Bowen's Blog). Credit to Microsoft for releasing this as part of their Silverlight 1 SDK back in the day. Our project won't replace, or be as good as, that one I just linked you to. Ours is just for learning and a bit of fun.

Once you have downloaded them, add a new folder to the project called "Assets" and add the files to the folder using "Add existing item" from expression blend or Visual Studio as shown below.



Rebuild the project now by pressing F5 to make sure it still runs without errors and the new files are recognised by the compiler.

Now I'm going to introduce you to a feature of Silverlight called MediaElement. To find it, click the "More" icon along the bottom of the main toolbar and type in "media" in the search box. This will bring the control up into view. Note that other controls can also be found and browsed in this way.



Go ahead and add 7 MediaElements to the page (you will need more eventually for all the sharp and flat notes in between) and name them the same as the notes but starting with Media_ like Media_C, Media_D, etc.

These elements are designed to present some kind of media, in this case it is an audio file of wma format. It has functions like Play() and Stop() as well as a Position (like 00:00:01) which behaves like a track slider in common Media Players. We will use some of this functionality now.

Select the MediaElement as you would any object in Objects and Timeline, and have a look at the Properties for that. You should be able to choose any of your wma files in the project as a "source". If you don't see them, you may need to rebuild or run the project.



Choose the corresponding source for each element. You may also note that in the screenshot above i have grouped the keys with their media elements into a grid. This won't change much but it will make the project easier to read and understand. To group into grid, select some elements and press Ctrl+G.

We want the Media to play based on what piano "Keys" are pressed. To do this, we need to act upon the click of each of the Rectangles we created earlier. Select the elements starting from C and click the "Events" tab as shown. Now all you need to do is double-click in the box next to "MouseLeftButtonDown" to add the event handler.



You will then be automatically taken to the code file, and should see the following created for you:

private void C_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
     // TODO: Add event handler implementation here.
}

The code we put in here will run when the rectangle is clicked. Change it as follows and run the project.

private void C_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
     Media_C.Position = TimeSpan.FromMilliSeconds(0);
     Media_C.Play();
}

You will be able to hear a note play whenever you click on that rectangle.

For the first round of this project I have implemented an event handler like that for each of the white squares, and played some notes using the mouse for fun. If you are following you would see that the piano doesn't really work very well yet, since you can't press multiple keys at once, and if you hold them in you get a terrible sound effect.

In the next post I will add some keyboard events and change the code so that we have reusable functions instead of many separate event handlers. I'll also add the black (sharp and flat) notes into my project.

Stay tuned!

Zero Gravity Chimp