The GridSplitter is used in conjunction with the grid panel. By adding a GridSplitter to a column or row the user can resize the cell boundaries at runtime.
- [Instructor] So far, all of the layouts we've looked at, in this chapter, have been fixed size. In the real world, you want to allow your users to make their own choices and decide what size their interface should be. Here's a classic example. In Visual Studio, I'd like to see more of the toolbox, so I would move over, to the edge of the toolbox where you have this blue, vertical bar. When I move my mouse over it, this is called a splitter, when I move my mouse over the splitter, you'll see a two headed arrow appear. And, now, the user can grab a hold, drag to a new position, and, then, let go.
When you let go of the mouse, the toolbox gets larger, and the visual designer window gets narrower, or smaller. It's the same over here, on the solution explorer, in property window, grab, move, I'm getting a preview bar, here, that shows me where the window size will be, when I release the mouse. When I release, it resizes. And, then, there's also a splitter, here, in the center, between the XAML editor, and the visual designer, in this case, it's a much wider, gray splitter.
I'll show you how to implement this, in WPF. The key to making this work, is a control called the grid splitter. So, you have to have a grid, and, then, you use a grid splitter. Let me unpin my toolbox, so I've got more room. I'll zoom this up to 50 percent. And, here's my grid, it has three columns. Actually, it has five columns, but, two of the columns are so narrow, you can't see them. When you use a grid splitter, you put it inside the grid. And, one of the rules, when you're working with a grid splitter, is, that you'll want to put the grid splitters, at the end of the grid.
This ensures that they'll render over the rest of the elements, in the grid. So, I'll add one, here, and, then, I'll copy this, and paste it, because I need two splitters. The next thing, is, you have to decide where to put it. So, you're going to put it in one of these columns. You could put it in the first column. That wouldn't do much good, because, it'd be over here, in this side, and, it really wouldn't help. I could put it in the second column, right here, and, then, that would manage the size between column zero, and column one.
It turns out that that's also troublesome, occasionally. So, it's best, if you create a dedicated column, just for the grid splitter, and, that's what I've done. Actually, I have five columns defined. Here's the first column, the second column is set to auto-size, which means, at the moment, that since there's nothing in there, you can't see that column. And, I gave it a name, just to help identify it, splitter column one, and this one's called splitter column two. So, the second and fourth columns are the ones that are going to contain the splitters.
Next, I will go over here, and, put it in the correct column, so, I'll put it in grid column one. Grid, put it in grid column one, this one'll go in grid column three. I'll set the width of the grid splitter, and, this'll be the size that it shows, inside that column. So, if I want to mimic what I have, in Visual Studio, I'll have a wide column, here, for the first splitter, and, for the second column, I'll have a narrower one. This one will be a gray color, this will be a dark blue color.
And, then, this needs to go in column three, I think I said I was going to put it there, but I never changed the value. Now, I've got a splitter here, and, a splitter here. The next thing, is, you see that it only is filling up this first row. I'd like the splitter to go all the way from the top, to the bottom. So, I'll have to use the row span. Copy that into the first splitter. Now, it looks like it's going all the way from top to the bottom, for both of these. This first one, I'll make it gray, actually, I'll try gray first.
You see that's a bit too dark, so, I'll choose light gray. That looks close to what we have, in Visual Studio. And, for this second splitter, I'll make it navy, which is a dark blue color. And, then, I'll do a ctrl k, ctrl d, to format my document, make it a little bit easier to read. OK, let's see how this looks. Press F5, to run the application. And, it doesn't work exactly the way we thought it would. And, let's see how this one's working.
Not quite working correctly, yet. So, let's see what else that we have to do. The problem is, you have to tell Visual Studio, or, actually, I have to tell the grid splitter, whether it's a column splitter, or a row splitter. And you do that, using the horizontal alignment, and, the vertical alignment. So, we'll set the horizontal alignment to center. I'll set the vertical alignment to stretch. So, that'll stretch it, from the bottom to the top, for this splitter.
And for this, I'll copy this, and, paste it, into this second splitter. Now, I'll run the application again, and see what it looks like. Now, it's working correctly. That's a little counter-intuitive, that you have to use the horizontal alignment, and the vertical alignment, to make this happen. Essentially, we're stretching it, from the very top, to the very bottom, and, then, we're telling it to use center. Now, it doesn't have to be center, it also could be left, or right, for the alignment values, all three of those work, but, I just usually pick center, for my examples.
Let's see if this one works, and, it's working perfectly. Now these look, you see this column changes, and gets smaller, this column gets larger. The only thing left to do, is, get that preview pane. Remember, in Visual Studio, when I dragged this item, I got this bar that shows up, and, it's not until I let go of the mouse, that it changes size. Yet, in my application, it's changing as I move. So, if I want to use the preview, I'll use a property called ShowsPreview.
And, now, see what I have wrong. ShowsPreview, I need a space, there. That's not what it is. I actually added it to the same grid splitter twice. That's better. Now, I get the preview, it's the same size as the gray splitter. And, the preview for this one will be the same size as the navy splitter.
This is how you set up a column splitter. If you want to do a row splitter, it's very similar. Let's open up this file, here, RowSplitter.xaml. There's so little room, you have to keep sizing the items. Perfect example of why you need flexible UI. I'll make this a little bit smaller. That looks better. So, in this example, I created five row definitions.
I set the second, and fourth, to be auto-size. Then, I put the splitters in those rows. Then, I just have to swap this value. I go from horizontal alignment being centered, and, I change that to stretch. And, I go from vertical alignment being stretched, and set that to center. And, then, I set the column span to three, instead of row span. So, now, it goes across these three columns. Then, to demonstrate it, I need to go to App.xaml, and change the StartupUri to show RowSplitter, and, that's ready to go.
So, that's how you create a sizable UI, in WPF, using the grid, and the grid splitter.
- Exploring the layout panels
- Working with the grid
- Adding rows and columns
- Creating scrolling content
- Controlling element visibility
- Aligning content
- Making custom layout panels