Элемент управления PictureBox

PictureBox — это класс, производный от Control, поэтому можно использовать множество событий, всплывающую подсказку, контекстное меню и прочие возможности элемента управления. Проиллюстрируем применение PictureBox на примере.

Создадим приложение, которое будет захватывать события MouseUp, MouseDown и MouseMove для области, занятой на форме изображением (которое помещено в PictureBox). Добавим код для работы с перетаскиванием (drag-and-drop). Пользователь сможет перетаскивать одно из изображений по всей форме. Кроме того, будем осуществлять проверку того, где оказалось перетаскиваемое изображение после того, как пользователь его отпустит. Если оно попало в область, занимаемую заданным прямоугольником, будет выводиться специальное сообщение. Таким образом, реализуем механизм, называемый «проверкой попадания» — hit testing.

Назначение объекту PictureBox изображения, которое будет в нем содержаться, выглядит следующим образом:

Свойство PictureBox, —SizeMode, для него используются значения из перечисления PictureBoxSizeMode. Это свойство позволяет определить, как именно будет выводиться изображение внутри PictureBox. В нашем случае было использовано значение StretchImage, которое означает, что изображение должно быть сжато или растянуто таким образом, чтобы полностью соответствовать размерам PictureBoх. Другие возможные значения представлены в таблице 5.8.

Таблица 5.8. Значения перечисления PictureBoxSizeMode

Значение	Описание
AutoSize	Значения PictureBox будут изменены таким образом, чтобы полностью соответствовать размерам изображения
CenterImage	Если размеры PictureBox будут больше, чем размеры изображения, изображение будет позиционировано точно по центру PictureBox, Если же размеры изображения будут превышать размеры PictureBox, то выступающие края будут обрезаны
Normal	Изображение будет расположено в верхнем левом углу PictureBox. Если размеры изображения превысят размеры PictureBox, выступающие края будут обрезаны

Выберите Choose Image для выбора изображения для отображения в PictureBox.

После того как создали PictureBox и настроили его свойства, следующая задача — обеспечить обработчики для событий MouseMove, MouseUp и MouseDown.

// Добавляем обработчики для следующих событий

pictureBox1.MouseDown +=new MouseEventHandler(pictureBox1_MouseDown);

pictureBox1.MouseUp +=new MouseEventHandler(pictureBox1_MouseUp);

pictureBox1.MouseMove +=new MouseEventHandler(pictureBox1_MouseMove);

this.Paint +=new PaintEventHandler(Form1_Paint);

В обработчике события MouseDown, во-первых, устанавливается значение true для переменной isDragging (началась операция перетаскивания), а во-вторых, фиксируются координаты указателя мыши при наступлении этого события:

// Обработчик события MouseDown для объекта PictureBox

private void pictureBox1_MouseDown(Object sender, MouseEventArgs e) {

isDragging = true;

oldX = e.X;

oldY = e.Y ;

}

Обработчик события MouseMove обеспечивает перемещение PictureBox по форме (изменяя значения свойств Тор и Left). Для расчета нового положения PictureBox используется смещение указателя мыши относительно исходной позиции:

Если пользователь производит щелчок на изображении и, не отпуская кнопку, перемещает мышь. PictureBox вместе с изображением будет перерисовываться в новой месте

private void pictureBox1_MouseMove(Object sender, MouseEventArgs e) {

if(isDragging) {

// Определяем новые координаты для PictureBox по разности между

// старым и новым положением указателя мыши

pictureBox1.Top =pictureBox1.Top + (e.Y - oldY);

pictureBox1.Left = pictureBox1.Left + (e.X - oldX);

}

}

Далее обработчик события MouseUp должен установить значение переменной isDragging равным false — это признак окончания операции перетаскивания. Кроме того, по условиям задачи должна производиться проверка: если перемещаемый PictureBox отпущен внутри определенной области формы (ограниченной размерами объекта Rectangle), то пользователь добился успеха.

Таким образом, весь оставшийся необходимый код выглядит следующим образом:

private void pictureBox1_MouseUp(Object sender, MouseEventArgs e) {

Rectangle dropRect = new Rectangle(200, 100, 350, 250);

isDragging = false;

if(dropRect.Contains(pictureBox1.Bounds))

MessageBox.Show("Вы победили!", "Проверка попадания");

}

private void Form1_Paint(Object sender, PaintEventArgs e) {

// Выводим "прямоугольник сбрасывания"

Graphics g = e.Graphics;

Rectangle dropRect = new Rectangle(200, 100, 350, 250);

g.FillRectangle(Brushes.Blue, dropRect);

g.DrawString("Перетащите картинку в эту область.", this.Font, Brushes.Red, 200, 100);

}

Не забудьте объявить переменные перед классом формы, например,

bool isDragging;

int oldX, oldY;

Главную роль в проверке попадания играет метод Rectangle.Contains( ). Этот метод перегружен и может принимать другой прямоугольник, точку или два значения типа int в качестве координат. Этот метод удобен в ситуации, когда необходимо проверить, попал ли пользователь щелчком мыши в прямоугольную область на форме или нет.

Рассмотрим следующую задачу: Если щелчок пришелся на какое-либо из изображений, заключить это изображение в красную рамку и изменить заголовок формы (это делается при помощи свойства Form.Text).

Первое, необходимо обеспечить перехват события MouseDown для самой формы. После этого осуществлять проверку — попадает или нет указатель мыши в область, занимаемую одним из изображений. Если ответ положительный, то значения двух переменных изменятся: переменной IsImageClicked (типа bool) будет присвоено значение true, а переменной imag (типа int) - значение, соответствующее номеру выбранного пользователем изображения. Пример кода может быть таким:

public class Form1 : Form {

private bool isImageclicked;

private int imag;

private Rectangle rectA;

private Rectangle rectB;

private Rectangle rectC;

public Form1() {

InitializeComponent();

rectA= new Rectangle(15, 15, 125, 75);

rectB = new Rectangle(15, 95, 125, 75);

rectC = new Rectangle(15, 175, 125, 75);

isImageclicked = false;

this .MouseDown+=new MouseEventHandler(Form1_MouseDown);

this.Paint +=new PaintEventHandler(Form1_Paint);

}

private void Form1_Paint(Object sender, PaintEventArgs e) {

Graphics g= e. Graphics;

Pen outline = new Pen(Color.Red, 5);

// Выводим все три изображения

g.FillRectangle(Brushes.Blue,20,20,120,70);

g.FillRectangle(Brushes.Aqua,20,100,120,70);

g.FillRectangle(Brushes.BlueViolet,20,180,120,70);

// Выводим рамку (по щелчку пользователя)

if(isImageclicked == true){

if (imag==0)

g.DrawRectangle(outline, rectA);

if (imag==1)

g.DrawRectangle(outline, rectB);

if (imag==2)

g.DrawRectangle(outline, rectC);

}

}

private void Form1_MouseDown(Object sender, MouseEventArgs e) {

// Получаем координаты указателя мыши в момент щелчка

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

// Проверяем, не попадает ли указатель мыши в одну из трех областей,

// занимаемых изображениями.

if (rectA.Contains(mousePt)) {

isImageclicked = true;

imag = 0;

this.Text = "Вы кликнули изображение A";

}

else {

if (rectB.Contains(mousePt)) {

isImageclicked = true;

imag = 1;

this.Text = " Вы кликнули изображение B";

}

else if (rectC.Contains(mousePt)) {

isImageclicked = true;

imag = 2;

this.Text = " Вы кликнули изображение C";

}

else {

isImageclicked = false;

this.Text = "Изображения";

}

}

// Перерисовываем форму

Invalidate();

}

В приложение добавлена еще одна проверка: для щелчка мыши, который не попадает ни в одно из трех изображений. Эта проверка нужна для удаления рамки с выбранного перед этим изображения.