2015-05-14
262
Прежде чем приступить к разработке приложения, вам потребуется подобрать картинку, которую будем использовать в качестве основы для паззла. Далее в любом графическом редакторе необходимо разрезать выбранную картинку на равные части (в нашем случае 16) и каждую часть сохранить под своим именем.
Далее перейдем непосредственно к разработке приложения. Создайте новый проект Puzzle.
1-й этап. Создадим визуальный интерфейс приложения (рис. 13.2).
Измените значение свойства Text формы на “Паззл”, размеры формы 600; 600.
Поместите на форму компонент TabledLayoutPanel. Этот компонент служит контейнером для других компонентов и облегчает задачу их упорядоченного расположения в виде таблицы. Измените свойство Name этого компонента на Field.
Измените количество строк и столбцов компонента в диалоговом окне Column and Row Styles (рис. 13.1). Для этого достаточно в окне свойств Properties щелкнуть по кнопке 
напротив свойства Columns. С помощью кнопки Add добавьте еще два столбца и задайте их размеры в процентах 25% для каждого столбца относительно размеров компонента. Повторите операцию для строк. В результате компонент TabledLayoutPanel представляет собой таблицу 4×4.
|
|
|
Установите значение свойства Dock компонента TabledLayoutPanel равным Fill (выберите центральный прямоугольник). Это свойство позволяет задать расположение границ компонента относительно родительского компонента. Значение Fill указывает, что компонент занимает всю рабочую область формы.
В верхнюю левую ячейку таблицы поместите компонент PictureBox. Измените значения его свойств следующим образом:
| Свойство | Значение |
| Name | picture1 |
| SizeMode | StretchImage |
| Dock | Fill |
| Margin | 0; 0; 0; 0 |
Далее скопируйте компонент picture1 в буфер, и вставьте его копию во вторую ячейку первой строки таблицы, измените значение свойства Name на picture2. Повторите операцию для оставшихся ячеек таблицы.
Теперь в каждый компонент PictureBox загрузите произвольный фрагмент картинки (не повторяясь). Для этого в окне свойств Properties выберите свойство Image и вызовите диалоговое окно Select Resource, в котором выберите Local Resource, нажмите на кнопку Import и укажите путь к одному из подготовленных вами в начале работы файлов.
В результате, на форме произвольным образом должны располагаться 16 фрагментов исходной картинки (рис. 13.2).
2-й этап. Создание программного кода.
Процесс собирания паззла удобно реализовать с использованием технологии Drag&Drop. В этом случае пользователь перетаскивает фрагменты картинки с одного места формы на другое с помощью мыши, при этом два фрагмента картинки меняются местами. При таком способе реализации каждый компонент PictureBox может являться одновременно как источником, так и приемником, поэтому необходимо задать свойство AllowDrop для каждого компонента PictureBox. Поскольку это свойство в окне свойств Properties не отображается, зададим его значение программным путем в обработчике события Load формы.
|
|
|
private void Form1_Load(object sender, EventArgs e)
{
this.picture1.AllowDrop = true; this.picture.AllowDrop = true;
this.picture3.AllowDrop = true; this.picture4.AllowDrop = true;
this.picture5.AllowDrop = true; this.picture6.AllowDrop = true;
this.picture7.AllowDrop = true; this.picture8.AllowDrop = true;
this.picture9.AllowDrop = true; this.picture10.AllowDrop = true;
this.picture11.AllowDrop = true; this.picture12.AllowDrop = true;
this.picture13.AllowDrop = true; this.picture14.AllowDrop = true;
this.picture15.AllowDrop = true; this.picture16.AllowDrop = true;
}
Эти операторы можно заменить на цикл:
for (int i = 1; i <= 16; i++)
((PictureBox)(Controls.Find("picture" + i,true)[0])).AllowDrop = true;
Процесс перетаскивания инициируется, когда пользователь щелкает мышью по любому из компонентов PictureBox. Создадим обработчик события MouseDown для компонента рicture1. Здесь мы должны инициализировать процесс перетаскивания с помощью метода DoDragDrop (). Это можно сделать следующим образом:
DoDragDrop(picture1, DragDropEffects.Move);
Обратите внимание, что в качестве перетаскиваемых данных мы запоминаем компонент picture1. Однако при таком способе решения нам потребуется написать еще 15 аналогичных обработчиков события MouseDown для каждого из фрагментов картинки. Такой способ решения является достаточно трудоемким.
Поэтому в методе DoDragDrop () будем указывать именно тот компонент PictureBox, для которого возникло событие MouseDown. В результате обработчик будет иметь следующий вид:
private void picture1_MouseDown(object sender, MouseEventArgs e)
{
DoDragDrop((PictureBox)sender, DragDropEffects.Move);
}
Далее создадим обработчик события DragEnter для компонента picture1. Напомним, что это событие возникает, когда в процессе перетаскивания курсор мыши попадает в пределы объекта-приемника. В этом случае нам необходимо задать допустимую операцию перетаскивания – перемещение (Move).
private void picture1_DragEnter(object sender, DragEventArgs e)
{
e.Effect = DragDropEffects.Move;
}
Создадим обработчик события DragDrop, завершающего процесс перетаскивания. Здесь нам нужно поменять местами картинки в объекте-источнике и объекте-приемнике:
private void picture1_DragDrop(object sender, DragEventArgs e)
{
//объект-приемник
PictureBox receiver = (PictureBox)sender;
//объект-источник
PictureBox source =
(PictureBox)e.Data.GetData((typeof(PictureBox)));
//Temp - вспомогательная переменная для хранения изображения
Image Temp = receiver.Image;
//меняем картинки местами
receiver.Image = source.Image;
source.Image = Temp;
}
Обратите внимание, что объект-источник определяется с помощью метода GetData (), предоставляющего доступ к данным об объекте-источнике, которые мы запоминали при инициализации операции перетаскивания.
Для того чтобы описанные нами операции выполнялись для любого фрагмента паззла, необходимо в окне свойств на вкладке событий каждое из трех событий (MouseDown, DragEnter и DragDrop) для каждого из оставшихся 15 компонентов PictureBox связать с написанными нами обработчиками соответствующих событий. Для быстроты можно выделить все оставшиеся 15 компонентов (нажимая клавишу Ctrl), а потом связывать нужные события (рис. 13.3).
