Включение изображения в форму. Элемент Image, PictureBox

Тема урока: Включение изображения в форму. Элемент Image, PictureBox.

Цель: Организовать деятельность учащихся по изучению элемента Image, PictureBoxи закреплению ранее изученных тем с помощью кейс технологии:

1. Ввести основные свойства, события и методы рисунков;

2. Научиться работать с элементами Image, PictureBox;

3. Развивать умение писать процедуры с использованием данных объектов.

Тип урока: изучение нового материала.

Вид урока: урок-практикум.

Формы обучения: работа в мини-группах.

Оборудование урока: Кейс: теоретическая часть, дидактический материал к уроку(карточки для самостоятельной работы). ПК.

Структура урока:

1. Организация предварительного обсуждения кейса.

2. Деление группы на мини-группы (подгруппы).

3. Обсуждение кейса в подгруппах, разработка вариантов решение поставленных задач. Изучение теоретической части кейса.

4. Самостоятельная работа в подгруппах.

5. Оценивание работ учащихся. Подведение итогов. Рефлексия.

Ход урока.

1. Организация предварительного обсуждения кейса.

Учащиеся получают кейс и список рекомендуемой литературы. Учитель руководит обсуждением кейса в подгруппах, обеспечивает их дополнительными сведениями. Учащиеся задают вопросы, углубляющие понимания кейса и проблемы проекта.

Кейс:

Для графического оформления в форме можно использовать элементы управления Image иPictureBox.

Image - служит для размещения графического изображения в форме.

PictureBox - представляет собой окно с рисунком, используется и для размещения других объектов, а не только этого рисунка.

Свойство Borderstyle имеет различное значение по умолчанию:

Для элемента PictureBoxустанавливается значение 1 - FixedSingle, а для элемента Image -значение 0-None.

Элементы типа PictureBoxимеют свойство Autosize, позволяющие привести в соответствие размеры изображения и самого элемента управления. Для этого свойство должно иметь значениеTrue. По умолчанию принимается значение False.

Для обоих элементов Image и PictureBoxключевое значение имеет свойство Picture,которое позволяет задать графический файл, откуда и будет открыто изображение. Для выбора файла служит кнопка с троеточием, имеющаяся в окне Properties. По нажатию этой кнопки будет открыто стандартное окно для загрузки файла. Поддерживаются все основные форматы графических файлов, такие как BMP, GIF, JPG и др.

Основные свойства, события и методы рисунков (Image)

Название

описание

Name

Задает имя рисунка на форме (префикс Img)

Picture

Задает файл рисунка

Stretch

Задает размеры рисунка (False - размеры элемента подгоняются под размер изображения (по умолчанию), True - изображение масштабируется вместе с элементом)

Click

Один щелчок по строке списка выделяет его

DragDrop

Возникает, когда какой-то объект перетаскивают на рисунок

Drag

Устанавливает курсор мыши на рисунок и переводит его в режим перетаскивания

Move

Присваивает рисунку новые координаты относительно формы

Refresh

Перерисовывает рисунок, не учитывая результаты рисования и метода Print

Загрузка и сохранение изображения

Часто возникает ситуация, когда изображение для элемента управления .Image илиPictureBoxнеобходимо загрузить из файла, находящегося на диске. Этой цели служит функцияLoadPicture(). Формат ее вызова следующий:

Рисунок = LoadPicture(файл)

где

рисунок - переменная для хранения рисунка;

файл - строковая переменная, содержащая имя графического файла (или путь к нему)на диске.

Для сохранения содержимого элемента в указанном файле можно использовать операторSavePicture:

SavePicture рисунок, файл

где рисунок - свойство Pictureсоответствующего элемента, содержимое которого необходимо сохранить;

файл - строковая переменная, содержащая имя файла (или путь), в котором изображение будет сохранено.

4. Самостоятельная работа в подгруппах.

Проект 1. "Вся коллекция фотографий"

Создать новый проект.

1. В окне Свойств объекта установить для свойства формы Name значение frm1 и для свойства Captionзначение названия коллекции, например, "Астана".

2. Активизировать свойство Picture, щелкнуть по значку "…", в открывшемся окне выбрать нужный графический файл.

3. Разместить на форме кнопку и присвоить свойству Name значение Cmd1, а свойству Caption - значение Все.

4. Добавим в проект форму командой [Project --> Add Form].

5. Разместить на форму элемент управления Image и активизировать его.

6. В окне свойства объектов для свойства Stretch установить True, для свойства Picture выбрать нужный графический файл.

7. Активизировать форму и для свойства Caption ввести название картинки.

8. Пункты 5-8 повторять столько раз, сколько фотографий собираетесь поместить в проекте.

9. Дважды кликнуть по кнопке Все и записать программный код.

Кодпрограммы:

Private Sub Cmd1_Click()
Frm1.Visible = True
Form1.Visible = True
Form2.Visible = True
Form3.Visible = True
Form4.Visible = True
Form5.Visible = True
Form6.Visible = True
Form7.Visible = True
Form8.Visible = True
Form9.Visible = True
Form10.Visible = True
Form11.Visible = True
Form12.Visible = True
Form13.Visible = True
Form14.Visible = True
Form15.Visible = True
End Sub

10. Запустить проект на выполнение и щелкнуть по кнопке Все.
Откроются все изображения, поочередно закрываем каждое окно.
11. Сохранить проект меню Fail --> Make Project.exe и поместить его в коллекцию альбомов.

Проект 2. "Коллекция картин"

Все объекты, необходимые для создания приложения, внесем в таблицу и запишем информацию об используемых свойствах.

Код программы:

Private Sub Option1_Click(Index As Integer)
Image1.Visible = Index = 0
Image2.Visible = Index = 1
Image3.Visible = Index = 2
Image4.Visible = Index = 3
Image5.Visible = Index = 4
Image6.Visible = Index = 5
Image7.Visible = Index = 6
End Sub

Проект 3. «Фотоальбом» («Картинная галерея»)

Задание предполагает создание фотоальбома из 10 фотографий. Работает фотоальбом следующим образом: В списке справа указываются названия фотографий. При нажатии на фотографию в специальном контейнере слева появляется указанное изображение

Для создания Фотоальбома выполните следующие действия:

1. В своей папке С:\работы учеников\10\… создайте папку «Фотоальбом» и скопируйте туда 10 изображений (фотографий). Вы можете использовать папки С:\школа, С:\Живопись, С:\Рисунки, С:\Аксу.

2. В этой папке создайте проект VisualBasic. Для этого запустите VisualBasic, создайте новый проект, зайдите Файл - Сохранить проект как… .В появившемся окне выберите Вашу папку и сохраните в нее файл формы Form1 и файл проекта Project1.

3. Задайте следующие свойства форме

Name - Form1

Caption - Фотоальбом

BackColor - &H00FFFFFF& (белый)

BorderStyle - 3 - FixedDialog

4. Поместите на форму объект Image, задайте ему следующие свойтсва

- Name - Image1 Имя объекта.

- Stretch -True Размер изображения будет подгонятся под размер объекта Image

5. Поместите на форму объект Label под объект Image и задайте ему следующие свойства

- Name -label1

- Alignment - 2-Center

- BackColor - &H00FFFFFF& (белый)

- Font

Шрифт - MS San Serif

Начертание - жирный

Размер - 14

6. Поместите объект ListBox рядом с объектом Image и в его свойстве List задайте 10 наименований изображений. Name - List1.

7. Создайте событие List1_Click()- Выбор элемента списка. Для вывода изображений в процессе выполненbя программы будем пользоваться функцией LoadImage, загружающей картинку из файла, и присваивать значение свойству Picture объекта Image.

Например,

Image1.Picture = LoadPicture("dogs.jpg")

Выбор картинки предполагает вывод комментария в объект Label1.

Label1.Caption = "Мои любимые щенки"

Для перебора вариантов используется оператор Выбор-Если SelectCase

Выбор производится в зависимости от выбранного индекса элемента свойство ListIndex объектаList1

Select Case List1.ListIndex

Case 0

Image1.Picture = LoadPicture("\D:\Pictures\A240050.jpg ")

Label1.Caption = "Крокодил"

Case 1

…

Case 2

…

Case 10

…

…

End Select