Question

我正在尝试创建一个具有网格的游戏，用户可以单击网格区域来切换其状态。我正在使用WinForms。我可以找到两种方法来做到这一点，看起来很复杂：

一个表格布局面板，并在每个区域放置一个标签或按钮，当点击该按钮时，弄清楚（以某种方式）该点击所在的列和行，并采取相应的行动。
未绑定的GridView。

处理这样的事情似乎都很复杂。

例如，想想一个井字游戏。在这种情况下，我想要的只是一个3x3网格，并且知道在哪个区域（x，y）被点击并在这个区域中绘制一些东西。

Answer 1

使用PictureBox并自己绘制网格线。例如，您可以通过注册事件Paint来执行此操作。然后注册事件MouseClick以获取位置用户点击网格（在PictureBox上）的详细信息。

Answer 2

让我告诉你我写的更接近你需要的东西，也许：

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

点击之前：

Before clicking the Button

点击后：

After clicking the Button

请注意，我已经按设计师创建了列和行，但我认为以编程方式创建它们并不是特别的。

下一步可能是什么？

制作各种彩色图片
以编程方式创建面板的列和行
通过设置个人设置来更灵活地构建

希望这有点帮助。

C＃可点击网格

2 个答案: