Уроки OpenGL + C#.

Создание второго оконного приложения в C#.

Создание второго оконного приложения.

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

Важные темы, рассматриваемые в данной части главы:
  1. Как создать меню, добавить в него новые элементы, C#.NET.
  2. Как создать панель управления в C# .NET.
  3. Как вызвать окно выбора файла в C# .NET.
  4. Как загрузить изображение в C# .NET.
  5. Как создать и вызвать дополнительную форму

Цели обозначены, так что приступим.

Первоначально, создайте новый проект, указав в качестве шаблона Windows Form Application и назовите second_application. Затем нажмите ок.

Добавление меню в приложение C# .NET .

Здесь все предельно просто, чтобы добавить меню в приложение, сначала откройте окно Toolbox (Панель элементов).
Здесь нам потребуется разворот Menus & Toolbars (Меню и панели инструментов). В нем нас интересует элемент MenuStrip (Рисунок 1).

Выбор элемента для созданию меню.
Рисунок 1.

Зажмите его левой клавишей мыши и перетащите на форму. На нашей форме отразиться элемент меню, как показано на рисунке 2.

Создание элементов меню.
Рисунок 2.

Теперь щелкнув на строке «введите здесь» вы можете ввести название меню: назовем его «File». При этом добавиться 2 дополнительных элемента – один снизу, который будет доступен при открытии меню, второй справа для создания новых разделов меню (рисунок 3).

Процесс добавления элементов меню.
Рисунок 3.

Дайте название подэлементу меню FileВыход”, как показано на рисунке 4. После этого назовите еще один раздел меню – «загрузить». В меню загрузить добавьте подэлемент “загрузить изображение” и ему назначьте в раскрывающемся меню 2 подэлемента : «В формате JPG» и «В формате PNG». Выглядеть меню будет следующим образом (рисунок 4):

Заполение резделов создаваемого меню.
Рисунок 4.

Теперь рассмотрим то, как просто добавить обработчик события меню. Для этого перейдите к меню “Выход”. Теперь сделайте двойной щелчок левой клавишей мыши – MS Visual Studio автоматически создаст код функции обработчика и настроит событие обработки.
Перед нами откроется код функции обработчика:


private void выйтиToolStripMenuItem_Click(object sender, EventArgs e)
{

}

Так как этот элемент меню отвечает за выход из приложения, добавим в него код, который будет генерировать MessageBox с вопросом о подтверждении выхода из приложения. Если пользователь подтвердит выход – приложение будет завершено.
Новый код функции с комментариями:


private void выйтиToolStripMenuItem_Click(object sender, EventArgs e)
{
// создаем переменную rsl, которая будет хранить результат вывода окна с вопросом
// (пользователь нажал одну из клавиш на окне - это и есть результат)
// MessageBox будет создержать вопрос, а так же кнопки Yes No и иконку Question (Вопрос)
DialogResult rsl = MessageBox.Show( "Вы действительно хотите выйти из приложения?", "Внимание!", MessageBoxButtons.YesNo, MessageBoxIcon.Question);

// если пользователь нажал кнопку да
if (rsl == DialogResult.Yes)
{
// выходим из приложения
Application.Exit();
}
}

Теперь можно откомпилировать приложение и проверить работоспособность кнопки.

Часто панель управления (Toolbar) дублирует элементы меню, для быстрого к ним доступа.

Сейчас мы рассмотрим как создается панель управления (Toolbar) в C# .NET .

Нам снова нужно перейти к окну Toolbox (Панель инструментов) развороту Menus & Toolbars. В этот раз мы выберем элемент ToolStrip (рисунок 5)

Окно toolbox
Рисунок 5.

Перетащите элемент управления на окно и вы увидите как вдоль его верхней границы разместиться панель ToolBar (рисунок 6).

Добавленный элемент Toolbar
Рисунок 6.

Мы изменим положение привязки нашего ToolBar’a. Для этого щелкнем по нему правой кнопкой, и в открывшемся контекстном меню выберем пункт свойства. Откроется окно свойств: здесь мы изменим привязку на левую часть окна, внеся изменения в параметр Dock, как показано на рисунке 7.

Привязка панели инструментов к левой стороне.

Рисунок 7.

Теперь увеличим размеры кнопок на toolbar’e. Для этого сначала необходимо в его свойствах установить параметр AutoSize равным false. Теперь мы можем изменить размеры самих кнопок – установим параметры Size- Width равным 44. Поле станет шире - рисунок 8.

Установка размеров изображений, размещаемых на кнопках создаваемого Toolbar

Рисунок 8.

Теперь добавим 3 кнопки на наш ToolBar. Для этого щелкните по нему и в раскрывающемся списке элементов, которые мы можем добавить, выберите элемент button. Рисунок 9.

Добавление кнопок на панель уэлементов. (Toolbar)
Рисунок 9.

Повторите операцию, чтобы кнопок на панели стало две. Теперь поочередно выберите каждую кнопку и в ее свойствах установите AutoSize равный false. После это перейдите к полю Size и установите высоту равную 42. Теперь кнопки примут квадратный вид.
Таким образом, на панели разместятся 3 кнопки, как показано на рисунке 10.

Пример добавленных кнопок с установленными размерами.

Рисунок 10.

Теперь назначим изображения для данных картинок. В качестве изображений можно использовать все современные форматы, в том числе и png24 с поддержкой прозрачности.
Мы будем использовать 3 следующих изображения:

Первое
Изображение для кнопки 1. (Будет назначено кнопке, отвечающей за открытие дополнительного диалогового окна).

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

Второе
Изображение для кнопки 2.

Третье
Изображение для кнопки 3.

(!!!) Обратите внимание, что у данных изображений прозрачный фон.

2 кнопки будут дублировать меню с функциями загрузки изображений, 1-я кнопка будет предназначена для вызова окна, с отображением картинки, которую мы загрузили.

Теперь для установки изображений необходимо перейти в свойства картинки, после чего мы установим значение параметра ImageScaling равным none, чтобы изображение не масштабировалось. Теперь в параметре Image мы можем выбрать изображение для загрузки, как показано на рисунке 11.

Установка изображений на кнопки.
Рисунок 11.

В процессе выбора откроется окно, показанное на рисунке 12.

Импорт рисунка для установки на кнопке
Рисунок 12.

Теперь щелкните на кнопке Import и выберите необходимый рисунок. Аналогично повторите с другими рисунками. В результате вы получите 3 красивые кнопки, как показано на рисунке 13.

Пример созданной панели инструментов.
Рисунок 13.

Для того чтобы создать обработчики нажатий на кнопки этого ToolBox’а, достаточно совершить двойной щелчок мыши на каждом из них – MS Visual Studio автоматически сгенерирует код обработчик события и заготовки функций.
В будущем, мы добавим вызов необходимых нам функций из этого обработчика.

Теперь мы разместим на форме элемент PictureBox и настроем размеры окна, чтобы оно выглядело следующем образом – рисунок 14.

Расположение элемента PictureBox в окне программы
Рисунок 14.

В свойствах добавленного элемента PictureBox установите параметр SizeMode равный StretchImage. Теперь, когда мы реализуем загрузку изображения, оно будет масштабироваться под размеры нашего элемента PictureBox.

Создание окна выбора файла в C# .NET .

Чтобы пользователь мог выбирать файл для загрузки через стандартное в windows окно загрузки файлов, мы выполним следующие действия.
Перейдите к окну ToolBox (Панель элементов).
Теперь перетащите элемент управления OpenFileDialog (рисунок 15) на форму.

Добавление элемента OpenFileDialog

Рисунок 15.

Местоположение, куда вы перетащите элемент не важно – он добавиться в поле под окном, к другим специфическим объектам. Рисунок 16.

Элемент openFileDialog, расположенный под редакируемой формой.
Рисунок 16.

Как видно из рисунка 16, к дополнительным элементам, уже установленным на наше окно (меню и ToolBox) добавился еще и элемент openFileDialog1.
Теперь мы реализуем код открытия окна выбора файла, с необходимыми нам параметрами.
Если вы еще не создали обработчики нажатия на кнопки загрузки и элементы меню, так же предназначенные для загрузки – сделайте это, с помощью двойных щелчков по ним.
Код сгенерированных функций выглядит следующим образом:

// обработка кнопки меню "загрузка - в формате jpg"
private void вФорматеJPGToolStripMenuItem_Click(object sender, EventArgs e)
{

}

// обработка кнопки меню "загрузка - в формате png"
private void вФорматеPNGToolStripMenuItem_Click(object sender, EventArgs e)
{

}

// обработка кнопки №2 на панели
private void toolStripButton2_Click(object sender, EventArgs e)
{

}

// обработка кнопки №3 на панели
private void toolStripButton3_Click(object sender, EventArgs e)
{

}


Теперь напишем следующую функцию LoadImage.


Открытие окна выбора файла и загрузка изображения в C# .NET.


Image
MemForImage;

// функция загрузки изображения
private void LoadImage(bool jpg)
{
// директория, которая будет выбрана как начальная в окне для выбора файла
openFileDialog1.InitialDirectory = "c:";

// если будем выбирать jpg файлы
if (jpg)
{
// устанавливаем формат файлов для загрузки - jpg
openFileDialog1.Filter = "image (JPEG) files (*.jpg)|*.jpg|All files (*.*)|*.*";
}
else
{
// устанавливаем формат файлов для загрузки - png
openFileDialog1.Filter = "image (PNG) files (*.png)|*.png|All files (*.*)|*.*";
}

// если открытие окна выбора файла завершилось выбором файла и нажатием кнопки ОК
if(openFileDialog1.ShowDialog() == DialogResult.OK)
{


try // безопасная попытка
{
// пытаемся загрузить файл с именем openFileDialog1.FileName - выбранный пользователем файл.
MemForImage = Image.FromFile(openFileDialog1.FileName);
// устанавливаем картинку в поле элемента PictureBox
pictureBox1.Image = MemForImage;
}
catch (Exception ex) // если попытка загрузки не удалась
{
// выводим сообщение с причиной ощибки
MessageBox.Show( "Не удалось загрузить файл: " + ex.Message);
}
}
}

Фукнция LoadImage в качестве входного параметра будет получать флаг о том, какой фильтр для выбора файлов необходимо выбрать. Далее вызывается окно ывбора файла и если оно при закрытии возвращает результат DialogResult.OK, то мы пытаемся загрузить и установить выбранную картинку в поле PictureBox. Конструкция try catch необходима нам здесь по следующей причине: если загрузка прошла неудачно, то мы получим сообщение об ошибки, но на выполнение программы это не повлиет и мы сможем продолжить ее выполнение.
Далее , функции обработчики нажатий пунктов меню и кнопок на панели управления реализуют вызов функции загрузки с необходимым флагом.


// обработка кнопки меню "загрузка - в формате jpg"
private void вФорматеJPGToolStripMenuItem_Click(object sender, EventArgs e)
{
// загружаем jpg фалйы
LoadImage(true);
}

// обработка кнопки меню "загрузка - в формате png"
private void вФорматеPNGToolStripMenuItem_Click(object sender, EventArgs e)
{
// загружаем png фалйы
LoadImage(false);
}

// обработка кнопки №2 на панели
private void toolStripButton2_Click(object sender, EventArgs e)
{
// загружаем jpg фалйы
LoadImage(true);
}

// обработка кнопки №3 на панели
private void toolStripButton3_Click(object sender, EventArgs e)
{
// загружаем png фалйы
LoadImage(false);
}

Теперь если откомпилировать приложение (F5), то можно попробовать загрузить изображение. Обратите внимание, что загрузка png24 с альфоканалом – тоже работает (рисунок 17)

Пример загруженного изображения
Рисунок 17.

Как видите, наше изображение масштабируется под размер элемента PictureBox. Поэтому сейчас мы добавим в проект еще одну форму, на которой мы будем отображать изображение в его истинном размере.

Добавление и вызов дополнительного диалогового окна.

Для этого перейдите к окну Solution Explorer (Обозреватель решений), после чего щелкните на названии проекта правой кнопкой мыши и в открывшемся контекстном меню выберите Add->Form, как показано на рисунке 18.

Добавление в проект нового диалогового окна
Рисунок 18.

В открывшемся окне введите названия класса, который будет отвечать за генерацию нашего вспомогательного окна – Preview.cs (рисунок 19)

Установка названия создаваемой формы для нвого диалогового окна.
Рисунок 19.

Теперь измените размер окна так, как показано на рисунке 20. Затем на форме разместите элемент panel. Внутри элемента panel разместите элемент pictureBox, как показано на рисунке 20.

Размещение элементов panel и picturebox на созданном диалоговом окне.
Рисунок 20.

Данное окно будет получать при загрузке в качестве параметра ссылку на наше загруженное изображение. Затем оно будет устанавливать границы элемента pictureBox, равными размерам полученного изображения, после чего устанавливать его в элемент pictureBox.

Перейдите к свойствам элемента panel и установите значение параметра AutoScroll равное true. Теперь, в том случае, если размер изображения будет превышать размер элемента panel1, будут появляться вертикальная и горизонтальная полоса прокрутки, с помощью которых можно будет просмотреть изображение.
Теперь рассмотрим исходный код, необходимый для реализации данных возможностей.

Первым делом назначим обработчик кнопки с изображением стрелки направленной вправо на нашем главном окне. Щелкните по ней дважды, после чего вы перейдете к редактированию кода функции, которая будет вызвана при щелчке по данной кнопке.
Он будет выглядеть следующим образом:


// кнопка активации дополнительного диалогового окна
private void toolStripButton1_Click(object sender, EventArgs e)
{
// создаем новый экземпляр класса Preview,
// отвечающего за работу с нашей дополнительной формой
// в качестве параметра мы передаем наше загруженное изображение
Form PreView = new Preview(MemForImage);
// затем мы вызываем диалогое окно
PreView.ShowDialog();
}

Как видно из исходного кода, класс Preview получает в качестве параметра наше загруженное изображение. Для правильной работы программы, мы должны изменить конструктор класса Preview, а так же реализовать остальную функциональность программы.
Перейдите к окну Preview, после чего сделайте двойной щелчок левой клавшей мыши на нем (НЕ на размещенных на нем объектах).
Откроется для редактирования функция

private void Preview_Load(object sender, EventArgs e)

Но мы, сначала, изменим код конструктора класса, теперь он будет выглядеть следующим образом:

public partial class Preview : Form
{
// объект Image для хранения изображения
Image ToView;
// модифицируем коструктор окна таким образом, чтобы он получал
// в качестве параметра изображение для отображения
public Preview(Image view)
{
// получаем изображние
ToView = view;

InitializeComponent();
}

Теперь отредактируем код функции Preview_Load. Он будет выглядеть следующим образом

// эта функция выполнится при загрузке окна
private void Preview_Load(object sender, EventArgs e)
{
// если объект, хранящий изображение не равен null
if (ToView != null)
{
// устанавливаем новые размеры элемента pictureBox1,
// равные ширине (ToView.Width) и высоте (ToView.Height) загружаемого изображения.
pictureBox1.Size = new Size(ToView.Width, ToView.Height);
// устанавливаем изображение для отображения в элементе pictureBox1
pictureBox1.Image = ToView;
}
}

В заключении, самостоятельно добавьте обработчик надатия кнопки закрыть. Функция закрытия быдет выглядеть следующим образом

// обработчик кнопки закрыть
private void button1_Click(object sender, EventArgs e)
{
// закрываем диалоговое окно
Close();
}

Вот и все. Теперь, если будет загружено большое изхображение, его отображение в дополнительном окне будет снабжено полосами прокрутки (рисунок 21).

Изображение с полосами прокрутки
Рисунок 21.

Откомпелируйте приложение (F5) чтобы проверить его.



Исходный код данного урока (для VS 2008).

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


Обсуждение данного урока: Создание второго оконного приложения в C# .NET
Далее: 3.1 О многопоточном программировании в C#.