Создание решения, приложения WindowsForms и библиотеки классов
Запускаем Visual Studio 2010, откроется Начальная страница:
Для начала, надо создать решение, для этого выполним последовательно: Файл ->Создать ->Проект… (также можно просто нажать сочетание клавиш Ctrl+Shift+N или пункт «Создать проект…» на Начальной странице):
Выберем слева в пункте Установленные шаблоныподпункт Другие типы проектов и далее Решения VisualStudio, далее найдём в списке Новое решение. В поле Имя вводим LWP15. Так будет назваться общая директория под два будущих проекта.
Рис. 2. 1. Создание нового проекта (пустого решения)
Жмём ОК. Теперь у нас есть пустое решение:
Заполним его первым проектом. Выполним последовательно Файл ->Создать ->Проект… (также можно просто нажать сочетание клавиш Ctrl+Shift+N).
В открывшемся окне выберем слева в пункте Установленные шаблоны язык VisualC#, далее найдём в списке Приложение WindowsForms. Также здесь можно выбрать какой использовать «фреймворк» (набора компонентов для написания программ). В нашем случае выберем .NET Framework 4.
Рис. 2. 2. Окно создания нового проекта (проекта приложенияWindowsForms)
В поле Имя вводим LWP15Draw— это название программы (выбрано по названию лабораторного практикума, номеру и названию работы). В поле Расположение указана конечная директория, где будет находиться весь проект. Выберем расположение удобное для быстрого поиска. В поле решение выбираем из списка Добавить в решение, таким образом объединяя решение и проект.При этом поменяется строка в пункте Расположение (добавится путь к директории решения). В поле Имя решения вводится либо название программы «по умолчанию» из поля Имя автоматически, либо можно ввести своё собственное. Под этим именем будет создана конечная папка проекта (если Имя и Имя решения разные).
Рис. 2. 3. Вводим данные нового проекта приложенияWindowsForms
После нажатия клавиши ОК мы увидим сформированный проект и исходный код приложения WindowsForms (не пустого изначально).
И наконец, нужно создать последний проект в решении. Им станет проект типа Библиотека классов с именем LWP15Tools (рис. 2. 4).
Рис. 2. 4. Вводим данные нового проекта библиотеки классов
Рис. 2. 5. Обозреватель решений: состав итогового решения сформированного средой разработки
Выберем также, какой проект считать главным и запускать в режиме отладки. В обозревателе решений нажмём на имя решения ( 
). Перейдём вниз на панель Свойства. Параметр для пункта Запускаемый проект ставим LWP15Draw.
Теперь, можно откомпилировать созданную программу, нажав клавишу F5 (Отладка ->Начать отладкуили нажав на иконку 
. Тем самым мы запускаем приложение в режиме отладки (и производим компиляцию debug-версии программы) (Debug выбрано изначально).
Рис. 2. 5. Запуск приложения WindowsForms по конфигурации Debug(и компиляция всего решения)
3. Модификация приложения WindowsForms: подготовка интерфейса редактора и добавление файлов ресурсов
Так как наша программа будет похожа на редактор изображений, нам необходимы все атрибуты такого редактора. У нас будет верхнее меню для навигации и нижняя строка состояния для отображения подсказок.
Для начала изменим размер нашей единственной формы проекта LWP15Draw. Для этого можно потянуть за уголок в нужном направлении на странице визуального представления формы1. Но также размер можно менять на панели свойств этой формы. Для этого нужно поменять значение размера в пикселях (высоту и ширину) в поле Size.
ПРИМЕЧАНИЕ № 1: Для перехода на визуальное представление формы, необходимо двойным нажатием в обозревателе решений нажать на значок формы ( 
) или выбрать вкладку на панели вкладок с именем <имя формы>.cs [Конструктор].
Задаём следующие параметры формы на панели Свойства:
| (Name) | изменим с Form1.cs2 на LWP15Main |
^ Поменяем внутреннее имя формы.
| Text | изменим с Form1 на Векторный графический редактор (C#) |
^ Поменяем заголовок формы (то что отображается в шапке приложения слева).
| Icon | изменим изображение (иконку) приложения |
^ Необходим файл значка *.ico.
| Size | изменим со значений 300; 300 на 640; 480 |
^Поменяем размер формы.
ПРИМЕЧАНИЕ № 2: Для того, чтобы поменять имя файла нашей формы, необходимо выполнить следующее: выделить в обозревателе решений значок формы ( ) и нажать правую кнопку мыши, затем выбрать Переименовать. Ввести необходимое новое имя, СОХРАНЯЯ расширение *.cs. После смены имени, автоматически поменяются имена проассоциированных непосредственно с формой файлов:
Размести на форме (перетаскиванием в любое место) три панели:
ToolStrip ( 
);
MenuStrip ( 
);
StatusStrip ( 
).
Все эти элементы расположены на панели инструментов в разделе Меню ипанели инструментов:
То, что должно получиться в итоге, показано на рисунке ниже:
Рис. 3. 1. Модифицированная форма приложения и расстановка необходимых элементов управления
Главным элементом рисования будет пользовательский элемент управления. Нужно его создать. Выполним последовательно: Проект ->Добавить пользовательский элемент управления...: откроется окно «Добавление нового элемента – LWP15». Нужный элемент для добавления будет уже выбран. Впишем только строчку в поле Имя: DrawArea.cs. Жмём ОК.
Рис. 3. 2. Добавление нового элемента – LWP15Draw:Пользовательский элемент управления
Перейдём к свойствам элемента (одинарное нажатие на DrawArea.csв обозревателе решений). Изменим свойство BackColorна значение White. Получим следующее:
DrawArea.cs:
| (Name): | DrawArea |
| BackColor: | White |
Наше поле для рисования готово. Добавим его на форму позже. А пока, нам необходимы файлы ресурсов. Ими станут файлы изображений для курсора и панели инструментов.
Начнём с изображений для курсора. Курсоров будет пять. Для создания курсора выполним: Проект ->Добавить новый элемент... (Ctrl+Shift+A). В открывшемся окне ищем Файл курсора.
Рис. 3. 3. Добавление нового элемента –LWP15Draw: Файл курсора
Первый курсор для рисования линий. Имя: C_Line.cur. Вписываем это имя и жмём Добавить. Откроется редактор курсоров. Рисуем нечто подобное:
Второй курсор для рисования эллипсов. Имя: C_Ellipse.cur. Рисуем нечто подобное:
Третий курсор для рисования прямоугольников. Имя: C_Rectangle.cur. Рисуем нечто подобное:
Четвёртый курсор для рисования карандашом. Имя: C_Pencil.cur. Рисуем нечто подобное:
Последний курсор для рисования перетаскивания нарисованного карандашом. Имя: C_PolyHandle.cur. Рисуем нечто подобное:
ПРИМЕЧАНИЕ № 3: Очень важно для каждого добавленного курсора (для файла курсора *.curв обозревателе решений ИЗМЕНИТЬ свойство Действие по построениюна значение Внедрённый ресурс. Если этого не сделать, могут возникнуть ситуация при которой приложение будет компилироваться, но работать некорректно (будет отсутствовать функциональность рисования).
Рис. 3. 4. Изменение свойства «Действие по построению» для файла курсора (C_Ellipse.cur)
Остались иконки для панели инструментов. Создаём кнопку и сразу же применяем на кнопки иконку и меняем свойства. Для создания кнопки на панели инструментов, нажимаем на toolStrip1, далее на правую кнопку мыши и жмём Вставить стандартные элементы:
Получим следующее:
Снова выделим toolStrip1 и нажмём ПКМ, затем выберем Правка элементов...:
Рис. 3. 5. Редактор коллекции элементов для toolStrip1
Удаляем кнопки печать..., вырезать..., копировать... и вставка... (выделяем элементов слева и жмём крестик ):
Добавляем ещё один разделитель (Separator) и перемещаем его стрелкой вверх на позицию под toolSeparator1:
Добавляем первую кнопку Button(Выделение)под первый разделитель (toolStripSeparator) на панель со следующими свойствами:
| (Name): | выделениеToolStripButton |
| Text: | &Выделение |
| ToolTipText: | Выделение |
| Image | Импортируем иконку  |
Для вставки изображения, выделяем свойство Imageи жмём «...» справа в поле значения:
В открывшемся окне Выбор ресурса, жмём Импорт (Локальный ресурс) и выбираем файл Pointer.pngиз архива Icons.zip (архив можнозагрузитьпо ссылке в конце этого материала (сслыка доступна в программном продукте)). Также, изображение для иконки можно создать в самой среде разработки (открываем Resources.resxв директории Propertiesпроекта LWP15Draw, далее Добавить ресурс ->Создать изображение ->Изображение PNG...).
Добавляем вторую кнопку Button(Карандаш)под первую кнопку на панель со следующими свойствами:
| (Name): | карандашToolStripButton |
| Text: | &Карандаш |
| ToolTipText: | Карандаш |
| Image: | Импортируем иконку  |
Добавляем третью кнопку Button(Линия)под вторую кнопку на панель со следующими свойствами:
| (Name): | линияToolStripButton |
| Text: | &Линия |
| ToolTipText: | Линия |
| Image: | Импортируем иконку  |
Добавляем четвёртую кнопку Button(Эллипс)под предыдущую кнопку на панель со следующими свойствами:
| (Name): | эллипсToolStripButton |
| Text: | &Эллипс |
| ToolTipText: | Эллипс |
| Image: | Импортируем иконку  |
Добавляем пятую кнопку Button(Прямоугольник)под предыдущую кнопку на панель со следующими свойствами:
| (Name): | прямоугольникToolStripButton |
| Text: | &Прямоугольник |
| ToolTipText: | Прямоугольник |
| Image: | Импортируем иконку  |
После разделителя добавим ещё две кнопки. Отменить и Вернуть.
| (Name): | отменитьToolStripButton |
| Text: | &Отменить |
| ToolTipText: | Отменить |
| Image: | Импортируем иконку  |
| (Name): | вернутьToolStripButton |
| Text: | В&ернуть |
| ToolTipText: | Вернуть |
| Image: | Импортируем иконку  |
Итог:
Строка меню (menuStrip1), будет содержать те же команды плюс некоторые новые. Поступаем точно также как и с панелью инструментов. Вначале добавляем на панель стандартные элементы (menuStrip1 ->ПКМ ->Вставить стандартные элементы):
Переименуем через свойства меню Сервис в Рисование (выделим элемент меню и перейдём на свойства элемента):
| (Name): | рисованиеToolStripMenuItem |
| Text: | Р&исование |
Для меню Файл итоговые элементы такие:
Удаляем лишние элементы (Печать и Предварительный просмотр) и добавляем новые (Последние файлыи ещё одинSeparator).Редактирование меню можно упросить следующим образом. Выделяем левой кнопкой мыши пункт Файл ->ПКМ ->Правка DropDownItems...:
Рис. 3. 6. Редактируем меню Файлдля menuStrip1
Для меню Правка итоговые элементы такие:
Для меню Рисование итоговые элементы такие:
Иконки добавляются для элемента меню через свойство Image. Импортируем соответствующие иконки для соответствующего пункта меню.
Для меню Справка итоговые элементы такие:
Добавим две формы. Первая форма станет диалоговым окном, вызываемым по кнопке О программе меню Справка. Выполняем Проект ->Добавить форму Windows..., Имя указываем как LWP15About. Жмём Добавить. Меняем свойства формы:
Рис. 3. 7. Добавление нового элемента –LWP15Draw: Форма WindowsForms
| (Name) | Должно быть LWP15About |
^ Поменяем внутреннее имя формы.
| Text | изменим с LWP15About на Векторный графический редактор (C#) :: О программе |
^ Поменяем заголовок формы (то что отображается в шапке приложения слева).
| MaximizeBox | изменим с True на False |
^ Уберём кнопку Развернуть.
| MinimizeBox | изменим с True на False |
^ Уберём кнопку Свернуть.
| Icon | изменим изображение (иконку) приложения |
^ Необходим файл значка *.ico.
| Size | изменим со значений 300; 300 на 400; 150 |
^Поменяем размер формы.
| FormBorderStyle | изменим с Sizable на FixedDialog |
^ Сделаем окно «неизменяем» по размерам.
| StartPosition | изменимсWindowsDefaultLocationнаCenterScreen |
^ Определим первоначальное положение формы при вызове.
Размести на форме одну кнопку Button и один Labelсо следующими свойствами:
Button:
| (Name): | B_OK |
| Text: | Закрыть |
Label:
| (Name): | L_About |
| Text: | О программе |
| AutoSize: | False |
| Size: | 250; 65 |
Вернёмся к свойствам формы и изменим свойство AcceptButtonна B_OK:
В итоге получим следующую форму:
Рис. 3. 8. Форма LWP15About
Вторая форма и последняя форма, которую необходимо добавить, будет выполнять функции диалога выбора параметров рисования. Имя формы: LWP15Properties. Свойства следующие:
| (Name) | Должно быть LWP15Properties |
^ Поменяем внутреннее имя формы.
| Text | изменим с LWP15About на Векторный графический редактор (C#) :: Параметры |
^ Поменяем заголовок формы (то что отображается в шапке приложения слева).
| MaximizeBox | изменим с True на False |
^ Уберём кнопку Развернуть.
| MinimizeBox | изменим с True на False |
^ Уберём кнопку Свернуть.
| Icon | изменим изображение (иконку) приложения |
^ Необходим файл значка *.ico.
| Size | изменим со значений 300; 300 на 385; 135 |
^Поменяем размер формы.
| FormBorderStyle | изменим с Sizable на FixedDialog |
^ Сделаем окно «неизменяем» по размерам.
| StartPosition | изменимсWindowsDefaultLocationнаCenterScreen |
^ Определим первоначальное положение формы при вызове.
Рис. 3. 9. Форма LWP15Properties
Расставим элементы:
Button:
| (Name): | B_OK |
| Text: | Применить |
Button:
| (Name): | B_Cancel |
| Text: | Отменить |
Button:
| (Name): | B_SelectColor |
| Text: | ... |
| TextAlign: | MiddleCenter |
Label:
| (Name): | label1 |
| Text: | Текущий цвет: |
Label:
| (Name): | label2 |
| Text: | Толщина пера: |
ComboBox:
| (Name): | CB_PenWodth |
| DropDownStyle: | DropDownList |
Label:
| (Name): | L_Color |
| BorderStyle: | Fixed3D |
| TextAlign: | MiddleCenter |
| Text: |
Label:
| (Name): | L_PenWidth |
| BorderStyle: | Fixed3D |
| TextAlign: | MiddleCenter |
| Text: |
Вернёмся к свойствам формы и изменим свойство AcceptButtonна B_OK и CancelButtonна B_Cancel.
Наконец создаём обычный StatusLabelв строке состояния главной формы LW15Main:
StatusLabel:
| (Name): | toolStripStatusLabel |
| Text: | Строка состояния |
Приготовления завершены.
Окончательный вид приложения должен быть таким:
Рис. 3. 10. Модифицированная форма приложения и расстановка необходимых элементов управления