C＃可點擊的網格

Question

我想創建一個有網格的遊戲，用戶可以點擊網格區域來切換它們的狀態。我正在使用WinForms。我能找到2點的方式來做到這一點，無論是看起來很複雜：

1. 的表佈局面板，並將其放置在每一個區域的標籤或按鈕，單擊該按鈕時，弄清楚（在某種程度上），這列並點擊進來，並相應地採取行動。
2. 未綁定的GridView。

這兩者似乎都非常複雜，以處理這樣的事情。

例如，考慮一個井字遊戲。在這種情況下，我想要的只是一個3x3的網格，並知道點擊了哪個區域（x，y）並在該區域繪製了一些東西。

Answer 1

讓我告訴你一些我寫了更加接近你的需求，也許：

private Button button; 
    private Dictionary<string, Image> images = new Dictionary<string, Image>(); 

    public Form1() 
    { 
     InitializeComponent(); 
     InitializeTableLayoutPanel(); 
     AssignClickEvent(); 

     InitializeDictionary(); 
    } 

    private void Form1_Load(object sender, EventArgs e) 
    { 

    } 

    /// <summary> 
    /// Create Buttons for all Cells in the TableLayouPanel 
    /// </summary> 
    private void InitializeTableLayoutPanel() 
    {   
     for (int i = 0; i < tableLayoutPanel.ColumnCount; i++) 
     { 
      for (int j = 0; j < tableLayoutPanel.RowCount; j++) 
      { 
       button = new Button(); 
       button.Visible = true; 
       button.Dock = DockStyle.Fill; 

       tableLayoutPanel.Controls.Add(button, i, j); 
      } 
     } 
    } 

    /// <summary> 
    /// Assign a Click event of all Buttons in the TableLayoutPanel 
    /// </summary> 
    private void AssignClickEvent() 
    { 
     foreach (Control c in tableLayoutPanel.Controls.OfType<Button>()) 
     { 
      c.Click += new EventHandler(OnClick); 
     } 
    } 

    /// <summary> 
    /// Handle the Click event 
    /// </summary> 
    /// <param name="sender">Button</param> 
    /// <param name="e">Click</param> 
    private void OnClick(object sender, EventArgs e) 
    { 
     Button button = sender as Button; 
     button.Visible = false; 

     int column = tableLayoutPanel.GetPositionFromControl(button).Column; 
     int row = tableLayoutPanel.GetPositionFromControl(button).Row; 

     InitializePictureBox(column, row); 
    } 

    /// <summary> 
    /// Create the PictureBox 
    /// </summary> 
    /// <param name="column">TableLayoutPanel Column</param> 
    /// <param name="row">TableLayoutPanel Row</param> 
    private void InitializePictureBox(int column, int row) 
    { 
     PictureBox box = new PictureBox(); 
     box.Dock = DockStyle.Fill; 

     string key = string.Format("{0}{1}", column.ToString(), row.ToString()); 

     box.Image = GetImageFromDictionary(key); 

     tableLayoutPanel.Controls.Add(box, column, row);   
    } 

    /// <summary> 
    /// Get an Image from the Dictionary by Key 
    /// </summary> 
    /// <param name="key">the calling cell by combined column and row</param> 
    /// <returns>Image</returns> 
    private Image GetImageFromDictionary(string key) 
    { 
     return images.Where(x => x.Key == key).Select(x => x.Value).Cast<Image>().SingleOrDefault();    
    } 

    /// <summary> 
    /// Add Bitmaps to the Dictionary 
    /// </summary> 
    private void InitializeDictionary() 
    { 
     string key = string.Empty; 
     for (int i = 0; i < tableLayoutPanel.ColumnCount; i++) 
     { 
      for (int j = 0; j < tableLayoutPanel.RowCount; j++) 
      { 
       key = string.Format("{0}", i.ToString() + j.ToString()); 
       Image image = CreateBitmap(); 
       images.Add(key, image); 
      } 
     } 
    } 

    /// <summary> 
    /// Create Bitmaps for the Dictionary 
    /// </summary> 
    /// <returns>Bitmap</returns> 
    private Bitmap CreateBitmap() 
    { 
     System.Drawing.Bitmap image = new Bitmap(button.Width, button.Height); 
     for (int x = 0; x < image.Width; x++) 
     { 
      for (int y = 0; y < image.Height; y++) 
      { 
       image.SetPixel(x, y, Color.Red); 
      } 
     } 
     return image; 
    } 

前點擊：

點擊後：

請注意，我已經由設計師創建列和行，但我認爲沒有什麼特別的以編程方式創建它們。

接下來的步驟是什麼？

1. 創建各種彩色圖片
2. 創建面板的列和行編程
3. 建立由設置更靈活的個人設置

希望這有助於一點點。

Answer 2

使用一個PictureBox並自己繪製網格線。您可以通過註冊事件Paint來完成此操作。然後註冊事件MouseClick以獲取用戶點擊網格（在圖片框上）的詳細信息。