How to move PictureBox in TableLayoutPanel grid from keyboard?

Question

I'm quite new at C#, but I'm trying to move a picturebox, by pressing the up-down-left-right keys from the keyboard, in a grid TableLayoutPanel(I made the grid at runtime). The grid is 23x23, has brickblock images border(each cell at the border contains a brickblock image in an imagebox) and an imagebox with a mouse in the middle. What I'm trying to do is moving the mouse image from the central cell(which is 11x11) in another cell by pressing one of the control keys mentioned above. It seems I can't get a grip on the idea of eventHandler... . The code works very good 'till I want to make the picturebox move. I've put the whole code, maybe the problem is in a place I didn't notice, but I think that the problem is KeyDown += new KeyEventHandler(Form2_KeyDown) or/end private void Form2_KeyDown(object sender, KeyEventArgs e){...} .

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace IndividualProject
{
  public partial class Form2 : Form
  {
    PictureBox picturebox5 = new PictureBox
    {
        Visible = true,
        Anchor = AnchorStyles.Top,
        SizeMode = PictureBoxSizeMode.Normal,
        Dock = DockStyle.Fill,
        Margin = new Padding(0)
    };

    public Form2()
    {
        InitializeComponent();
       // MaximizeBox = false;

        //size
        int h = Screen.PrimaryScreen.WorkingArea.Height / 2;
        int w = Screen.PrimaryScreen.WorkingArea.Width / 2;
        Size = new Size(w / 2 + w / 7, h + h / 4 + h / 7);

        //location
        StartPosition = FormStartPosition.CenterScreen;

        //form style
        FormBorderStyle = FormBorderStyle.FixedSingle;

        //menuStrip1.BackColor = Color.Beige;

        //lives and score container
        #region livesAndScore
        lasContainer.Size = new Size(Width / 2 + Width / 3 + Width / 7, Height / 13);
        lasContainer.BackColor = Color.Lavender;
        lasContainer.BorderStyle = BorderStyle.Fixed3D;
        lasContainer.Dock = DockStyle.Top;
        lasContainer.SplitterDistance = Width / 2 - Width / 69;
          //labels
        lives.Location = new Point(lasContainer.Panel1.Width / 12, lives.Height / 2);
        score.Location = new Point(lasContainer.Panel2.Width / 12, score.Height / 2);
          //picturebox
        live3.Location = new Point(lasContainer.Panel1.Width / 3, lives.Height / 2);
        live2.Location = new Point(lasContainer.Panel1.Width / 2, lives.Height / 2);
        live1.Location = new Point(lasContainer.Panel1.Width / 2 + lasContainer.Panel1.Width / 6, lives.Height / 2);
        #endregion livesAndScore

        //gamePanel
        gamePanel.Dock = DockStyle.Fill;
        gamePanel.BackColor = Color.SkyBlue;
        gamePanel.CellBorderStyle = TableLayoutPanelCellBorderStyle.Single; // REMOVE WHEN FINISHED !!!!!!!!!!!

        //making the grid
        #region grid
        gamePanel.ColumnCount = 23;
        gamePanel.RowCount = 23;
        gamePanel.ColumnStyles.Clear();
        gamePanel.RowStyles.Clear();
        int iIndex, jIndex = 0;

        for (iIndex = 0; iIndex < gamePanel.ColumnCount; iIndex++)
        {
            gamePanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 4.34F));
            gamePanel.RowStyles.Add(new RowStyle(SizeType.Percent, 4.34F));
        }
        #endregion grid

        while(jIndex < gamePanel.ColumnCount)
        {
            #region picturebox1
            PictureBox picturebox1 = new PictureBox
            {
                Visible = true,
                Anchor = AnchorStyles.Top,
                SizeMode = PictureBoxSizeMode.Normal,
                BackColor = Color.Sienna,
                Dock = DockStyle.Fill,
                Margin = new Padding(0)
            };
            if(jIndex < gamePanel.ColumnCount - 1)
            {
                gamePanel.Controls.Add(picturebox1, jIndex, 0);
                picturebox1.ImageLocation = @"..\..\ResourcesPh\brickblock.png";
            }
            #endregion picturebox1

            #region picturebox2
            PictureBox picturebox2 = new PictureBox
            {
                Visible = true,
                Anchor = AnchorStyles.Top,
                SizeMode = PictureBoxSizeMode.Normal,
                BackColor = Color.Sienna,
                Dock = DockStyle.Fill,
                Margin = new Padding(0)
            };
            if (jIndex < gamePanel.ColumnCount - 1)
            {
                gamePanel.Controls.Add(picturebox2, 0, jIndex + 1);
                picturebox2.ImageLocation = @"..\..\ResourcesPh\brickblock.png";
            }
            #endregion picturebox2

            #region picturebox3
            PictureBox picturebox3 = new PictureBox
            {
                Visible = true,
                Anchor = AnchorStyles.Top,
                SizeMode = PictureBoxSizeMode.Normal,
                BackColor = Color.Sienna,
                Dock = DockStyle.Fill,
                Margin = new Padding(0)
            };
            if(jIndex < gamePanel.ColumnCount - 1)
            {
                gamePanel.Controls.Add(picturebox3, gamePanel.ColumnCount - 1 - jIndex, gamePanel.RowCount - 1);
                picturebox3.ImageLocation = @"..\..\ResourcesPh\brickblock.png";
            }
            #endregion picturebox3

            #region picturebox4
            PictureBox picturebox4 = new PictureBox
            {
                Visible = true,
                Anchor = AnchorStyles.Top,
                SizeMode = PictureBoxSizeMode.Normal,
                BackColor = Color.Sienna,
                Dock = DockStyle.Fill,
                Margin = new Padding(0),
            };
            if(jIndex < gamePanel.ColumnCount - 1)
            {
                gamePanel.Controls.Add(picturebox4, gamePanel.ColumnCount - 1, gamePanel.RowCount - 1 - jIndex - 1);
                picturebox4.ImageLocation = @"..\..\ResourcesPh\brickblock.png";
            }
            #endregion picturebox4

            jIndex++;
        }

        //the starting point of the mouse
        #region mouseStartPoint
        //PictureBox picturebox5 = new PictureBox
        //{
        //    Visible = true,
        //    Anchor = AnchorStyles.Top,
        //    SizeMode = PictureBoxSizeMode.Normal,
        //    BackColor = Color.Sienna,
        //    Dock = DockStyle.Fill,
        //    Margin = new Padding(0)
        //};
        gamePanel.Controls.Add(picturebox5, 11, 11);
        picturebox5.ImageLocation = @"..\..\ResourcesPh\mouse.png";
        #endregion mouseStartPoint

        KeyDown += new KeyEventHandler(Form2_KeyDown);
    }

    private void Form2_KeyDown(object sender, KeyEventArgs e)
    {
        int x = 11, y = 11;

        if (e.KeyCode == Keys.Right)
            x += 1;
        if (e.KeyCode == Keys.Left)
            x -= 1;
        if (e.KeyCode == Keys.Up)
            y -= 1;
        if (e.KeyCode == Keys.Down)
            y += 1;

        gamePanel.Controls.Remove(picturebox5);
        gamePanel.Controls.Add(picturebox5, x, y);
        picturebox5.ImageLocation = @"..\..\ResourcesPh\mouse.png";
        Refresh();
    }

    private void howToPlayToolStripMenuItem_Click(object sender, EventArgs e)
    {
        Hide();
        Form3 f3 = new Form3();
        f3.FormClosed += (s, args) => Close(); //event handler on closing Form2 after Form3 is opened
        f3.Show();
    }

    private void exitToolStripMenuItem_Click(object sender, EventArgs e)
    {
        Application.Exit();
    }

  }
}

TableLayoutPanel Grid

Answer 1

You are always setting the starting position back to 11, 11 on every key click. Move your declaration outside of that scope:

int x = 11, y = 11;

private void Form2_KeyDown(object sender, KeyEventArgs e) {

Answer 2

Here's a greatly simplified approach for moving your mouse, I get straight to the point and kept things to a bare minimum, yet effective :D

Here are the tiles I've used:

And here's the code !

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApplication3
{
    public partial class Form1 : Form
    {
        private Dictionary<int, Image> _dictionary;
        private Size _imageSize;
        private int[] _level;
        private Size _levelSize;
        private Point _mousePos;

        public Form1()
        {
            InitializeComponent();
            pictureBox1.Paint += PictureBox1_Paint;
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            InitializeLevel();
            Redraw();
        }

        private void InitializeLevel()
        {
            var imageEmpty = Image.FromFile("empty.png");
            var imageMouse = Image.FromFile("mouse.png");
            var imageWall = Image.FromFile("wall.png");
            _level = new[]
            {
                0, 0, 0, 0, 0,
                0, 1, 1, 1, 0,
                0, 1, 1, 1, 0,
                0, 1, 1, 1, 0,
                0, 0, 0, 0, 0
            };
            _levelSize = new Size(5, 5);
            _imageSize = new Size(25, 25);
            _dictionary = new Dictionary<int, Image>();
            _dictionary.Add(0, imageWall);
            _dictionary.Add(1, imageEmpty);
            _dictionary.Add(2, imageMouse);
            _mousePos = new Point();
        }

        private void Redraw()
        {
            pictureBox1.Invalidate();
        }

        private void PictureBox1_Paint(object sender, PaintEventArgs e)
        {
            var graphics = e.Graphics;
            graphics.Clear(Color.Transparent);
            // draw level
            var i = 0;
            foreach (var tile in _level)
            {
                var x = i % _levelSize.Width;
                var y = i / _levelSize.Width;
                var image = _dictionary[tile];
                graphics.DrawImage(image, new Point(x * _imageSize.Width, y * _imageSize.Height));
                i++;
            }
            // draw hero !
            graphics.DrawImage(_dictionary[2], _mousePos);
        }

        protected override bool ProcessCmdKey(ref Message msg, Keys keyData)
        {
            var up = keyData == Keys.Up;
            var down = keyData == Keys.Down;
            var left = keyData == Keys.Left;
            var right = keyData == Keys.Right;

            var processed = up || down || left || right;
            if (!processed) return base.ProcessCmdKey(ref msg, keyData);

            // move the hero !
            var x = 0;
            var y = 0;
            if (left) x--;
            if (right) x++;
            if (up) y--;
            if (down) y++;
            _mousePos.X += x;
            _mousePos.Y += y;
            Redraw();
            return true;
        }
    }
}

Obviously you'll still want to check collisions, define your logic and such ...

Go on and give it a try !

Welcome to SO and good luck :D