Click here to Skip to main content
13,346,397 members (64,352 online)
Click here to Skip to main content
Add your own
alternative version


11 bookmarked
Posted 6 Apr 2008

A simple jigsaw

, 6 Apr 2008
Rate this:
Please Sign up or sign in to vote.
Manipulate WinForms controls to make a simple jigsaw puzzle.


This article explains how to make a simple jigsaw puzzle, and make a handsome monkey laugh :-)


This is pretty simple, and works mainly on location mathematics and the Bitmap object's Clone method. I did a cooler version of this, but lost it to Shift + Del :-O ...oooooooooooh! When I have a less busy head, I will do it again. But, you could have this to play with. It's not bad.

Using the code

The most important part of this application is the gettokenpictures() method. Here, a Bitmap object's Clone function is used to slash the main image into 60x60 parts, having set the size of the image to 300x300 (which gives us 25 parts of 5x5).

Actually, set the image size by stretching it against the main picture box.

mainpic.Size = new Size(300, 300);

private void gettokenpictures()
    mainpic = new PictureBox();
    mainpic.Size = new Size(300, 300);
    mainpic.Location = new Point(0, 0);
    // Image.FromFile("main.jpg");
    mainpic.Image = JigsawCS.Properties.Resources.Main;
    mainpic.SizeMode = PictureBoxSizeMode.StretchImage;
    int top = 0;
    int left = 0;
    int k = 0;
    Bitmap bmp = new Bitmap(mainpic.Image);
    for (int i = 0; i < 5; i++)
        for (int j = 0; j < 5; j++)
            PictureBox tokenpic = (PictureBox)tokens[k];
            if (k == 24)
                tokenpic.Image =JigsawCS.Properties.Resources.blank;
                // Image.FromFile("blank.jpg");
                tokenpic.Image = bmp.Clone(new Rectangle(left, top, 60, 60), 
            left += 60;
        left = 0;
        top += 60;

So the line:

tokenpic.Image = bmp.Clone(new Rectangle(left, top, 60, 60), 

creates an image from a rectangular part of the main image, and assigns it to a token, which is a picture box. A simple loop is used to manipulate the offsets (left and top).

You could add your own image(s) by uploading them into the application's resources, or keeping it/them in a location of your choice.

The line:

mainpic.Image = JigsawCS.Properties.Resources.Main;

in the above code sets the image, which you can do at runtime or before. So you could have:

mainpic.Image = JigsawCS.Properties.Resources.[You imagefile's name];


mainpic.Image =  Image.FromFile([You imagefile's name]);

Enjoy :-)


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
United Kingdom United Kingdom
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralOn top of what Luc said... Pin
Dave Kreskowiak25-Mar-11 7:10
mvpDave Kreskowiak25-Mar-11 7:10 
Generalpuzzling Pin
Luc Pattyn25-Mar-11 4:42
mvpLuc Pattyn25-Mar-11 4:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 6 Apr 2008
Article Copyright 2008 by spidergeuse
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid