Hello,
Last week I showed you some basics to creating a Piano project in Silverlight.
The code at this point looks as above. In this case I would suggest making it slightly more reusable by employing a function such as shown below:
You can go one step further. Since the rectangles are all named for the note that needs to play, you can create one event handler like below and send the name of the rectangle being clicked in order to play the right note.
This is a great way to reduce 20+ lines of code to about 7 lines.
It's time to add the other notes in the project. The grid structure that I would use would group the black keys separately so that they can float on top of the white keys. My grid has a width of 490, so I've created a bunch of columns for it as shown below, yielding black keys 40 pixels wide.
For each black key, Create a rectangle. To name it, I followed the naming of the audio files: C2 for C#/Db, D2 for D#/Eb and so forth. Each of these rectangles can be filled in black (or any other colour you like) and put into their correct columns.
Please note that this is just one way in which to create a set of black rectangles or buttons. If you prefer to use a StackPanel, ButtonStack, or any other method you know of, go ahead! I have also added a DropShadow Effect to make them stand out a bit more. Follow the steps in my previous post to hook up the events, but this time you can use the reusable function such as:
MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"
As long as you name your MediaElements and Rectangles appropriately, such as "Media_C2" for Rectangle "C2", "Media_D2" for Rectangle "D2", etc. If any of this seems confusing to the readers, post a comment and I will clarify or give you the source code.
Run the project and you will be able to click any of the notes and play some tunes! At this point, the piano still isnt fully functional, since you can't hit many notes at once.
For my next trick, I will be adding some simple keyboard commands to the piano application. The first step to this would be to add an event handler for the keyboard. I will add the event to the "LayoutRoot" grid, so that any key press in the application will be detected.
As you can see above, if you type these events into Visual Studio it will give you the option to automatically create the event handlers.
I'm using a big switch statement for all the different keys as pictured below. You can use different keys for different notes, but I just went with the bottom row of the keyboard from Z to M and the keys just above them where the black notes are.
Unfortunately we need to force the user to click the application so that key presses will be detected, so in a real application, I would suggest you make some kind of welcome screen to force the user to click. For now, click your first note before you start using the keys.
Coming up, I'll figure out a way to auto-focus the application, and light up the notes that we're going to be playing for better visual effect. You will also notice that if you hold the keys down, the note will not sound clearly, so we have to implement some more in-depth sound-looping logic.
Hope you could learn something from this post! If you can teach me something instead, feel free to post your comments below!
Regards,
Zero Gravity Chimp