GridSplitter

GridSplitter

The Grid Layout makes it very easy to divide up the available space into individual cells. But what if you want to allow the user to change the cell space? This is where the GridSplitter control comes into play.

The GridSplitter control redistributes space between rows or columns in a Grid, without changing the dimensions of the Grid. For example, when a GridSplitter resizes two columns, the ActualWidth property of one column is increased while at the same time the ActualWidth property of the other column is decreased by the same amount.

Features

• Customize the resize direction.
• ControlTemplate support.

Using the control

The ResizeDirection property specifies whether a GridSplitter control redistributes space between rows or between columns.

To specify a GridSplitter that resizes adjacent columns in a Grid, set the Column attached property to one of the columns that you want to resize.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid
        Grid.Column="0"
        BackgroundColor="Red">
        <Label
            TextColor="White"
            Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />
    </Grid>
    <Grid
        Grid.Column="2"
        BackgroundColor="Green">
        <Label
            TextColor="White"
            Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />
    </Grid>
    <controls:GridSplitter
        Grid.Column="1"
        ResizeDirection="Columns"/>
</Grid>

To specify a GridSplitter that resizes adjacent rows in a Grid, set the Row attached property to one of the rows that you want to resize. If your Grid has more than one column, set the ColumnSpan attached property to specify the number of columns.