Split Columns using GridSplitter Control: WPF

By default the XAML code contains a grid panel, in which we have to use other controls. The grid control can be changed if we want. The columns of a grid are of fixed size, if we are in running mode. The size can be changed during the programming session by the programmer, otherwise not.

Grid splitter is a control which provides the functionality of resizing the columns in running mode, by the user itself. The following code will place a splitter in first column to be resizable:

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>


<GridSplitter Grid.Column="1" ShowsPreview="True" HorizontalAlignment="Left"
 VerticalAlignment="Stretch" Background="Black" Width="2" >

</GridSplitter>
<Label Grid.Column="0" Content="Column 1"/>
<Label Grid.Column="1" Content="Column 2"/>
<Label Grid.Column="2"  Content="Column 3"/>
</Grid>

It will show a splitter between first and second column as in following image:

Here above HorizontalAlignment property decides, on which two columns you want to resize. When it is left, the splitter will be between first and second column from the left side and if it is right, splitter will be between first and first column from the right side.

If your grid has more than one row, we can set the RowSpan property to specify the no. of rows, till where we want to split the column.

ResizeBehaviour property specifies, how the columns are resizing with some in-built values i.e. CurrentAndNext, PreviousAndNext and 2 more.

ResizeDirection property is used to determine whether the rows are resizing or columns. All the common properties are also usable like height, width, margin and etc.