title: Creating a resizable grid in WPF
body: <p>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:</p>
  
  <pre><code>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 &lt; 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 &lt; 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 &lt; NumCols - 1; ++i )
          {
              for(int j = 0; j &lt; 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;
      }
  </code></pre>
  
  <p>The output I'm getting is as follows:</p>
  
  <p><img src="https://i.stack.imgur.com/z4RTc.jpg" alt="Default output"></p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/VZyUo.jpg" alt="enter image description here"></p>
  
  <p>This is what I'd expect if I resize cell (0,0) (the image has being manually edited by me):</p>
  
  <p><img src="https://i.stack.imgur.com/Otmw4.jpg" alt="enter image description here"></p>
  
  <p>Thanks in advance!</p>