Creating a resizable grid in WPF

Question

I need to write a C# WPF program in order to let the user individually modify the width and height of a grid using the mouse. After some reading, I've found out that WPF featues the GridSplitter control, which seems to be a possible solution for my problem. So far, this is my approach:

private const int NumCols = 5;
    private const int NumRows = 7;

    private void CreateDynamicWPFGrid()
    {
        // Create the Grid
        var dynamicGrid = new Grid();

        for (int i = 0; i < NumCols - 1; ++i )
        {
            // Define 2 * (NumCols - 1) columns. For every two columns, the first one will hold a label
            // whereas the second one will hold a vertical splitter.

            var gridColDefA = new ColumnDefinition();
            // The gridColDefB is for the splitter.
            var gridColDefB = new ColumnDefinition();
            gridColDefB.Width = new GridLength(1, GridUnitType.Auto);

            dynamicGrid.ColumnDefinitions.Add(gridColDefA);
            dynamicGrid.ColumnDefinitions.Add(gridColDefB);
        }
        {
            // The last column only needs a cell for holding a label. No splitter whatsoever.
            var gridColDef = new ColumnDefinition();
            dynamicGrid.ColumnDefinitions.Add(gridColDef);
        }

        for (int j = 0; j < NumRows - 1; ++j)
        {
            var gridRowDefA = new RowDefinition();
            var gridRowDefB = new RowDefinition();
            // The gridRowDefB is for the splitter.
            gridRowDefB.Height = new GridLength(1, GridUnitType.Auto);

            dynamicGrid.RowDefinitions.Add(gridRowDefA);
            dynamicGrid.RowDefinitions.Add(gridRowDefB);
        }
        {
            // The last row only needs a cell for holding a label. No splitter whatsoever.
            var gridRowDef = new RowDefinition();
            dynamicGrid.RowDefinitions.Add(gridRowDef);
        }

        for (int i = 0; i < NumCols - 1; ++i )
        {
            for(int j = 0; j < NumRows - 1; ++j )
            {
                // Insert the label.
                var label = new Label();
                label.Content = "C" + i + "-R" + j;
                label.Background = new SolidColorBrush(Colors.Azure);
                Grid.SetColumn(label, 2 * i);
                Grid.SetRow(label, 2 * j);
                dynamicGrid.Children.Add(label);

                // Insert the horizontal splitter.
                var horizontalGridSplitter = new GridSplitter();
                horizontalGridSplitter.Height = 1;
                horizontalGridSplitter.Background = new SolidColorBrush(Colors.DarkSlateBlue);
                horizontalGridSplitter.HorizontalAlignment = HorizontalAlignment.Stretch;
                horizontalGridSplitter.VerticalAlignment = VerticalAlignment.Center;
                Grid.SetColumn(horizontalGridSplitter, 2 * i );
                Grid.SetRow(horizontalGridSplitter, 2 * j + 1);
                Grid.SetRowSpan(horizontalGridSplitter, 1);
                Grid.SetColumnSpan(horizontalGridSplitter, 1);
                dynamicGrid.Children.Add(horizontalGridSplitter);

                // Insert the vertical splitter.
                var verticalGridSplitter = new GridSplitter();
                verticalGridSplitter.Width = 1;
                verticalGridSplitter.Background = new SolidColorBrush(Colors.DarkSlateBlue);
                verticalGridSplitter.HorizontalAlignment = HorizontalAlignment.Center;
                verticalGridSplitter.VerticalAlignment = VerticalAlignment.Stretch;
                Grid.SetColumn(verticalGridSplitter, 2 * i + 1);
                Grid.SetRow(verticalGridSplitter, 2 * j + 1);
                Grid.SetRowSpan(verticalGridSplitter, 1);
                Grid.SetColumnSpan(verticalGridSplitter, 1);
                dynamicGrid.Children.Add(verticalGridSplitter);
            }
        }

        // Display grid into a Window
        Content = dynamicGrid;
    }

The output I'm getting is as follows:

Default output

Notice that I'm only able to resize the rows (don't know why the vertical splitters don't show up) and, for some reason, when I grab a horizontal splitter it resizes the whole row and not just the individual cell. Any ideas? Please, See the following screenshot to see the resizing in action:

enter image description here

This is what I'd expect if I resize cell (0,0) (the image has being manually edited by me):

enter image description here

Thanks in advance!

Matt Burland Matt Burland · Accepted Answer · 2012-10-02T16:01:51

If you remove the line setting the row for your verticalGridSplitter and set them to span NumRows, you will see your vertical splitters. But ultimately, I think you are trying to do something that the grid with splitters can't do. You can't resize the width and height of individual cells, only whole rows and columns.

After all, if you make C0-R0 taller, what do you expect the rest of that row to do?

Creating a resizable grid in WPF

1 Answers