GridSplitter

The GridSplitter SplitContainer control allows the user to drag the mouse to resize the left-right, or top-bottom, portion of a form, thereby “splitting” the form into two or more vertical or horizontal panels that can be resized.

Properties

Key properties of the GridSplitter determine its size and orientation:

  • Height and Width.
  • HorizontalAlignment and VerticalAlignment.

Note: To be selectable by the user, the GridSplitter must be the front-most control within its container.

In the Form Explorer, the controls within each container are shown in back-to-front order. In the following example, GridSplitter is the front-most control within Grid (GridwithSplitter) and is the last control listed under that container.

A TextBlock (SplitterTextBlock) has also been added to the form as a visual aid:

When you run the form, you can click and drag the “handle” to adjust the left-right panel size:

For a Gridsplitter with a vertical orientation:

  1. Place a GridSplitter within its own column and set the height/width of the column to Fixed.
  2. Select the GridSplitter and set the following properties:
    1. Set Height to NaN (undefined) and set the Width (i.e. 5 pixels).
    2. Set VerticalAlignment to Stretch and set a HorizontalAlignment other than Stretch.
    3. Set Margin to 0.

    The Cursor property is automatically set to SizeWE (West-East).

  3. Place a Grid to the Left of the GridSplitter, within its own column, and set the column height/width to Fixed.
  4. Place a Grid to the Right of the GridSplitter, within its own column, and set the column height/width to Fixed.

For a Gridsplitter with a horizontal orientation:

  1. Place a GridSplitter within its own row and set the height/width of the row to Fixed.
  2. Select the GridSplitter and set the following properties:
    1. Set Width to NaN (undefined) and set the Height (i, e. 5 pixels).
    2. Set HorizontalAlignment to Stretch and set a VerticalAlignment other than Stretch.
    3. Set Margin to 0.

    The Cursor property is automatically set to SizeNS (North-South).

  3. Place a Grid Above the GridSplitter, within its own row, and set the row height/width to Fixed.
  4. Place a Grid Below the GridSplitter, within its own row, and set the row height/width to Fixed.

Grid