Tuesday, March 15, 2011

WPF GridSplitter

Today we are going to talk about the GridSplitter in WPF!

What is it for?
The grid splitter allows the user to resize content in the grid.

How do I use it?
But first, a few key pointers:

  • GridSplitter can only be placed in a cell.
  • Resizes the whole row or column not just a single cell, so if you have multiple rows you would need to specify a rowspan.
  • By defualt the splitter has a width of 0. So we always need to give it a width so the user can see it and use it.
  • GridSplitter Horizontal / Vertical alignment is key in determining how the grid splitter will be positioned.

So here we have a realistic example using the grid splitter where you might have a menu on the left that sometimes has content that gets too wide to fit so you need to resize it manually.

Here is what this consists of:

  • A stackpanel of textblocks in the first cell
  • A textblock that wraps in the second cell.
  • And last but not least, a grid splitter

So, you can see here we have a GridSpliter in the second column, stretched vertically from top to bottom. The GridSplitter is Horizontally aligned to the left, with a width of 2 because we need to be able to see it as well as use it. Notice here that we could have just as easily put the GridSplitter in the first column and aligned it to the right, and it would just as well.

Next, we are going to show a less common, more complicated example using 4 cells and two GridSplitters.

So, let’s talk about the first grid splitter here:
I put it in column 1, and it is aligned left and since there are two rows, I gave it a width of 3,rowspan of 2, and stretched it vertically.

The next gridsplitter I put it on the first row and vertically aligned it to the bottom of the row.
I also gave it a columnspan of 2 and stretched it horizontally. A very important difference that you need to note is that instead of setting the width this time. I had to set the GridSplitter’s height property.

*show it working*

So that’s pretty much all there is to GridSplitters! Today I hope you got an understanding of what a grid splitter is, and how to use it!

Thanks for watching, if you have any questions, comments, or suggestions at all please don’t forget to comment below the video!


  1. Thank you. I had no idea what a gridsplitter was.

  2. Thank you for the very clear and concise tutorial on Grid Splitters! Nicely done!

  3. Hi "wpftutorials",
    thanks for this short video. It gives me a short and good introduction how to use the WPF GridSplitter Control.

  4. Thanks for the video. It made the concept of Gridsplitters easier to understand.