Создание приложения WindowsForms
Запускаем Visual Studio 2010, откроется Начальная страница:
Для начала, надо создать проект, для этого выполним последовательно: Файл ->Создать ->Проект… (также можно просто нажать сочетание клавиш Ctrl+Shift+N или пункт «Создать проект…» на Начальной странице):
Рис. 2. 1. Создание нового проекта
Выберем слева в пункте Установленные шаблоны язык VisualC#, далее найдём в списке Приложение WindowsForms. Также здесь можно выбрать какой использовать «фреймворк» (набора компонентов для написания программ). В нашем случае выберем .NET Framework 4.
Рис. 2. 2. Окно создания нового проекта
В поле Имя вводим LWP14SimpleRasterEditor— это название программы (выбрано по названию лабораторного практикума, номеру и названию работы). В поле Расположение указана конечная директория, где будет находиться весь проект. Выберем расположение удобное для быстрого поиска. В поле Имя решения вводится либо название программы «по умолчанию» из поля Имя автоматически, либо можно ввести своё собственное. Под этим именем будет создана конечная папка проекта (если Имя и Имя решения разные).
Рис. 2. 3. Вводим данные нового проекта приложенияWindowsForms
После нажатия клавиши ОК мы увидим сформированный проект и исходный код приложения WindowsForms (не пустого изначально).
Рис. 2. 4. Обозреватель решений: состав проекта приложения WindowsForms сформированного средой разработки
Теперь, можно откомпилировать созданную программу, нажав клавишу F5 (Отладка ->Начать отладкуили нажав на иконку 
. Тем самым мы запускаем приложение в режиме отладки (и производим компиляцию debug-версии программы) (Debug выбрано изначально).
Рис. 2. 5. Запуск приложения WindowsForms по конфигурации Debug
3. Модификация приложения WindowsForms: подготовка интерфейса редактора
Так как наша программа будет похожа на редактор изображений, нам необходимы все атрибуты такого редактора. У нас будет верхнее меню для навигации и нижняя строка состояния для отображения подсказок.
Для начала изменим размер нашей единственной формы. Для этого можно потянуть за уголок в нужном направлении на странице визуального представления формы1. Но также размер можно менять на панели свойств этой формы. Для этого нужно поменять значение размера в пикселях (высоту и ширину) в поле Size.
ПРИМЕЧАНИЕ № 1: Для перехода на визуальное представление формы, необходимо двойным нажатием в обозревателе решений нажать на значок формы ( 
) или выбрать вкладку на панели вкладок с именем <имя формы>.cs [Конструктор].
Задаём следующие параметры формы на панели Свойства:
| (Name) | изменим с Form1.cs2 на LWP14Main |
^ Поменяем внутреннее имя формы.
| Text | изменим с Form1 на Простой растровый редактор (C#) |
^ Поменяем заголовок формы (то что отображается в шапке приложения слева).
| Icon | изменим изображение (иконку) приложения |
^ Необходим файл значка *.ico.
| Size | изменим со значений 300; 300 на 800; 600 |
^Поменяем размер формы.
ПРИМЕЧАНИЕ № 2: Для того, чтобы поменять имя файла нашей формы, необходимо выполнить следующее: выделить в обозревателе решений значок формы ( ) и нажать правую кнопку мыши, затем выбрать Переименовать. Ввести необходимое новое имя СОХРАНЯЯ расширение *.cs. После смены имени, автоматически поменяются имена проассоциированных непосредственно с формой файлов:
Размести на форме (перетаскиванием в любое место) три панели:
ToolStrip ( 
);
MenuStrip ( 
);
StatusStrip ( 
).
Все эти элементы расположены на панели инструментов в разделе Меню ипанели инструментов:
То, что должно получиться в итоге показано на рисунке ниже:
Рис. 3. 1. Модифицированная форма приложения и расстановка необходимых элементов управления
Теперь разместим главный элемент управления: PicureBox, растянув его до верхней и нижней панели. Проще всего это сделать не банальным расширениеммышкой, а изменим свойство Dockу элемента управления:
Рис. 3. 2. Свойства: элемент PictureBox, свойство Dock
Все свойства PictureBox:
| (Name): | PB_Bitmap |
| Dock: | Fill |
| BackColor: | White |
Рис. 3. 2. Свойства: элемент PictureBox, свойство BackColor
Теперь у нас должно получиться нечто подобное:
Рис. 3. 3. Модифицированная форма приложения и расстановка необходимых элементов управления и PictureBox
На следующем рисунке показан окончательный вид на форму:
Рис. 3. 4. Модифицированная форма приложения и окончательная расстановка необходимых элементов управления и PictureBox
Теперь расставим все необходимые элементы (как рисунке выше). Начнём с главного меню (верхнего), за которое отвечает панель MenuStrip. Свойство панели не меняем, имя панели оставляем как есть: menuStrip1. Создаём три корневых меню: Файл, Рисование и Параметры. Для создания такого меню нужно выделить MenuStrip, затем нажать на появившуюся надпись «Вводить здесь» ( 
), после чего ввести текст:
После создания трёх корневых элементов меню, создаём вложенные меню аналогичным образом. Для создания разделителя (горизонтальной черты между элементами меню) необходимо сначала создать пустой элемент в качестве вложенного (разделителем не может быть корневой элемент меню). Текст можно вводить любой. Затем, после создания элемента, нажимаем правую кнопку мыши на том элементе меню, которое хотим сделать разделителем, далее Преобразовать в ->Separator.
Для перемещения разделителя, например, наверх списка элементов меню нужно выделить разделитель левой кнопкой мыши и не отпуская клавишу перетащить в нужном направлении:
Меню Файл выглядит так:
Три элемента-кнопки (MenuItem): Выбрать рисунок, Сохранить как... и Выход и два разделителя. Свойства:
MenuItem:
| (Name): | выбратьРисунокToolStripMenuItem |
| Text: | Выбрать рисунок |
| ToolTipText: | Выбрать рисунков для загрузки в рабочее поле |
Свойство (Name) оставлено без изменений. Имя было выбрано автоматически самой VisualStudio 2010.
MenuItem:
| (Name): | сохранитьКакРисунокToolStripMenuItem |
| Text: | Сохранить как... |
| ToolTipText: | Сохранить изображение в рабочем поле как... |
MenuItem:
| (Name): | выходКакРисунокToolStripMenuItem |
| Text: | Выход |
| ToolTipText: | Выйти из приложения |
Меню Рисование выглядит так:
В левом подменю четыре кнопки и один разделитель, в правом всего одна кнопка.
MenuItem:
| (Name): | очиститьToolStripMenuItem |
| Text: | Очистить |
| ToolTipText: | Очистить рабочее поле |
Как и раньше, свойство (Name) оставлено без изменений. Имя было выбрано автоматически.
MenuItem:
| (Name): | линияToolStripMenuItem |
| Text: | Линия |
| ToolTipText: | Режим рисования линии |
MenuItem:
| (Name): | прямоугольникToolStripMenuItem |
| Text: | Прямоугольник |
| ToolTipText: | Режим рисования прямоугольника |
MenuItem:
| (Name): | непрерывнаяToolStripMenuItem |
| Text: | Непрерывная |
| ToolTipText: | Режим непрерывной линии |
Меню Параметры выглядит так:
Две кнопки, разделитель и текстовое поле(TextBox):
MenuItem:
| (Name): | цветПераToolStripMenuItem |
| Text: | Цвет пера |
| ToolTipText: | Установить цвет пера для линий и границ фигур |
MenuItem:
| (Name): | цветЗаливкиToolStripMenuItem |
| Text: | Цвет заливки |
| ToolTipText: | Установить цвет заливки фигур |
MenuItem:
| (Name): | толщинаПераToolStripMenuItem |
| Text: | Толщина пера |
| ToolTipText: | Введите значение толщины пера (по умолчанию: 1) |
Перейдём к нижнему меню (ToolStrip). Здесь всё просто. Все кнопки этого меню по функциям будут повторять кнопки верхнего меню. А точнее нажатие на кнопку нижнего меню, будет приводить к нажатию кнопки верхнего меню. Мы добавим нижнее меню просто для наглядности.
Для добавления элемента в меню ToolStripнужно выделить это меню и далее в специальном выдающем списке выбрать нужны элемент для добавления:
Меню выглядит так:
Шесть кнопок с изображениями (Button), трикнопки без изображений и четыре вертикальных разделителя (Separator).
При создании кнопки в ToolStrip ей автоматически присваивается изображение ( 
). Изображение можно поменять, импортировав его в проект, либо создав собственное изображение при помощи встроенного в VisualStudio 2010 редактора изображений. Так как работа с созданием иконок и изображений во встроенном редакторе уже была рассмотрена в предыдущих лабораторных работах, теперь можно первым путём и импортировать изображения. Пусть это будут изображения для кнопок Сохранить как..., Выход, Очистить, Цвет пера и Цвет заливки:
На панелиToolStripсоздаём кнопку Сохранить как... (вторая на панели) со следующими свойствами:
Button:
| (Name): | сохранитьКакToolStripButton |
| Text: | Сохранить как... |
| ToolTipText: | Сохранить как... |
| DisplayStyle: | Image |
Теперь ищем свойство Imageи жмём справа от свойства на троеточие ( 
). Откроется окно Выбор ресурса:
Рис. 3. 5. Выбор ресурса: окно выбора файла ресурсаизображения для кнопки в ToolStrip
На рисунке выше все ресурсы уже импортированы. Для импорта жмём на соответствующую кнопку (если нужно чтобы импортируемое изображение осталось в проекте в качестве отдельного файла, должно быть выбрано Файл ресурсов проекта). Далее выбираем нужный нам файл с изображением и жмём Открыть, изображение будет отображено в окне Выбор ресурса. Жмём ОК. Кнопка теперь с иконкой.
Все добавленные ресурсы можно посмотреть, открыв файл Resources.resxв обозревателе решений:
В нашем случае этот файл выглядит так:
Рис. 3. 6. Resources.resx: все ресурсы проекта импортированные извне
В этом же окне можно работать с этими ресурсами (добавлять новые, удалять и редактировать).
Рис. 3. 7. Resources.resx: меню Добавить ресурс
Двойной клик по ресурсу изображения откроет встроенный редактор изображений.
Свойства всех кнопок этого меню:
Button:
| (Name): | выбратьРисунокToolStripButton |
| Text: | Выбрать рисунок |
| ToolTipText: | Выбрать рисунок |
| DisplayStyle: | Image |
Button:
| (Name): | выходToolStripButton |
| Text: | Выход |
| ToolTipText: | Выход |
| DisplayStyle: | Image |
Button:
| (Name): | очиститьToolStripButton |
| Text: | Очистить |
| ToolTipText: | Очистить |
| DisplayStyle: | Image |
Button:
| (Name): | линияToolStripButton |
| Text: | Л |
| ToolTipText: | Выход |
| DisplayStyle: | Text |
Button:
| (Name): | прямоугольникToolStripButton |
| Text: | П |
| ToolTipText: | Прямоугольник |
| DisplayStyle: | Text |
Button:
| (Name): | окружностьToolStripButton |
| Text: | О |
| ToolTipText: | Окружность |
| DisplayStyle: | Text |
Button:
| (Name): | цветПераToolStripButton |
| Text: | Цвет пера |
| ToolTipText: | Цвет пера |
| DisplayStyle: | Image |
Button:
| (Name): | цветЗаливкиToolStripButton |
| Text: | Цвет заливки |
| ToolTipText: | Цвет заливки |
| DisplayStyle: | Image |
Строка состояния StatusStripбудет содержать всего один элемент из возможных:
Один StatusLabel со следующими свойствами:
StatusLabel:
| (Name): | StatusLabel |
| Text: | Приложение готово к работе |