This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

Before we actually get in to the application, I want to take a look at the screen shot that we took earlier of the final UI that we are trying to create for the music player. So let us minimize XAML pad and we will also minimize Visual Studio so we are back on the desktop. And now, we can look in project files and open up Chapter 2. In here, you see the screen shot of the music player. For the time being, I just want to look at this in broad stokes just to get the basic structure down. We will be using the layout a lot in the rest of the course but for right now, let us just look at the main component of the UI. I see three basic areas here that we want to make space for. The first of these is a list box that contains the list of songs. The second is the area which shows what is currently playing with the album art preview. And then finally, there are the functional elements down below. This includes the volume control, the play button, and the time display. So an interesting question to ask ourselves at this point is what do we expect to have happened when the user resizes the window? I guess that of course we would always have the option which is disabling that. But, it really is much more elegant if the application can respond to dynamic size in a graceful way.

So for our application, let us respond by allowing the list box to take up any additional space after the preview area and the controls of taking up the space that they need. Did that sound familiar to you? To me, that sounds like a perfect scenario to use a grid. We know all that this grid has two columns. One for the song list over here and another one for the preview area and the controls. It looks like there are probably two rows as well. The top row would contain the preview area and the bottom row would contain the controls. And then of course the list box with the song list will expand both rows. And then finally, we have the controls that need to be positioned relative to each other. We probably could create separate columns for each of those in our grid but this is a great example of where it actually makes sense to use an additional panel. We will create a stack panel with a horizontal orientation to layout those controls relative to one another. And then we can position that entire stack panel inside of the grid.

Now, to actually do this, take a lot of typing. And so to keep things moving along, I have actually already typed out the necessary XAML for this layout. I have placed in the Project Files Folder under Chapter 2. This file is called the layout.txt. So let us open up that file and copy the contents. And now, we can close it and Alt Tab into Visual Studio. And we will paste the content in here. Notice that we actually already have a grid defined in here. I am going to leave that grid in place because it has got the media element in it. But, let us go ahead and replace the button because the XAML which I created already contains that button. So we can first of all select the button, delete it, and then paste the new XAML. All right, so let us take a minute to examine what is really going on here. First, notice that in nearly every case, we have something to layout. We are using a rectangle as place holder. Also, if you scroll up, you will notice that I have set the background property of the grid to be light blue and then if your scroll back down, you will notice that I set the background property of the stack panel to be orange. This is because I want to be able to see the bounds of each of those panels so you can tell what they are doing. So let us go ahead and run this so we can see what is going on.

So will notice that this UI matches pretty closely the screen that we want to create. On the left hand side, we have an area for the list box. On the right, we have an area for the Now Playing content. And then down here at the bottom, we have an area for our controls. And you will notice that we have kept the button in place. You will also notice what happens when we resize this. You can see that any additional space is given to a list box after the required space is taken by the Now Playing area, and the controls. So let us check it out to XAML that actually produce this in a little bit more data. So if we scroll to the top, you can see the first thing that we have here is a grid and we have set the background to be light blue. We have set show grid lines to be true. And we also have a set of column definitions and a set of row definition. You can see that the first column definition here is defined with the star, and the second column definition is to define what the width of auto.

And that second column is the column where we will place our not playing content as well as the controls. So because that is defined as auto, it is important to give a width to the now playing content. And then finally, we have two row definitions. The first of these has a fixed height of 220 and the second has a height with a star which again means, that is where all of the additional space will be allocated. So moving down, we see it actually assign elements to this grid. This first rectangle corresponds to what will eventually be the list box containing our songs. Now, you can see that we have set the Grid.column property to be zero and the Grid.rows expand to be twp. We have also set a margin on this and we have only set the margin on the right hand side. The reason for that is we need a barrier between the song list and then our playing area. And so we have created this margin of 10 pixels to account for that.

Moving down, the next thing that we want to address is the rectangle which represents to the now playing area. And so, the first thing to notice is that we have given this a fix width and that is because the grid column is actually set the auto. So we have to have a fix width here so that it will actually show up. The other thing to know here is that we have a margin on the bottom. And that so we do not appear to run into the controls which will be down below. And then finally, the next element is really a cool one because this is our nested panel. First, you can see how we have placed that stack panel on the grid. We assigned it to the bottom right cell by setting the column and row properties each to one. We are also setting the alignment properties so that within the cell, it will always be aligned to the top and be centered horizontally.

And then finally, we set the orientation property on the stack panel to layout its children horizontally. Now if we scroll down, you can see that we have three other elements. First is a rectangle which we use to represent the volume. The second is our play button, and finally as the last rectangle, which represents our play back time. And then notice that I have given each of these a fix width and height. And the size of this will not change throughout the action so we can keep in fix like this. Notice that all of these elements have a vertical alignment set to center. This will give them center relative to one another into vertical space. And remember again, that the whole stack panel is a whole group of controls. We will get centered together inside of the cell under the now playing area.

And then finally, the last thing to note is that we will set the margin property on the bottom. And that will not give us the gaps between the controls. So we set the margin property to four on the left and four on the right. That gives us four pixels of spacing on either side. And now with that, you should have a really solid picture of how the layout that we have created for this application is actually working. It is a great job. We have created a really sophisticated layout. One that is actually capable of responding to the user when he resizes the application. And then perhaps the most important thing is that hopefully, you have learned a lot about how layout works in WPF. You can take these principles and really you can create endless, interesting layouts of your own for your own applications.

Before we actually get in to the application, I want to take a look at the screen shot that we took earlier of the final UI that we are trying to create for the music player. So let us minimize XAML pad and we will also minimize Visual Studio so... click to read more