Программирование / Заочники / 2 семестр / Методичка_ч3_Урок2
.pdf
Урок 2: MDI-приложения.
Основная цель урока.
1. .Познакомиться с MDI-приложениями.
2. .Научиться создавать меню с помощью элемента управления MainMenu.
3. .Научиться использовать элементы управления PictureBox, OpenFileDialog и
SaveFileDialog.
Краткая справка.
Термин MDI (Multiple Document Interface) дословно означает многодокументный интерфейс и описывает приложения, способные загрузить и использовать одновременно несколько документов или объектов. Примером такого приложения может служить диспетчер файлов (File Manager).
Обычно MDI-приложения состоят минимум из двух форм – родительской и дочерней. Родительская форма может содержать внутри себя произвольное количество дочерних форм. На рисунке 1 приведён пример MDI приложения.
Рисунок 1. MDI-приложение (Photoshop).
Термин SDI (Single Document Interface) дословно означает однодокументный интерфейс и описывает приложения, способные загрузить и использовать одновременно только один документ. Не существует « фонового» или
« родительского» окна, содержащего меню или панели инструментов, по отношению к активному — каждое окно несёт в себе эти элементы. Большинство программ имеют однодокументный интерфейс, яркие представители – программы MS Paint,
Notepad, Calc(Калькулятор).
На рисунке 2 приведён пример SDI приложения.
Рисунок 2. SDI-приложение (MS Paint).
Многодокументный интерфейс со вкладками (Tabbed Document Interface) —
разновидность графического интерфейса пользователя, в котором каждый документ отображается на отдельной вкладке общего окна. Интерфейс с вкладками – разновидность многодокументного интерфейса, когда дочерние окна располагаются на отдельных вкладках. Большинство интернет браузеров имеют такой интерфейс.
На рисунке 3 приведён пример интерфейса со вкладками.
Для реализации интерфейса с вкладками можно воспользоваться элементом управления TabControl (раздел Контейнеры).
Рисунок 3. MDI интерфейс со вкладками (Internet Explorer).
Учебное задание 2.1.
Создать простой многодокументный графический редактор, позволяющий
загружать рисунки и выполнять над ними некоторые простые операции.
Технология выполнения учебного задания 2.1.
Шаг 1. Создадим новый проект. Из основного меню выбираем Файл -> Создать ->
Проект. В появившимся диалоговом окне выбираем Приложение Windows Forms.
Шаг 2. В окне « Обозреватель решений» переименуйте форму Form1 в fMain. При появлении запроса «… переименовать все ссылки на эту часть кода…?» выбрать
« Да».
Шаг 3. Изменение свойств главной формы. Кликните на форму fMain и в окне свойств измените свойство Text формы на «Графический редактор».
Далее найдите свойство IsMdiContainer и установите это значение в True. Эта форма будет контейнером для дочерних MDI-форм.
Шаг 4. Добавим меню в основное окно приложения. Добавьте элемент управления
MainMenu (раздел « Меню и панели инструментов») из окна Панель элементов управления. После добавления меню в нижней части формы появится новый не визуальный элемент с именем menuStrip1. А для формы fMain появится возможность создавать меню (рисунок 4).
Рисунок 4. Создание меню.
Шаг 5. Создайте меню, как показано на рисунке 5. Обратите внимания, что в конце некоторых пунктов идёт троеточие. Это общепринятое обозначение, чтобы показать,
что после выбора этих пунктов откроется некоторое дополнительное диалоговое окно. Например, для элемента меню « Сохранить» троеточие не ставится, т.к. при этом должно произойти сохранение текущего документа без дополнительных вопросов, в то время как при нажатии « Открыть…» или « Сохранить Как…»
возникает дополнительное диалоговое окно, где пользователь должен выбрать файл. Для создания разделительной черты нужно в качестве имени элемента меню ввести – (минус).
Рисунок 5. Меню графического редактора.
Шаг 6. Добавление новой формы. Добавим в проект новую форму Проект ->
Добавить форму Windows. В качестве имени формы выберите fImage. Или переименуйте форму после создания в окне « Обозреватель решений».
Шаг 7. Разместите на форме fImage элемент управления PictureBox. Измените имя добавленного элемента PictureBox на mainPicture. Так же установите для свойства
Dock значение Fill так, чтобы элемент mainPicture был растянут на всю форму.
Шаг 8. Добавим метод, который будет позволять загружать заданное изображение в элемент mainPicture. Добавьте метод LoadImage для формы fImage, как показано в листинге 1.
Обратите внимание, что этот метод должен быть открытым, т.е. объявленным с ключевым словом public, т.к. мы будем его вызывать из главной (fMain) формы. Если метод объявлен с ключевым словом private он будет невидимым для других модулей (форм).
public partial class fImage : Form
{
public fImage()
{
InitializeComponent();
}
public void LoadImage(string strPath)
{
//изменяем заголовок формы на имя загруженного файла Text = System.IO.Path.GetFileName(strPath); //загружаем изображение по указанному пути (strPath) mainPicture.Image = new Bitmap(strPath);
}
Листинг 1.Форма fImage.
Шаг 9.Теперь добавим возможность создания нового дочернего окна класса fImage и загрузки в него выбранного пользователем изображения. Для выбора файла изображения воспользуемся стандартными компонентами OpenFileDialog и
SaveFileDialog.
Добавьте на форму fMain элемент управления OpenFileDialog и SaveFileDialog
(категория « Диалоговые окна»).
Эти элементы управления так же являются не визуальными и будут отображаться на панели в нижней части формы fMain. По умолчанию эти компоненты имеют имена openFileDialog1 и saveFileDialog1. Переименуйте openFileDialog1 в FD, а saveFileDialog1 в FS.
Свойство Filter у элементов управления FD и FS задайте следующим:
«Image files|*.jpg;*.png;*.gif» ( писать без кавычек). Это свойство позволяет задавать файлы каких типов будут отображаться при открытии диалоговых окон. Если свойство Filter пустое будут отображаться все файлы.
Выберите из созданного в вашей программе меню « Файл -> Открыть…», дважды кликните на пункте « Открыть…», чтобы создалась процедура-обработчик события
Click для элемента меню « Открыть…». Каждый созданный пункт меню в вашей программе представляет собой полноценный элемент управления с набором свойств, методом и событий.
private void открытьToolStripMenuItem_Click(object sender, EventArgs e)
{
//Вызыаем диалоговое окно (OpenFileDialog) if (FD.ShowDialog() == DialogResult.OK) {//если пользователь выбрал файл и нажал ОК
//Создаём новый экземпляр класса fImage fImage f = new fImage();
//Вызываем созданный метод LoadImage
//в качестве аргумента передаём путь до файла, //выбранный в диалоговом окне (свойство FileName) f.LoadImage(FD.FileName);
//указыаем, что эта форма является дочерней f.MdiParent = this;
//отображаем форму на экране f.Show();
}
}
Листинг 2. Форма fMain.
Шаг 10. Запустите программу, нажав клавишу F5. Убедитесь в работоспособности
программы (программа должна уметь открывать и отображать содержимой
графических файлов).
Шаг 11. Добавим возможность рисования на загруженных рисунках. Все методы связанные с рисованием графических примитивов находятся в классе Graphics.
Откройте форму fImage и добавьте следующий код из листинга 3.
public partial class fImage : Form
{
public fImage()
{
InitializeComponent();
}
//Экземпляр класса Graphics
//Содержит различные графические методы //для работы с рисунками
private Graphics gr;
public void LoadImage(string strPath)
{
//изменяем заголовок формы на имя загруженного файла
Text = System.IO.Path.GetFileName(strPath); //загружаем изображение по указанному пути (strPath) mainPicture.Image = new Bitmap(strPath);
//Получаем экземпляр класса Graphics, связанный с //загруженным изображением
gr = Graphics.FromImage(mainPicture.Image);
}
Листинг 3. Форма fImage.
Шаг 12. Создайте процедуры-обработчики событий MouseMove и MouseDown для элемента управления mainPicture. Обратите внимание, что процедуры-
обработчики должны создаваться именно для mainPicture, а не для формы!
Добавьте в форму fImage код из листинга 4.
//Экземпляр класса Graphics
//Содержит различные графические методы //для работы с рисунками
private Graphics gr;
//булевская переменная, |
определяет можем ли мы рисовать в данный момент |
private bool bCanDraw = |
false; |
//последняя сохранённая |
координата X |
private int lastX; |
|
//последняя сохранённая |
координата Н |
private int lastY; |
|
private void mainPicture_MouseMove(object sender, MouseEventArgs e)
{
//если можем рисовать...
if (bCanDraw)
{
//проверяем - зажата ли левая кнопка мыши if (e.Button == MouseButtons.Left)
{
//рисуем линию от последней (lastX,lastY) точки //до текущей (e.X,e.Y)
gr.DrawLine(Pens.Black, lastX, lastY, e.X, e.Y); //обновляем координаты lastX и lastY
lastX = e.X; lastY = e.Y;
//вызываем метод Refresh, который перерисовывает //содержимое PictureBox-а, отображая внесённые измененния mainPicture.Refresh();
}
else
{//если кнопка отпущена - запрещаем рисование
bCanDraw = false;
}
}
}
private void mainPicture_MouseDown(object sender, MouseEventArgs e)
{
//если нажата левая кнопка мыши if (e.Button == MouseButtons.Left)
{
//разрешаем рисование bCanDraw = true;
//сохраняем текущие координаты lastX = e.X;
lastY = e.Y;
}
}
Листинг 4. Форма fImage.
Чтобы удобнее было рисовать, измените свойство Cursor элемента mainPicture на значение Cross.
Шаг 13. Запустите программу, нажав клавишу F5. Убедитесь в работоспособности программы.
Шаг 14. Добавим возможность сохранять изменённые рисунки.
Для формы fImage создадим метод, который будет сохранять изображение
PictureBox-а по заданному пути. Этот метод мы будет далее вызывать из главной формы fMain. В листинге 5 приведён код метода SaveImage.
public void LoadImage(string strPath)
{
//изменяем заголовок формы на имя загруженного файла
Text = System.IO.Path.GetFileName(strPath); //загружаем изображение по указанному пути (strPath) mainPicture.Image = new Bitmap(strPath);
//Получаем экземпляр класса Graphics, связанный с //загруженным изображением
gr = Graphics.FromImage(mainPicture.Image);
}
public void SaveImage(string strPath)
{
mainPicture.Image.Save(strPath);
}
Листинг 5. Форма fImage.
Шаг 15. Теперь перейдите в главную форму fMain, |
создайте |
для пунка меню |
« Сохранить Как…» процедуру-обработчик события |
Click. По |
этому событию |
напишем следующий код, приведённый в листинге 6. |
|
|
private void сохранитьКакToolStripMenuItem_Click(object sender, EventArgs e)
{
//Вызыаем диалоговое окно (SaveFileDialog) if (FS.ShowDialog() == DialogResult.OK) {//если пользователь выбрал файл и нажал ОК
//Получает текущее активное дочернее окно (ActiveMdiChild) //преобразуем его к типу(классу) fImage
fImage f = (fImage)ActiveMdiChild; //Вызываем созданный метод SaveImage
//в качестве аргумента передаём путь до файла, //выбранный в диалоговом окне (свойс f.SaveImage(FS.FileName);
}
}
Листинг 6. Форма fMain.
Шаг 16. Запустите программу, нажав клавишу F5. Убедитесь в работоспособности программы.
Шаг 17. Программа работает, однако если попробовать сохранить файл, когда ни одного файла не открыто, программа выдаст исключение на строчке f.SaveImage(FS.FileName); так как текущая активная дочерняя форма
(ActiveMdiChild) будет равно null.
Удачным решением будет выставлять свойство Enabled в false для элементов меню
« Сохранить» и « СохранитьКак…», в случае если нет дочерних форм.
Проверку на наличие\отсутствие дочерних форм можно делать по событию
DropDownOpening |
элемента меню |
« Файл». Это событие возникает, |
когда идёт |
отображение элементов подменю |
(т.е. элементов « Открыть…», « |
Сохранить», |
|
« СохранитьКак…» |
и « Выход»). |
|
|
Создайте процедуру-обработчик события DropDownOpening элмента меню « Файл» и
добавьте в него код, приведённый в листинге 7.
private void файлToolStripMenuItem_DropDownOpening(object sender, EventArgs e)
{
сохранитьКакToolStripMenuItem.Enabled = (ActiveMdiChild != null); сохранитьToolStripMenuItem.Enabled = (ActiveMdiChild != null);
}
Листинг 6. Форма fMain.
Так как логическое выражение ActiveMdiChild != null возвращает True или False,
т.е. имеет такой же тип данных, что и свойство Enabled – нет необходимости в дополнительных операторах if.
Чтобы работал выход из программы по элементу меню « Выход» нужно в обработчике Click этого элемента вызывать метод Close().
Контрольные вопросы.
1.Что такое MDI приложение?
2.Для чего используется элемент управления OpenFileDialog?
3.Как можно загрузить изображение в элемент PictureBox?
4.Как можно создать меню для формы? Какой элемент управления при этом используется ?
Самостоятельное задание 2.1.
Добавить код для элемента меню « Сохранить». Файл должен сохраняться по
тому же пути, по которому был открыт.
Дополнительное задание (+2 балла к общему рейтингу).
Добавить возможность выбора цвета и толщины линии (через интерфейс).
Для изменения цвета и толщины линии необходимо функции DrawLine
передавать экземпляр класса Pen с установленным цветом и толщиной линии.
Пример (рисование зелёной линией с толщиной 2):
Pen myPen = new Pen(Color.Green, 2); gr.DrawLine(myPen, lastX, lastY, e.X, e.Y);