VisualC_Studio_1 / Lab / lb_04
.htmКруглински Д Лабораторная работа № 4
Тема: Элементы управления: комбинированный список, графический список, полосы прокрутки, рисунок. Добавление кнопки в Панель инструментов. Наложение растрового изображения на управляющий элемент.
Создадим программу, которая рисует эллипс с заданными пользователем параметрами. Пользователь сможет выбрать из предлагаемого перечня способ заливки внутренности эллипса (сплошная, штриховая, пустая) и цвет заполнения. Пользователь также сможет выбрать из предлагаемых промежутков размеры каждой из полуосей эллипса (в пикселях). Задача аналогична предыдущей, но решать её мы будем с использованием новых для Вас средств.
Создаем новый проект с помощью редактора AppWizard
1. Создайте новый проект с именем MyPr04:
File > New > Project.
В качестве типа проекта Project types выберите MFC, в качестве Templates – MFC Application, укажите в разделе Location (Местоположение) свой директорий, заполните имя проекта Name: MyPr04 и щелкните ОК.
Затем
перелистните первую страницу, выбрав кнопку Next;
на странице Application type выберите Single document (однооконное приложение) и нажмите кнопку Finish.
Так как на странице Generated Classes для класса с именем CMyPr04View мы не изменили базовый класс, AppWizard в качестве базового класса по умолчанию выбрал CView.
В свойствах проекта смените кодировку (см. лабораторную работу № 1).
Создаем диалоговое окно
1. Чтобы создать новый диалоговый ресурс, перейдите на вкладку Resource View, щёлкните правой кнопкой мыши строку Dialog и в открывшемся контекстном меню выберите команду Add Resource. Перед Вами открылось одноимённое окно. Выберите в нём пункт Dialog и щёлкните кнопку New.
Удалите кнопку Cancel. Кнопку OK передвиньте в нижний правый угол.
2. Чтобы Вам было удобнее работать с редактором диалога, можете, как описано в лабораторной работе № 2, растянуть окно диалога и включить режим сетки (кнопка Toggle Grid вверху на диалоговой панели инструментов).
3. В окне свойств диалогового окна (правая кнопка мыши) смените его заголовок (параметр Caption) с Dialog на «Выберите характеристики эллипса».
4. С помощью палитры элементов управления ToolBox (если палитра не видна, её можно открыть, воспользовавшись пунктом View Главного меню) разместите на диалоговом окне элементы управления.
4.1. Перетащите мышью с палитры в верхний правый угол диалогового окна комбинированный список:
.
В окне свойств комбинированного списка (напоминаю, чтобы открыть окно свойств, надо выделить элемент, щелкнуть правой кнопкой мыши и выбрать в контекстном меню Properties)
· переименуйте идентификатор IDC_COMBO1 в IDC_FILL,
· в поле Data введите три записи, отделяя одну запись от другой знаком «;»:
нет заливки; штриховка; сплошная заливка
· замените параметр Type (Тип) списка на Drop List, а также отмените режим сортировки, положив параметр Sort (Сортировать) равным False.
Обратите внимание, что введенный текст в окне самого комбинированного списка не появился. Так и должно быть. Он появится, когда Вы запустите программу на выполнение.
Таким образом, режим заполнения эллипса «нет заливки» имеет в нашем списке номер 0, режим «штриховка» - номер 1, режим «сплошная заливка» - номер 2.
4.2. Под комбинированным списком поместите графический список:
.
В окне свойств графического списка
· переименуйте идентификатор IDC_LIST1 в IDC_LIST_COLOR,
· свойство Single selection положите равным True, разрешая выделять только один элемент списка.
4.3. У левого края диалогового окна расположите вертикальную полосу прокрутки:
.
В её свойствах переименуйте идентификатор IDC_SCROLLBAR1 в IDC_SCROLLBAR_V. Чтобы в дальнейшем можно было передвигать ползунок прокрутки не только мышью, но и клавишами (стрелки вверх-вниз), значение свойства Tabstop измените на True.
4.4. Горизонтальную полосу прокрутки:
поместите в верхней части окна, слева. В её свойствах переименуйте идентификатор IDC_SCROLLBAR2 в IDC_SCROLLBAR_H. Чтобы в дальнейшем можно было передвигать ползунок прокрутки не только мышью, но и клавишами (стрелки влево-вправо), значение свойства Tabstop измените на True.
4.5. Управляющий элемент рисунок:
расположите наверху слева, под горизонтальной полосой прокрутки. В свойствах рисунка переименуйте его идентификатор в IDC_PICTURE, а также замените тип Type картинки c Frame на Bitmap.
4.6. Добавьте на каждую полосу прокрутки по три статических текста; два из них будут сообщать пользователю о границах изменения значений полосы, а третий будет показывать текущее значение. Пусть горизонтальная ось эллипса может изменяться в пределах от 10 до 150 пикселей, а вертикальная - от 10 до 100 пикселей.
У Вас должно получиться примерно следующее:
Откройте окно свойств статического поля Static, расположенного над горизонтальной полосой прокрутки (на рисунке оно выделено синим прямоугольником). Переименуйте идентификатор этого поля в IDC_STATIC_H. Аналогично, идентификатор статического поля Static, расположенного слева от вертикальной полосы прокрутки, переименуйте в IDC_STATIC_V.
5. Сохраните файл ресурсов MyPr04.rc на диске: ResourceView > Dialog > правой кнопкой мыши щелкнуть IDD_DIALOG1 и выбрать в контекстном меню Save MyPr04.rc.
Создаем новый класс «диалоговое окно» и добавляем переменные
Щёлкните правой кнопкой мыши в любом месте диалогового окна и в открывшемся контекстном меню выберите команду: Add Class.
Перед Вами открылось окно MFC Class Wizard. В поле Class name этого окна введите имя нового класса: CMyPr04Dialog. В списке Base class в качестве базового уже указан нужный нам класс CDialog, в списке Dialog ID также указан нужный идентификатор IDD_DIALOG1. Нажмите Finish, закрывая окно.
Свяжем переменные с нашими элементами управления.
Перейдите на вкладку Class View окна проектов и раскройте список MyPr04 classes. Щелкните правой кнопкой мыши CMyPr03Dialog и в открывшемся контекстном меню выберите Add > Add Variable.
В результате перед Вами появилось одноименное окно.
Поставьте «галочку» слева от Control variable, объявив тем самым, что переменная связана с управляющим элементом.
В списке Control ID выберите идентификатор управления IDC_PICTURE.
В качестве имени переменной Variable name введите m_bPicture. Ничего больше не меняя, нажмите Finish.
Добавьте остальные переменные (см. таблицу).
Идентификатор
Тип переменной
Имя переменной
IDC_FILL
int
m_nFill
IDC_SCROLLBAR_H
int
m_nA
IDC_ SCROLLBAR_V
int
m_nB
Добавление кнопки на Панель инструментов
В грамотно написанной программе основные команды Главного меню, как правило, дублируются кнопками Панели инструментов (Toolbar). Добавлять новые пункты в Главное меню Вы уже умеете. На этот раз заставим наше приложение открывать окно диалога не только с помощью команды Главного меню, но и с помощью кнопки, расположенной на Панели инструментов.
1. Добавьте в раздел Implementation файла MyPr04View.h объявление переменных, в которые мы перегрузим данные из диалогового окна:
private:
int EllipseA, EllipseB, EllipseFill, EllipseColor;
2, 3. Добросовестно отработайте пункты 2 и 3 раздела «Добавление команды в Главное меню» предыдущей лабораторной работы.
4. Для нового пункта меню создадим обработчик сообщения COMMAND.
Щёлкните правой кнопкой мыши ячейку Input Data и в открывшемся контекстном меню выберите команду Add Event Handler (Добавить Событие).
Перед Вами открылось окно Event Handler Wizard. В списке Class List выберите класс CMyPr04View. Убедитесь, что в списке Message type указано сообщение COMMAND и нажмите кнопку Add and Edit (Добавить и Редактировать).
В текст функции OnInputdata добавьте код:
CMyPr04Dialog dlg; // Объявляем переменную dlg класса CMyPr04Dialog
dlg.DoModal(); // Открыть модальное диалоговое окно
// Перегрузить данные из диалогового окна в переменные класса CMyPr04View
EllipseA = dlg.m_nA;
EllipseB = dlg.m_nB;
EllipseFill = dlg.m_nFill;
5. Добавьте в файл MyPr04View.cpp оператор include:
#include “MyPr04Dialog.h”
и сохраните файл MyPr04View.cpp.
6. Редактируем ресурс растрового изображения. Выполните цепочку команд:
вкладка ResourceView окна проектов > список Toolbar > дважды щелкнуть левой кнопкой мыши IDR_MAINFRAME.
В открывшемся редакторе ресурсов левой кнопкой мыши щелкните последнюю в ряду кнопок пустую кнопку и нанесите на нее какое-нибудь изображение. Например, такое:
В окне свойств добавленной кнопки в поле идентификатора укажите тот же идентификатор ID_INPUTDATA, который имеет соответствующая команда Главного меню.
Обратите внимание, что в поле подсказки Prompt надо одну и ту же надпись, разделенную символом \n (новая строка), повторить дважды. Надпись слева от этого символа будет появляться в строке состояния, а надпись справа - во всплывающей подсказке, при наведении на кнопку курсора.
Закройте редактор ресурсов.
7. Сохраните файл ресурсов MyPr04.rc на диске.
8. Соберите и запустите Ваше приложение.
Внимание!!! Если новая кнопка на панели инструментов не появилась, то, скорее всего, по умолчанию к проекту подключается не Toolbar IDR_MAINFRAME, а Toolbar IDR_MAINFRAME_256.
Туда и надо скопировать Вашу новую кнопку.
Убедитесь, что при наведении мышью курсора на новую кнопку появляются обе подсказки (и всплывающая, и на панели состояния). Убедитесь также, что диалоговое окно открывается обоими способами - с помощью Главного меню и с помощью Панели инструментов.
Открыв диалоговое окно с помощью новой кнопки на Панели инструментов, Вы можете с грустью убедиться, что никакого рисунка на месте управляющего элемента Picture пока нет. Закройте приложение.
Наложение растрового изображения на управляющий элемент «рисунок»
Рассмотрим процедуру наложения растрового изображения на управляющий элемент. Напомню, что мы уже связали с управляющим элементом Picture переменную m_bPicture.
1. Готовую картинку с изображением эллипса загрузим из файла: VisualC_Part01\FilesForStud\ Ellipse.bmp.
Скопируйте этот файл в свою папку MyPr04.
Перейдите на вкладку Resource View, щёлкните правой кнопкой мыши в любом месте этой вкладки и в открывшемся контекстном меню выберите команду Add Resource.
Перед Вами открылось одноимённое окно. Выберите в нём пункт Bitmap (Рисунок) и щёлкните кнопку Import, после чего выберите файл Ellipse.bmp.
2. Не закрывая картинку, выполните цепочку команд: вкладка ResourceView > Bitmap > щелкнуть правой кнопкой мыши IDB_BITMAP1, выбрать Properties и переименовать идентификатор в IDB_ELLIPSE. Закройте окно свойств и картинку.
3. Сохраните файл ресурсов на диске.
4. Добавьте в файл MyPr04Dialog.h объявление закрытой переменной:
private:
CBitmap m_bEllipse;
5. Добавьте функцию инициализации OnInitDialog: вкладка Class View > класс CMyPr04Dialog > окно свойств (правая кнопка мыши) > кнопка Overrides > OnInitDialog.
Перед оператором return вставьте в текст функции OnInitDialog следующий код:
// Загрузить в переменную m_bEllipse рисунок с идентификатором IDB_ELLIPSE
m_bEllipse.LoadBitmap(IDB_ELLIPSE);
// На основе этого рисунка создать структуру hBitmap типа HBITMAP
HBITMAP hBitmap=(HBITMAP) m_bEllipse.GetSafeHandle();
// К элементу управления «Рисунок» присоединить структуру hBitmap
m_bPicture.SetBitmap(hBitmap);
6. Соберите и запустите Ваше приложение. Открыв диалоговое окно, Вы можете полюбоваться рисунком эллипса на желтом фоне.
Перетяните мышью тумблер одной из полос прокрутки в новое положение. Обратите внимание, что после того, как Вы «отпустите» мышь, тумблер возвращается в исходное крайнее положение. Закройте диалоговое окно и приложение.
Подключение элементов управления «полосы прокрутки»
Подключим сначала горизонтальную полосу прокрутки.
1. Напомню, что ранее с этим элементом управления мы связали переменную m_nA. Изменим ее начальное значение. Откройте файл MyPr04Dialog.cpp. В тексте конструктора CMyPr04Dialog найдите строку:
, m_nA(0)
Замените 0 на 100.
2. Включите в файл CMyPr04Dialog.h, в самое начало объявления класса, следующие строки:
// минимальное и максимальное значения для горизонтальной полосы прокрутки
enum {nMin_H=10};
enum {nMax_H=150};
3. Перед оператором return вставьте в текст функции OnInitDialog (файл CMyPr04Dialog.cpp) следующий код:
// Создаем переменную pSB_H, как указатель на элемент класса CScrollBar
// и связываем эту переменную с элементом управления,
// имеющим идентификатор IDC_SCROLLBAR_H
CScrollBar* pSB_H=(CScrollBar*)GetDlgItem(IDC_SCROLLBAR_H);
// Устанавливаем границы изменения значений горизонтальной полосы прокрутки
pSB_H->SetScrollRange(nMin_H, nMax_H);
// Устанавливаем начальное положение тумблера
pSB_H->SetScrollPos(m_nA);
// Объявляем строковую переменную strTextH
CString strTextH;
// В строковую переменную заносим значение, на которое указывает тумблер
strTextH.Format("%d", pSB_H->GetScrollPos());
// Выводим это значение в статическое поле с идентификатором IDC_STATIC_H
SetDlgItemText(IDC_STATIC_H, strTextH);
4. Создадим обработчик сообщения WM_HSCROLL, который
· «заставит» тумблер полосы прокрутки оставаться в новом положении,
· позволит обновить статический текст в соответствии с текущим положением тумблера.
Откройте вкладку Class View окна проектов. В списке классов выделите CMyPr04Dialog и откройте окно его свойств (правая кнопка мыши). В окне свойств перейдите на вкладку сообщений Message и выберите там сообщение WM_HSCROLL.
Замените текст функции OnHScroll на:
int nTemp1, nTemp2;
// Текущее положение тумблера считываем в переменную nTemp1
nTemp1=pScrollBar->GetScrollPos();
// Обрабатываем ситуацию в зависимости от того,
// какое действие изменило положение тумблера
switch(nSBCode) //
{
case SB_THUMBPOSITION: // передвинули тумблер мышью
// устанавливаем новое положение тумблера на отметку nPos
pScrollBar->SetScrollPos(nPos);
break;
case SB_LINELEFT: // передвинули тумблер кнопкой со стрелкой влево
nTemp2=(nMax_H-nMin_H)/50;
if ((nTemp1-nTemp2)>nMin_H)
// если не уперлись в левую границу, сдвигаемся влево
{ nTemp1-=nTemp2 ;}
else
{nTemp1=nMin_H;}
// устанавливаем новое положение тумблера на отметку nTemp1
pScrollBar->SetScrollPos(nTemp1);
break;