So at this point, it should be obvious that grid is a really powerful layout mechanism for creating interesting and adaptable UIs. In fact, when it comes to the basic structure of a page or a scene, grid is almost always my first choice. On the other hand, there are times when something like stack and it really does make no sense. StackPanel or even a WrapPanel are particularly adept at dealing with situations when you do not know how many items we are going to have ahead of time.
Then the list can just stack them up and make sure they will all be visible. For creating an application layout though, it is hard to beat the flexibility of a grid. And the thing that seals the deal for grid is a handy helper control called grid splitter. When I was working in Microsoft on building the WPF controls, we were thinking about how to handle the problems related to splitting. And initially, we were going to use the standard approach of a split container. Basically, that would be a simple panel within only two children and then a splitter in between them for redistributing the space between those two children.
We realize though that this approach would not work well with the grid and we wanted people to be able to use grid for creating their UIs. But we are afraid that people would build up the layout for nap in grid and then have to start over using a splitter. That really drove home the need for a splitter that work with grid and we ended with a really handy element called grid splitter. The grid splitter basically redistributes the space between two columns or two rows. And it is really handy for creating flexible UI configurations.
The key to using it though is to think of it as just a regular element. In other words, it behaves just like any other element when inside of the grid. Okay, so let us take a look at what happens when we add a grid splitter to the grid. So, I am going to scroll down and we are going to add the grid splitter just like at where any other element within the grid. And then I am going give this a width of eight so that we can see it and a background of red. I hit F5, you could see that the grid splitter showed up over on the right hand side of the first column. But you will also notice that it is only showing up in the first row.
So we want to set the grid.rowspan property to two to make sure that it gets down into that second row. And now when I refresh, you can see that we got a grid splitter that spans two rows. So a good splitter is a pretty smart control and it can usually figure out what we wanted to do just by looking at where it is placed within the grid. Now because of the way this one is positioned, it will infer that want to redistribute space between this first column and the second one. Now watch would happen as we move the grid splitter.
You can see that the size of both columns is updating. And essentially the line that is between them is moving back and forth as we move the grid splitter. The other thing to know is that grid splitter is actually smart enough to even keep the original value types for the widths of the columns. So our first column this was declared with star syntax or in star units will stay in stars and the second column which was in pixel unit will stay in pixels. So when last point before we actually put this to work is the panels can actually be children of other panels. In other words, you can have StackPanels and grids or vice versa. This is a really a powerful concept and allows you to think about layout in a really modular way where you can address specific layout problems on a small scale and then combine those into the larger layout for the application.
So let us take a look at some examples of this as we go back to our music player and apply our new found knowledge about layout and panels.
Transcription by:
Scribe4you Transcription Services