The other things to know about xaml is that it is use to define trees of objects. Something like the document object model in html. These tree maps directly to the xml element tree so we could say for example that this grid is a child of the window and that the window is the grid’s parent.
We can a child to the grid by adding it between the beginning and end tags at the grid like this. Notice that Visual Studio automatically completed that tag for us and placed the cursor in between the two tags. This makes it really easy to add additional elements and in fact we will do that right now.
In order to set the content for the button we can just begin typing the content right in between the two tags. Okay. Let us go ahead and make sure we give the button a width and a height before running it. Now we can go ahead and run this application to see the button that we had just created. Okay. So you can see now that we have a button and at the content of that button is play.
Here is the real secret about xaml, though. It is more general purpose you might think. So it was designed for creating UI and it is very good at that. But it can actually be used to create an instance of any arbitrary object and we will see where this can be really useful. That means that you can create objects with xaml that are not necessarily visual or not necessarily objects that appear on the screen or in the UI.
One example of an element that does not necessarily have a visual associated with it is the MediaElement. The MediaElement is the general purpose media player that can be use for both audio and video. Now, obviously when it is playing a video it does take up some screen real estate. But for our music player we are just going to use it for sound. We can go ahead now. This is a child of the grid.
Now let us have some properties on this object. First, let us give it a name. We will do this by setting the name property. We will need that in just a minute. The other property that we are going to set is the source property and this is the source of the media that we actually we want to play. So in other word this will be a filename.
Then you can go ahead and use any audio file that you have on your computer or if you do not have any audio files on your computer, use the audio that we included in the project file folder. In order to get the full path to that, I am going to go ahead and open up Windows Explorer to the directory where we have put those media files and then we are going to select the entire path to that folder and put it on clip board.
Now if we open up Visual Studio again, I can use that to set the source attribute and then the name of one of the files was O1 - Irie.mp3. Do not forget the spaces on either side of the dash. Now even though you cannot actually see this element when we run the application, you will be able to hear it.
Then you may notice that we did not actually tell it to begin playing. We never click the play button. We can tell the MediaElement that we actually want to control it manually by setting the LoadedBehavior property to manual. So, you are probably wondering how it is that we actually are going to control the MediaElement. Well this brings up the next thing that I wanted to show you.
Transcription by:
Scribe4you Transcription Services