In the previous tutorial we have explored how to drag and drop a single image inside of windows form. In this tutorial we will explore how to move multiple objects by first drawing them on the screen using the paint event, linking the rectangles and images together and finally registering their movements with the mouse events. This one will be a fun tutorial for you to follow because you can pretty much make this the bases of some card games perhaps where you can battle between other cards, make a table top game or even use this as a GUI example in windows form. We will be using OOP programming to make this application. So if you are after a simple example of how to use OOP in a C# Project then please check out the video below and it will be explained to you step by step. Make sure you download the images from the link below before starting on the tutorial.

Lesson Objectives –

1. Make a table top style drag and drop application in windows form
2. Use the paint event to draw multiple images of cards on the screen
3. Add those images to a list and loop through them in different events
4. Use mouse down, mouse up and mouse move for the form
5. Add a timer to smooth the animation of the cards
6. Use a outline to grow it slowly when the cards are selected
7. Use Object Oriented Programming to make this application
8. Create a Cards Class that will contain the necessary instructions for the card object

Video Tutorial

Download the Deck of Card Images

Get C# Move Multiple Image with Mouse Project on GitHub

Card Class Source Code –

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Move_Multiple_Objects_using_Paint_MOO_ICT
{
    internal class Card
    {
        public Image cardPic;
        public int width;
        public int height;
        public Point position = new Point();
        public bool active = false;
        public Rectangle rect;

        public Card(string imageLocation)
        {
            cardPic = Image.FromFile(imageLocation);
            width = 65;
            height = 105;
            rect = new Rectangle(position.X, position.Y, width, height);
        }


    }
}

Form1.cs Source Code

namespace Move_Multiple_Objects_using_Paint_MOO_ICT
{
    public partial class Form1 : Form
    {

        List<Card> cards = new List<Card>();
        Card SelectedCard;
        int indexValue;
        int xPos = 0;
        List<string> imageLocation = new List<string>();
        int cardNumber = -1;
        int totalCards = 0;
        int lineAnimation = 0;


        public Form1()
        {
            InitializeComponent();
            SetUpApp();
        }

        private void SetUpApp()
        {
            imageLocation = Directory.GetFiles("cards", "*.png").ToList();
            totalCards = imageLocation.Count;

            for (int i = 0; i < totalCards; i++)
            {
                MakeCards();
            }

            label1.Text = "Card " + (cardNumber + 1) + " of " + totalCards;
        }

        private void MakeCards()
        {
            cardNumber++;
            xPos += 50;
            Card newCard = new Card(imageLocation[cardNumber]);
            newCard.position.X = xPos;
            newCard.position.Y = 300;
            newCard.rect.X = newCard.position.X;
            newCard.rect.Y = newCard.position.Y;
            cards.Add(newCard);
        }

        private void FormMouseDown(object sender, MouseEventArgs e)
        {

            Point mousePosition = new Point(e.X, e.Y);

            foreach (Card newCard  in cards)
            {
                if (SelectedCard == null)
                {
                    if (newCard.rect.Contains(mousePosition))
                    {
                        SelectedCard = newCard;
                        newCard.active = true;
                        indexValue = cards.IndexOf(newCard);
                        label1.Text = "Card " + (indexValue + 1) + " of " + totalCards;
                    }
                }
            }
        }

        private void FormMouseMove(object sender, MouseEventArgs e)
        {
            if (SelectedCard != null)
            {
                SelectedCard.position.X = e.X - (SelectedCard.width / 2);
                SelectedCard.position.Y = e.Y - (SelectedCard.height / 2);
            }
        }

        private void FormMouseUp(object sender, MouseEventArgs e)
        {
            foreach (Card tempCard in cards)
            {
                tempCard.active = false;
            }
            SelectedCard = null;
            lineAnimation = 0;
        }

        private void FormPaintEvent(object sender, PaintEventArgs e)
        {
            foreach (Card card in cards)
            {
                e.Graphics.DrawImage(card.cardPic, card.position.X, card.position.Y, card.width, card.height);

                Pen outline;

                if (card.active)
                {
                    outline = new Pen(Color.Maroon, lineAnimation);
                }
                else
                {
                    outline = new Pen(Color.Transparent, 1);
                }

                e.Graphics.DrawRectangle(outline, card.rect);
            }

            if (SelectedCard != null)
            {
                e.Graphics.DrawImage(SelectedCard.cardPic, SelectedCard.position.X, SelectedCard.position.Y, SelectedCard.width, SelectedCard.height);
            }

        }

        private void FormTimerEvent(object sender, EventArgs e)
        {

            foreach (Card card in cards)
            {
                card.rect.X = card.position.X;
                card.rect.Y = card.position.Y;
            }

            if (SelectedCard != null)
            {
                if (lineAnimation < 5)
                {
                    lineAnimation++;
                }
            }

            this.Invalidate();


        }
    }
}