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以获取用户点击网格（在图片框上）的详细信息。