9 Gongge Puzzle

Learn a puzzle project today.

The goal is to pass in a picture, then divide it into 9 parts, remove one copy, and click on the mouse to do the puzzle.

The source file structure is simple

First step, new project

This step is nothing to say, the new project is the same as the source file structure

Second step, page layout (. xaml file)

Look at the source file

The DockPanel control has a grid button of three and then sets the grid to have three columns and three rows. Dockpannel temporarily do not know what is the use, so I do not busy Add. And then I got an error.

The original XAML is in XML format. Button outside no double label surrounded, not recognized, so error. So add a label outside the line, if Add DockPanel label and source files, here in order to understand what is the use of DockPane, so still use grid, see if it will be error. My current code is

The second step, write the click button to select the function of the picture

This post was written last week, but half of it went into C + +. C + + study for a while, suddenly understand why I have to program. I am programmed not to be interested in computers, not for 0 and 1. I learn computers and programs just to make things. So back to continue to write this series, after the content I will not catch the details, some things, can read the line. It doesn't matter if you can't remember, just check it when you use it. After I've made the project, I'm going to make it look the way I like it, not the same as the source code.

Click the button to do two things

1. Pop Up the File Selection dialog box and select the picture.

2. Create puzzles after selecting pictures

Here is the code to select the picture

Select Picture

　　

The first step in creating a puzzle is to divide the image into 9 pieces and fill in the corresponding area.

This is a bit complicated, the source code used a lot of methods, I used to split it as a class to write alone.

<summary>////    Puzzle Generation class///    pass in a picture to generate a 9*9 picture collection///    </summary> public    class　　　　Puzzleforimage    {        BitmapImage     _image;                                         Original picture public        list<rectangle> initialunallocatedparts = new list<rectangle> ();//collection of puzzles to return//        <summary>///        When new object is passed in the original image///</summary>//        <param name= "image" ></param> Public        puzzleforimage (BitmapImage image)        {            _image = image;
Create Puzzles        }}

The first step: Write the Sub method, draw the rectangle based on the starting point and the picture width height. Then call 9 times to get the whole puzzle collection

Step two: Randomly arrange the 8 puzzles in 9 pieces, and choose the top eight

Step three: Add blocks of blank puzzles

Fourth Step: Add Mouse click Move Event

At this point, the source part of the end, and added a successful judgment of the Code in the box click event Execution.

Here's my Code.

MainWindow.xaml.csPuzzleForImage.cs

Operating effect:

The problem still exists:

1, now the picture will be stretched, temporarily did not think of a good way.

2, will be random some of the puzzles can not be spelled out

------------------------------Split Line 2016-8-3 16:47---------------------------------

Picture stretching problem has been solved

@ Dawn flashes
[quote] Picture stretching should be scaled by the scale of the picture only by restricting the zoom of the form. The 9path principle is similar to this nine Gongge [/quote]

Here is the code

Set Width height

Updated MainWindow.xaml.cs files and MainWindow.xaml files

Here's the latest code

MainWindow.xaml.csMainWindow.xaml

PuzzleForImage.cs not changed, or the one above.

9 Gongge Puzzle