Gridsplitter of Grid

The following figure shows a grid:

<Grid background = "lightgreen" width = "300" Height = "150" horizontalalignment = "center">

<Grid. columndefinitions>

<Columndefinition width = "30 *"/>

<Columndefinition width = "70 *"/>

</Grid. columndefinitions>

<Grid. rowdefinitions>

<Rowdefinition Height = "80"/>

<Rowdefinition Height = "*"/>

</Grid. rowdefinitions>

<Rectangle fill = "lightcoral" margin = "10" grid. Column = "0"/>

<Rectangle fill = "lightgoldenrodyellow" margin = "10" grid. Column = "1"/>

 

<Rectangle fill = "lightsteelblue" grid. Row = "1" margin = "10" grid. Column = "0"/>

<Rectangle fill = "lightsalmon" grid. Row = "1" margin = "10" grid. Column = "1"/>

</GRID>

The row and column sizes may not be changed. Suddenly, a gridsplitter is found, which can dynamically modify the column width or Row Height. Add it as follows:

 

<! -- Adjust the Row Height -->

<Gridsplitter background = "lightsteelblue" grid. columnspan = "2" grid. Row = "0" horizontalalignment = "stretch" verticalignment = "bottom" Height = "2"/>

<! -- Adjust the column width -->

<Gridsplitter background = "lightgoldenrodyellow" grid. rowspan = "2" width = "2"/>

After running, the mouse slides over the Yellow Line and the left and right arrows appear. You can drag the arrows to adjust the height or column width.