在WPF中創建可調整大小的網格

Question

我需要編寫一個C＃WPF程序，以便讓用戶使用鼠標單獨修改網格的寬度和高度。經過一番閱讀，我發現WPF具有GridSplitter控件，這似乎是我的問題的一個可能的解決方案。到目前爲止，這是我的方法：

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; 
    } 

我得到的輸出如下：

請注意，我只能夠調整行（不知道爲什麼垂直分離器沒有出現），並且出於某種原因，當我抓住一個水平分離器時，它將調整整行而不是單個單元格。有任何想法嗎？請參見下面的截圖看到調整大小在行動：

這是，如果我調整單元格（0,0）（該形象已被我手動編輯）我所期望的：

在此先感謝！

Answer 1

如果您刪除verticalGridSplitter的行設置行，並將它們設置爲跨越NumRows，則會看到垂直分隔符。但最終，我認爲你正在嘗試使用分離器無法做到的事情。您無法調整單個單元格的寬度和高度，只能調整整個行和列。畢竟，如果你讓C0-R0變得更高，那麼你期望該行的其餘部分怎麼做？