WPF GridSplitter Example

Use the resizable WPF GridSplitter control to split a Grid with rows.


A Grid may have rows and columns. We specify these with RowDefinitions and ColumnDefinitions. And with a GridSplitter, a user can drag to resize these rows and columns. We use a GridSplitter.

To begin,

please create a WPF program with a Grid in it. Next, edit the XAML and add the Grid.RowDefinition element. Then add two RowDefinition elements—and specify the heights on these.

Then: Drag a GridSplitter element to the Grid. You will need to adjust some attributes on it.

For the GridSplitter,

you will want to change the Height. If you remove the Width and set the HorizontalAlignment to Stretch, it will fill the horizontal width. Also, set the Grid.Row attribute to the index of the row you want to resize.

Tip: Please set the Grid.Row attribute on the other elements of your Grid. The first row is index 0, and the second row is 1.

Example markup: XAML <Window x:Class="WpfApplication23.MainWindow" xmlns="" xmlns:x="" Title="MainWindow" Height="350" Width="525"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="60"/> <RowDefinition Height="60"/> </Grid.RowDefinitions> <Button Content="In row 0" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Width="75" Grid.Row="0"/> <Button Content="In row 1" HorizontalAlignment="Left" Margin="10" VerticalAlignment="Top" Width="75" Grid.Row="1"/> <GridSplitter Height="10" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Top" ResizeDirection="Rows" ShowsPreview="True" Grid.Row="1"/> </Grid> </Window>

In this example,

we can drag the GridSplitter up and down. When the mouse is released, the height of the rows is adjusted. With the ShowsPreview attribute, a "preview" bar is shown as it is dragged.

And: When ShowsPreview is left as False, the grid will resize automatically as the splitter is dragged.

You can specify

a RowsDirection attribute on the GridSplitter as well. To resize vertically, specify a value of Rows. Otherwise, to resize horizontally (left and right) please specify Columns.

Tip: When using GridSplitter, many of these elements must be added through the XAML editor. Drag and drop support is not always available.


With a Grid, complex layouts may be achieved. Rows and columns provide a way to visually group controls. This improves usability. And with GridSplitter, the sizes of these groups can be customized, making programs easier still to use.Resize Rows: Microsoft Docs
Dot Net Perls
© 2007-2019 Sam Allen. All rights reserved. Written by Sam Allen,