Windows form designer generated code что это

Обновлено: 06.07.2024

Нажатие кнопки OK приводит к загрузке выбранного нами шаблона и к появлению основных окон среды разработчика. Этими окнами являются:

  • окно дизайнера форм;
  • палитра компонентов;
  • окно для просмотра компонентов приложения (Solution Explorer);
  • окно для установки свойств (Properties).

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

Для переключения между режимом визуального проектирования формы и режимом редактирования кода используются клавиши F7 (режим кода) и Shift-F7 (режим дизайна). На следующем рисунке показана работа в режиме редактирования кода (обратите внимание на то, что вместо Solution Explorer мы включили браузер классов (Class View), который может быть полезен для быстрой навигации по исходному коду создаваемого нами приложения).

Палитра компонентов (ToolBox), вызываемая нажатием клавиш Ctrl-Alt-X, содержит все стандартные компоненты, которые мы можем использовать в Windows-приложениях. Она разделена на несколько вкладок:

Использование интерфейсных элементов

оздание интерфейсной части приложения начинается с того, что мы перетаскиваем с палитры компонентов необходимые нам интерфейсные элементы. В таблице представлены основные категории интерфейсных элементов, располагающихся в палитре компонентов на вкладке Windows Forms.

При перетаскивании любого компонента с палитры на форму его свойства и события становятся доступными через окно редактирования свойств — окно Properties. Рассмотрим следующий пример. Допустим, что мы хотим создать программу, позволяющую просматривать графические файлы. Для этого нам потребуются следующие компоненты:

  • компонент Button, который мы будем использовать для открытия диалоговой панели для выбора файлов;
  • компонент OpenFileDialog, который будет использоваться для выбора графического файла;
  • компонент PictureBox, в котором мы будем отображать содержимое графического файла.

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

Следующий шаг — это изменение некоторых свойств компонентов. Начнем с формы и установим значение ее свойства Text равным Graphics View. Далее изменим значение свойства StartPosition на CenterScreen — в результате наше приложение всегда будет отображаться в середине экрана. Если мы хотим, чтобы размер нашего окна нельзя было изменить, мы должны установить значение FormBorderStyle равным FixedSingle или Fixed3D. В противном случае при изменении размера окна нарушится расположение элементов внутри него.

Внутри окна находятся два интерфейсных элемента — кнопка и элемент для отображения графики. У кнопки мы должны изменить свойство Text на Open. Для элемента PictureBox мы установим трехмерную рамку (BorderStyle = Fixed3D), а также изменим свойство Anchor — с его помощью мы укажем, как должны изменяться размеры элемента в зависимости от размеров окна.

Для компонента OpenFileDialog мы изменим следующие свойства:

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

Написание кода

ледуя логике нашей программы, каждое нажатие кнопки Open должно приводить к открытию диалоговой панели OpenFile. Выбор одного файла и нажатие кнопки Open в этой диалоговой панели вызывает отображение этого файла в компоненте PictureBox.

Мы начинаем с того, что создаем обработчик события, возникающего при нажатии кнопки Open. Для этого мы либо дважды щелкаем по кнопке в режиме дизайна, либо в режиме редактирования кода выбираем компонент Button в списке компонентов, расположенном в верхней части редактора, а затем выбираем в списке событие Click. В результате тех или иных действий мы получаем код обработчика события Click нашей кнопки. Мы добавляем в него следующий код:

В первой строке мы создаем переменную типа Bitmap, в которую будем загружать содержимое выбранного нами графического файла. Затем мы вызываем метод ShowDialog объекта OpenFileDialog, чтобы отобразить на экране панель выбора файлов. Если файл выбран и нажата кнопка Open, мы выполняем следующие действия:

  • задаем режим отображения графики в компоненте PictureBox — в нашем примере графика должна быть «растянута» во весь размер компонента;
  • создаем новый экземпляр объекта Bitmap, в который загружаем содержимое выбранного нами файла;
  • отображаем содержимое объекта Bitmap в компоненте PictureBox.

После того как меню готово, нам необходимо написать код, который будет выполняться при выборе той или иной команды. Для этого мы дважды щелкаем мышью по соответствующей команде и попадаем в редактор кода. Для команды File | Open переносим код, созданный нами для обработчика события, связанного с нажатием на кнопку. Для команды File | Exit мы напишем следующий код:

Выполнение этого кода приведет к завершению нашего приложения и к закрытию его окна.

Создание MDI-приложений

осле того как мы освоили создание меню, давайте изменим функциональность нашего приложения таким образом, чтобы каждый выбранный графический файл открывался в новом дочернем окне, то есть превратим наше однооконное приложение в Multiple Document Interface (MDI)-приложение.

Создание MDI-приложения мы начинаем с того, что изменяем свойство IsMDIContainer нашей формы и присваиваем ему значение True. После этого мы используем команду Project | Add Windows Form для добавления к нашему проекту еще одной формы, которая будет служить в качестве дочерней формы. В диалоговой панели Add New Item мы выбираем элемент Windows Form и нажимаем кнопку Open.

Перенесем компонент PictureBox из главной формы нашего приложения в дочернюю форму. Для этого следует выбрать компонент PictureBox, нажать клавишу Ctrl-X, затем перейти на дочернюю форму и нажать клавишу Ctrl-V. Наше MDI-приложение практически готово — нам осталось лишь изменить код, выполняющийся при выборе команды File | Open, теперь он будет выглядеть следующим образом (внесенные нами изменения показаны выделенным шрифтом):

Сначала мы создаем переменную Child, которая имеет тип Form2 и будет использоваться для создания дочерних форм. Затем указываем родительское окно дочерней формы — ключевое слово Me используется в Visual Basic для указания текущего класса. Поскольку компонент PictureBox теперь располагается в дочернем окне, мы изменяем способ обращения к нему. После того как графика загружена, мы показываем нашу дочернюю форму на экране.

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

Если же мы мы хотим отобразить только имя файла, нам надо написать такой код:

и добавить ссылку на пространство имен System.IO в самом начале кода нашей программы:

Теперь давайте добавим код, который позволит нам управлять дочерними окнами. Начнем с того, что создадим еще один пункт меню — Childs и добавим в него следующие элементы: Tile Horizontal; Tile Vertical; Cascade; Arrange Icons.

Затем напишем код для каждой из команд:

Включим еще одну возможность — меню для переключения между окнами. Добавим к главному меню элемент Window и изменим значение его свойства MdiList на True.

Теперь попробуем использовать еще один компонент — ContextMenu, который позволит нам изменять способ отображения графики в компоненте PictureBox.

Добавим компонент ContextMenu к дочерней форме и создадим в нем следующие элементы: Normal; Center; Stretch; Autosize, которые повторяют все возможные значения свойства SizeMode компонента PictureBox. Установим свойство ContextMenu компонента PictureBox в ContextMenu1. Затем напишем код, который будет выполняться при вызове каждой из команд контекстного меню:

После этого нам надо удалить строку:

из обработчика события выбора команды File | Open в главном меню нашего приложения.

Файл проекта и генерация кода

Список файлов, из которых состоит наше приложение, располагается в секции Files. Вид этой секции для нашего примера показан ниже (обратите внимание на различные значения атрибутов SubType, а также на автоматическое создание необходимых файлов):

Файл AssemblyInfo содержит всю необходимую информацию о сборке. Если мы не задали эту информацию, то используются значения по умолчанию.

Все файлы, применяемые в качестве шаблонов для Windows-приложения, располагаются в каталоге (показан пример для Visual Basic):

Здесь мы найдем файлы, представляющие собой «шаблон» Windows-приложения: AssemblyInfo.VB; Form.VB; WindowsApplication.vbproj.

Заключение

Конструктор Windows Forms предоставляет множество средств для создания приложений Windows Forms. В этой статье показано, как создать приложение с помощью различных средств, предоставляемых конструктором, и выполнять такие задачи:

  • размещать элементы управления с помощью линий привязки;
  • выполнять задачи конструктора с помощью смарт-тегов;
  • устанавливать поля и отбивки для элементов управления;
  • располагать элементы управления с помощью элемента управления TableLayoutPanel;
  • разделять макет элемента управления с помощью элемента управления SplitContainer;
  • просматривать макет в окне "Структура документа";
  • размещать элементы управления с отображением размера и сведений о расположении;
  • задавать значения свойств в окне "Свойства".

В итоге вы создадите пользовательский элемент управления, используя разнообразные функции макета, которые доступны в конструкторе Windows Forms. Этот элемент управления реализует пользовательский интерфейс для простого калькулятора. На следующем изображении показан общий макет элемента управления калькулятора.

Создание проекта пользовательского элемента управления

Первым шагом является создание проекта элемента управления DemoCalculator.

Откройте Visual Studio и создайте проект категории Библиотека элементов управления Windows Forms. Задайте проекту имя DemoCalculatorLib.

Шаблон библиотеки элементов управления Windows Forms в Visual Studio 2019

Чтобы переименовать файл, в обозревателе решений щелкните правой кнопкой мыши элемент UserControl1.vb или UserControl1.cs, выберите Переименовать и замените имя файла на DemoCalculator.vb или DemoCalculator.cs. Чтобы переименовать все ссылки на элемент кода UserControl1, в соответствующем запросе выберите Да.

В конструктор Windows Forms отображается поверхность конструктора для элемента управления DemoCalculator. В этом представлении можно графически спроектировать внешний вид элемента управления, выбрав элементы управления и компоненты на панели элементов и поместив их на поверхности конструктора. Дополнительные сведения см. в статье о разновидностях пользовательских элементов управления.

Разработка макета элемента управления

Элемент управления DemoCalculator содержит несколько элементов управления Windows Forms. На этом этапе вы зададите расположение элементов управления с помощью конструктора Windows Forms.

В конструкторе Windows Forms увеличьте размер элемента управления DemoCalculator, выбрав маркер изменения размера в правом нижнем углу и перетащив его вниз и вправо. В правом нижнем углу Visual Studio просмотрите сведения о размере и расположении элементов управления. Задайте элементу управления ширину 500 и высоту 400, наблюдая за сведениями о размере при изменении размера элемента управления.

На панели элементов выберите узел Контейнеры, чтобы открыть его. Выберите элемент управления SplitContainer и перетащите его на поверхность конструктора.

Элемент SplitContainer появится на поверхности конструктора элемента управления DemoCalculator.

Размер элемента управления SplitContainer автоматически устанавливается в соответствии с размером элемента управления DemoCalculator. В окне Свойства проверьте свойства, заданные для элемента управления SplitContainer . Найдите свойство Dock. Ему задано значение DockStyle.Fill. Это означает, что размер элемента управления SplitContainer устанавливается в соответствии с границами элемента управления DemoCalculator. Измените размер элемента управления DemoCalculator, чтобы проверить это поведение.

В окне Свойства замените значение свойства Dock на None .

Элемент управления SplitContainer уменьшится до размера по умолчанию и больше не будет меняться при изменении размера элемента управления DemoCalculator.

Щелкните глиф смарт-тега () в правом верхнем углу элемента управления SplitContainer . Выберите Закрепить в родительском контейнере, чтобы присвоить свойству Dock значение Fill .

Элемент управления SplitContainer закрепится по границам элемента управления DemoCalculator.

Для некоторых элементов управления доступны смарт-теги, упрощающие проектирование. Дополнительные сведения см. в разделе Пошаговое руководство: выполнение типичных задач с помощью смарт-тегов в элементах управления Windows Forms.

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

SplitContainer разделяет элемент управления DemoCalculator на две панели с разделяющей их границей, которую можно перемещать. На левой панели будут находиться кнопки калькулятора и экран, а на правой будет отображаться запись арифметических операций, выполненных пользователем.

В окне Свойства замените значение свойства BorderStyle на Fixed3D .

На панели элементов выберите узел Стандартные элементы управления, чтобы открыть его. Выберите элемент управления ListView и перетащите его на правую панель элемента управления SplitContainer .

Выберите глиф смарт-тега элемента управления ListView . На панели смарт-тегов замените значение параметра View на Details .

На панели смарт-тегов выберите Изменить столбцы.

Откроется диалоговое окно Редактор коллекции ColumnHeader.

На панели смарт-тегов выберите Закрепить в родительском контейнере, а затем щелкните глиф смарт-тега, чтобы закрыть панель смарт-тегов.

С панели элементов узла Контейнеры перетащите элемент управления TableLayoutPanel на левую панель элемента управления SplitContainer .

Элемент управления TableLayoutPanel отобразится на поверхности конструктора с открытой панелью смарт-тегов. Элемент управления TableLayoutPanel упорядочивает свои дочерние элементы управления в сетке. Элемент управления TableLayoutPanel будет содержать экран и кнопки элемента управления DemoCalculator. Дополнительные сведения см. в разделе Пошаговое руководство: упорядочение элементов управления в формах Windows Forms с помощью элемента TableLayoutPanel.

На панели смарт-тегов выберите Правка строк и столбцов.

Откроется диалоговое окно Стили столбцов и строк.

Нажимайте кнопку Добавить, пока не добавятся пять столбцов. Выберите все пять столбцов, а затем в поле Тип размера выберите Процент. Параметру Процент задайте значение 20. При этом каждому столбцу задается одинаковая ширина.

В разделе Показать выберите Строки.

Нажимайте кнопку Добавить, пока не добавятся пять строк. Выберите все пять строк, а затем в поле Тип размера выберите Процент. Параметру Процент задайте значение 20. При этом каждой строке задается одинаковая высота.

В окне Свойства замените значение свойства Dock на Fill .

Заполнение элемента управления

Теперь, когда макет элемента управления настроен, можно добавить в элемент управления DemoCalculator кнопки и экран.

На панели элементов выберите значок элемента управления TextBox .

Элемент управления TextBox помещается в первую ячейку элемента управления TableLayoutPanel .

В окне Свойства замените значение свойства ColumnSpan элемента управления TextBox на 5.

Элемент управления TextBox переместится в центр своей строки.

Замените значение свойства Anchor элемента управления TextBox на Left , Right .

Элемент управления TextBox расширится по горизонтали, заняв все пять столбцов.

Измените значение свойства TextBox элемента управления TextAlign на Right .

В окне Свойства разверните узел свойства Font . Задайте значение 14 для Size и true для Bold у элемента управления TextBox .

Выберите элемент управления TableLayoutPanel .

На панели элементов выберите значок Button .

Элемент управления Button разместится в следующей свободной ячейке элемента управления TableLayoutPanel .

На панели элементов выберите Button еще четыре раза, чтобы заполнить вторую строку элемента управления TableLayoutPanel .

Выберите все пять элементов управления Button , удерживая нажатой клавишу SHIFT. Нажмите клавиши CTRL+C, чтобы скопировать элементы управления Button в буфер обмена.

Трижды нажмите сочетание клавиш CTRL+V, чтобы вставить скопированные элементы управления Button в оставшиеся строки элемента управления TableLayoutPanel .

Выберите все 20 элементов управления Button , удерживая нажатой клавишу SHIFT.

В окне Свойства замените значение свойства Dock на Fill .

Все элементы управления Button закрепятся в своих ячейках.

В окне Свойства разверните узел свойства Margin . Для All задайте значение 5.

Всем элементам управления Button задается меньший размер, чтобы увеличить поля между ними.

Выберите button10 и button20, после чего нажмите клавишу DELETE, чтобы удалить их из макета.

Выберите button5 и button15, после чего замените значение их свойства RowSpan на 2. Это будут кнопки очистки и = для элемента управления DemoCalculator.

Использование окна структуры документа

Если в элементе управления или форме присутствует несколько элементов управления, перемещаться по макету удобнее с помощью окна "Структура документа".

В строке меню выберите Вид > Другие окна > Структура документа.

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

В окне Структура документа щелкните правой кнопкой мыши элемент button1, чтобы выбрать его, после чего щелкните Переименовать. Замените его имя на sevenButton.

В окне Структура документа замените имена элементов управления Button , заданные конструктором, на имена для рабочей среды согласно следующему списку:

button1 на sevenButton;

button2 на eightButton;

button3 на nineButton;

button4 на divisionButton;

button5 на clearButton;

button6 на fourButton;

button7 на fiveButton;

button8 на sixButton;

button9 на multiplicationButton;

button11 на oneButton;

button12 на twoButton;

button13 на threeButton;

button14 на subtractionButton;

button15 на equalsButton;

button16 на zeroButton;

button17 на changeSignButton;

button18 на decimalButton;

button19 на additionButton;

С помощью окон Структура документа и Свойства измените значения свойства Text для каждого имени элемента управления Button согласно следующему списку:

для элемента управления sevenButton замените свойство текста на 7;

для элемента управления eightButton замените свойство текста на 8;

для элемента управления nineButton замените свойство текста на 9;

для элемента управления divisionButton замените свойство текста на / (косая черта);

для элемента управления clearButton замените свойство текста на Clear;

для элемента управления fourButton замените свойство текста на 4;

для элемента управления fiveButton замените свойство текста на 5;

для элемента управления sixButton замените свойство текста на 6;

для элемента управления multiplicationButton замените свойство текста на * (звездочка);

для элемента управления oneButton замените свойство текста на 1;

для элемента управления twoButton замените свойство текста на 2;

для элемента управления threeButton замените свойство текста на 3;

для элемента управления subtractionButton замените свойство текста на - (дефис);

для элемента управления equalsButton замените свойство текста на = (знак равенства);

для элемента управления zeroButton замените свойство текста на 0;

для элемента управления changeSignButton замените свойство текста на +/- ;

для элемента управления decimalButton замените свойство текста на . (точка);

для элемента управления additionButton замените свойство текста на + (знак "плюс");

На поверхности конструктора выберите все элементы управления Button , удерживая нажатой клавишу SHIFT.

В окне Свойства разверните узел свойства Font . Задайте значение 14 для Size и true для Bold у всех элементов управления Button .

На этом разработка элемента управления DemoCalculator завершена. Остается только добавить логику калькулятора.

Добавление обработчиков событий

Кнопки в элементе управления DemoCalculator имеют обработчики событий, которые можно использовать для реализации большей части логики калькулятора. Конструктор Windows Forms позволяет реализовать заглушки всех обработчиков событий для всех кнопок одним выбором.

На поверхности конструктора выберите все элементы управления Button , удерживая нажатой клавишу SHIFT.

Выберите один из элементов управления Button .

В редакторе кода откроются обработчики событий, созданные конструктором.

Тестирование элемента управления

Поскольку элемент управления DemoCalculator наследуется от класса UserControl, его поведение можно проверить с помощью Контейнера для тестирования пользовательских элементов управления. Дополнительные сведения см. в разделе Практическое руководство. Тестирование поведения элемента UserControl во время выполнения.

Нажмите клавишу F5, чтобы собрать и запустить элемент управления DemoCalculator в Контейнере для тестирования пользовательских элементов управления.

Выберите границу между панелями SplitContainer и перетащите ее влево и вправо. Размеры элемента TableLayoutPanel и всех его дочерних элементов управления будут изменяться в соответствии с доступным пространством.

Завершив тестирование элемента управления, нажмите кнопку Закрыть.

Использование элемента управления в форме

Элемент управления DemoCalculator можно использовать в других составных элементах управления или в форме. Ниже описано, как это сделать.

Создание проекта

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

Создайте проект Приложение Windows Forms с именем DemoCalculatorTest.

В обозревателе решений щелкните правой кнопкой мыши проект DemoCalculatorTest и выберите Добавить ссылку, чтобы открыть диалоговое окно Добавление ссылки.

Перейдите на вкладку Проекты и выберите проект DemoCalculatorLib, чтобы добавить ссылку на тестовый проект.

В обозревателе решений щелкните правой кнопкой мыши DemoCalculatorTest и выберите пункт Назначить запускаемым проектом.

В конструкторе Windows Forms увеличьте размер формы примерно до 700 x 500.

Использование элемента управления в макете формы

Чтобы использовать элемент управления DemoCalculator в приложении, его необходимо поместить в форму.

На панели элементов разверните узел Компоненты DemoCalculatorLib.

Перетащите элемент управления DemoCalculator с панели элементов в форму. Переместите элемент управления в левый верхний угол формы. Когда элемент управления расположен близко к границам формы, отображаются линии привязки. Линии привязки указывают расстояние свойства Padding формы и свойства Margin элемента управления. Поместите элемент управления в расположение, указанное линиями привязки.

Перетащите элемент управления Button с панели элементов и поместите его в форму.

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

Щелкните правой кнопкой мыши элемент управления DemoCalculator и выберите пункт Свойства.

Замените значение свойства Dock на Fill .

Выберите форму, а затем разверните узел свойства Padding . Замените значение Все на 20.

Размер элемента управления DemoCalculator уменьшится в соответствии с новым значением формы Padding .

Измените размер формы, перетаскивая различные маркеры изменения размера в разные положения. Обратите внимание на то, как размер элемента управления DemoCalculator пропорционально изменяется.

Следующие шаги

В этой статье было показано, как создать пользовательский интерфейс для простого калькулятора. В дальнейшем можно расширить его функциональность, реализовав логику калькулятора, а затем опубликовать приложение с помощью ClickOnce. Вы также можете ознакомиться с руководством по созданию средства просмотра рисунков с помощью Windows Forms.

При создании нового проекта запускается режим дизайна — форма представляет собой основу для расположения элементов управления. Для работы с программой следует перейти в режим кода. Это можно сделать нескольким способами: щелкнуть правой кнопкой мыши в любой части формы и в появившемся меню выбрать View Code, в окне Solution Explorer сделать то же самое на компоненте Form 1.cs или просто дважды щелкнуть на форме — при этом сгенерируется метод Form1_Load . После хотя бы однократного перехода в режим кода в этом проекте появится вкладка Form1.cs* (см. рис. рис. 1.19), нажимая на которую, тоже можно переходить в режим кода. Для перехода в режим кода также можно использовать клавишу F7, а для возврата в режим дизайна — сочетание Shift +F7.

Переключимся в режим кода и рассмотрим некоторые блоки.

Данный блок определяет, какие пространства имен используются в этом проекте:

Для просмотра информации о содержимом каждого из этих пространств можно воспользоваться окном Object Browser .

Далее определяется собственное пространство имен, имя которого совпадает с названием проекта:

При необходимости это название можно менять.

Класс формы Form1 , наследуемый от System.Windows.Forms.Form , содержит в себе почти весь код:

Внутри этого класса находится конструктор формы:

Событие Initiliaze происходит в момент запуска приложения; код, добавляемый после InitializeComponent , может изменять содержимое формы или элементы управления в момент запуска.

Область Windows Form Designer generated code содержит код графического интерфейса элементов управления и формы, автоматически генерируемый средой. Пустая форма содержит описание размеров и заголовка. Щелкните на знак (+) для просмотра этой области:

Можно менять значения параметров, создаваемые средой, и тогда изменения немедленно отразятся на графическом интерфейсе. Концепция области Windows Form Designer generated code схожа с концепцией WYSIWYG 1 WYSIWYG — "What You See Is What You Get" — "Что видишь, то и получаешь". редакторов HTML -кода, где можно размещать компоненты перетаскиванием, а среда сама генерирует HTML -код.

Метод Main реализует главную точку входа в программу — то есть место , откуда начинается выполнение написанного нами кода:

Отображение нумерации строк кода

При долгой работе над кодом контрастные черные буквы на белом фоне вызывают усталость, поэтому желательно в качестве фонового цвета установить другой — например, серый. Это можно сделать в Options на вкладке Environments/Font and Colors (рис. 1.21).

Вкладка Environments/Font and Colors. Здесь же можно сменить шрифт кода — например, установить Times New Roman


Рис. 1.21. Вкладка Environments/Font and Colors. Здесь же можно сменить шрифт кода — например, установить Times New Roman

В результате режим кода принимает следующий вид (рис. 1.22):

Эргономичный вид режима кода

Свойства проекта

Рассмотрим свойства проекта. В окне Solution Explorer выделяем название проекта — FirstForm, щелкаем правой кнопкой мыши и выбираем в меню пункт Properties. В появившемся окне содержатся все свойства текущего проекта (рис. 1.23).

Окно Common Properties / General

В окне свойств содержится довольно много параметров. Рассмотрим некоторые, наиболее употребительные.

Вкладка Common Properties / General включает в себя следующие свойства:

  • Assembly Name — название сборки (подробнее о сборках см. "Создание пакетов установки" )
  • Output Type — тип компилируемого приложения. По умолчанию для Windows-приложений стоит Windows Application.
  • Default Namespace — название пространства имен в коде. По умолчанию совпадает с именем проекта.
  • Startup Object — название класса, содержащего точку входа в программу – метод Main.
  • Application Icon — путь к файлу с иконкой приложения.
  • Project File — имя файла с информацией о проекте. Находится внутри папки с проектом;
  • Project Folder — путь к файлу с проектом.
  • Output File — название файла, создаваемого при компиляции, — выходного файла. Совпадает с именем проекта.

На вкладке Configuration Properties / Build рассмотрим некоторые свойства (рис. 1.24).

Оглавление

Генерация кода Windows-приложений

Выделим в окне Solution Explorer элемент Form1.vb и из контекстного меню этого элемента выберем пункт View code.

Мы увидим, что в редакторе кода содержатся сведения о том, что класс Form1 является наследником класса System.Windows.Forms.Form.

Заглянув в блок "Windows Form Designer generated code", мы обнаружим там следующий инициализационный код:

Мы обнаружим, что среди полей класса Form1 теперь имеется поле Button1 - наследник класса System. Windows.Forms.Button, а в процедуре InitializeComponent теперь появился код создания экземпляра этого класса и присвоения значений его свойствам Location, Size, Name, Text, TabIndex, а также появился код, отвечающий за размещение и отображение кнопки на форме:

Friend WithEvents Button1 As System.Windows.Forms.Button
<System.Diagnostics.DebuggerStepThrough()>
Private Sub InitializeComponent()
Me.Button1 = New System.Windows.Forms.Button()
Me.SuspendLayout()
'
'Button1
'
Me.Button1.Location = New System.Drawing.Point(16, 32)
Me.Button1.Name = "Button1"
Me.Button1.Size = New System.Drawing.Size(104, 32)
Me.Button1.TabIndex = 0
Me.Button1.Text = "Button1"
'
'Form1
'
Me.AutoScaleBaseSize = New System.Drawing.Size(5, 13)
Me.ClientSize = New System.Drawing.Size(292, 273)
Me.Controls.AddRange(New System.Windows.Forms.Control() )
Me.Name = "Form1"
Me.Text = "Form1"
Me.ResumeLayout(False)

End Sub

Иными словами, когда мы имеем дело с контейнерами визуальных компонентов (каковым является, например, форма), последние становятся полями классов первых, и это находит отражение в сгенерированном коде.

Если мы будем изменять свойства компонентов с помощью окна Properties, соответствующим образом изменится и сгенерированный код.

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

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As _ System.EventArgs) Handles Button1.Click
MessageBox.Show("Button1 was clicked")
End Sub

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

Описав принципы, на которых основана генерация кода приложений при визуальном дизайне, мы можем приступить к рассмотрению компонентов, реализующих интерфейсные элементы, которые можно использовать в приложениях.

Интерфейсные элементы Windows-приложений

Общие свойства, события и методы

  • Cursor, Font, BackColor, ForeColor (так называемые Ambient properties) - свойства, значения которых элемент управления наследует от содержащего его контейнера, если значение этого свойства в явном виде не установлено и не определено в родительском классе;
  • Top, Left, Width, Height, Size, Location - свойства, отвечающие за размер и местоположение элемента относительно контейнера (для формы контейнером в этом случае является экран);
  • Anchor и Dock - свойства, определяющие, согласно каким принципам перемещается и меняет размеры интерфейсный элемент при изменении размеров контейнера;
  • Text, ImeMode, RightToLeft - свойства, определяющие надпись или текст в элементе управления, а также направление текста и способ его редактирования (последние два свойства, впрочем, не слишком актуальны для европейских языков, в том числе и для русского);
  • Enabled, Visible - свойства, определяющие, доступен ли пользователю интерфейсный элемент и отображается ли он;
  • Parent - свойство, указывающее, какой из интерфейсных элементов является контейнером для данного элемента.

Из наиболее важных методов этого класса следует отметить методы BringToFront, SendToBack, Show, Hide, Contains, Refresh, Update, а из событий - события, связанные с перемещением мыши и нажатием на клавиши MouseDown, MouseMove, MouseUp, MouseLeave, MouseHover, MouseEnter, MouseWheel, KeyDown, KeyPress, KeyUp, Click, с применением операции drag-and-drop: DragDrop, DragEnter, DragLeave, DragOver, а также связанные с изменением размера элемента - Resize - и его перерисовкой - Paint.

Все эти свойства, методы и события присутствуют у всех элементов управления, поскольку они являются наследниками класса Control, остальные же свойства, события и методы элементов управления предназначены для использования в приложениях их специфической функциональности.

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

Применение компонентов DataSet, DataGrid и DateTimePicker

В предыдущей части данной статьи мы создали в качестве примера MDI-приложение, отражающее графические файлы и использующее интерфейсные элементы PictureBox, Button, MainMenu. Сегодня мы создадим простейший персональный информационный менеджер, который позволяет ввести сведения о будущих событиях и напоминать о событии в указанное время.

Для этого создадим новый проект и разместим на форме нашего приложения две кнопки и по одному элементу управления TextBox, DateTimePicker и DataGrid. Изменим надписи на кнопках (свойство Text) на «Добавить событие» и «Скрыть форму». Установим свойство FormBorderStyle формы равным FixedSingle - это предотвратит изменение пользователем ее размеров.

С помощью компонента DateTimePicker пользователь может ввести дату и время события, о котором ему следует напомнить. В элементе управления Text1 он может ввести текст напоминания. Однако список событий, содержащий эти данные, нужно где-то сохранить, и разумным представляется сохранить его не просто в памяти, а в файле на жестком диске - в этом случае сведения о будущих событиях не будут потеряны после перезапуска приложения. Пусть это будет XML-документ.

Поскольку список событий - это, по существу, набор данных, воспользуемся компонентом DataSet с вкладки Data в палитре компонентов. Так как этот компонент невизуальный, при перетаскивании его на форму он окажется в нижней части окна дизайнера форм. Компонент DataSet представляет интерфейс к кэшу в памяти, в котором могут содержаться одна или несколько таблиц (in-memory tables), которые могут быть результатом запроса к базе данных, чтения XML-документа, а могут быть созданы в самом приложении «из ничего». В данный момент этот набор данных не содержит ни одной таблицы, и сейчас мы займемся ее созданием.

Для создания таблицы со списком событий выберем только что созданный компонент DataSet1 и щелкнем мышью возле свойства Tables в окне Properties.

В результате получим окно Tables Collection Editor, в котором мы можем нажать клавишу Add и добавить в коллекцию Tables класса DataSet1 новую таблицу, которой присвоим имя Schedule.

Далее следует определить, что представляют собой поля этой таблицы. Для этого в редакторе Tables Collection Editor щелкнем мышью возле свойства Columns, после чего на экране появится окно Columns Collection Editor редактора коллекции полей созданной таблицы. С помощью кнопки Add добавим в нее три поля - EventID, DateTime и Message и установим их типы данных равными System.Int32, System.DateTime и System.String. Установим значение свойства AutoIncrement поля DateTime равным True - это позволит не заботиться о присвоении значений этому полю в коде приложения.

Нажимаем кнопку Close в редакторе Columns Collection Editor. В редакторе Tables Collection Editor, который по-прежнему открыт, установим значение PrimaryKey таблицы Schedule равным имени первой колонки и закроем этот редактор. Структура таблицы готова. Установим свойство DataSource элемента управления DataGrid1 равным DataTable1.

Теперь изменим внешний вид элемента управления DataGrid - как минимум, нам нужно, чтобы ширина колонок соответствовала отображаемым данным. Для этой цели нам следует создать коллекцию стилей отображения таблиц - DataGridTableStyles. Щелкнем по кнопке возле свойства TableStyles элемента управления DataGrid1 и в появившейся диалоговой панели создадим один из элементов такой коллекции. Установим его свойство MappingName равным имени отображаемой таблицы - Schedule; теперь эта таблица будет иметь такой вид, который описан в данном стиле. В этой же диалоговой панели можно выбрать и другие параметры отображения данных (например, цвет текста, фона, обрамления, линий и т.д.). В общем случае элемент управления DataGrid может быть связан с компонентом DataSet, содержащим несколько таблиц, - тогда можно отображать разные таблицы различными стилями.


Помимо определения внешнего вида таблицы как таковой, следует позаботиться и о ее колонках. Для этой цели нам необходимо создать коллекцию стилей колонок таблицы GridColumnStyles, щелкнув по кнопке рядом с названием соответствующего свойства.

Создадим три элемента этой коллекции - по одному на каждое поле таблицы - и установим их свойства Width (ширина) и HeaderText (заголовок) в соответствии с данными, содержащимися в данной таблице. Установим также значение свойства Format второй колонки равным «f» - в этом случае данные типа DateTime отображаются полностью и в соответствии с региональными настройками данного компьютера.

В результате элемент управления DataGrid1 приобретет вид, изображенный на следующем рисунке:

Теперь нам следует позаботиться о сохранении данных в файле (пусть он называется c:\Schedule.xml) и считывании их из файла. Представляется вполне разумным считывать файл при загрузке формы, поэтому мы создадим обработчик события Load формы:

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As _
System.EventArgs) Handles MyBase.Load

Try
DataSet1.ReadXml("c:\Schedule.xml")
Catch
DataSet1.WriteXml("c:\Schedule.xml")
MessageBox.Show("Файл с расписанием не найден. " & _
" Создан новый")
End Try

End Sub

В этом фрагменте кода мы считываем файл c:\Schedule.xml, если он существует, и создаем новый (пустой), если он не найден.

Имеет смысл также сохранять файл с данными о событиях при добавлении в него новых записей. Поэтому реализуем соответствующий код в обработчике события Click кнопки с надписью «Добавить событие»:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As _
System.EventArgs) Handles Button1.Click

Dim DR As DataRow = DataSet1.Tables(0).NewRow()
DR(1) = DateTimePicker1.Value
DR(2) = TextBox1.Text
DataSet1.Tables(0).Rows.Add(DR)
DataSet1.WriteXml("c:\Schedule.xml")
DataGrid1.Refresh()

End Sub

В этом фрагменте кода мы создаем новый объект DataRow и присваиваем его второму и третьему полю значения, считанные из элементов управления DateTimePicker1 и TextBox1 (значения же первого поля будут присваиваться автоматически, поскольку мы указали, что оно автоинкрементное). Затем добавляем этот объект DataRow в коллекцию строк созданной ранее таблицы, сохраняем ее в XML-файле и обновляем содержимое элемента управления DataGrid.

Далее изменим внешний вид и поведение элемента управления DateTimePicker1, позволив пользователю выбирать отдельно год, месяц, день, час и минуты. Для этого установим свойство ShowUpDown этого элемента управления равным True и в уже созданный обработчик события Load формы добавим фрагмент кода (он выделен жирным шрифтом), в котором значение свойства Format этого элемента управления устанавливается равным Custom, а значение свойства CustomFormat - равным строке "MMMM dd, yyyy - dddd, hh:mm", что позволит вводить в этом элементе год, месяц, день, час и минуты и отображать день недели. Заодно запретим вводить значения времени, относящиеся к прошлому:

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As _
System.EventArgs) Handles MyBase.Load

DateTimePicker1.MinDate() = Now()
DateTimePicker1.Format = DateTimePickerFormat.Custom
DateTimePicker1.CustomFormat = "MMMM dd, yyyy - dddd, hh:mm"
Try
DataSet1.ReadXml("c:\Schedule.xml")
Catch
DataSet1.WriteXml("c:\Schedule.xml")
MessageBox.Show("Файл с расписанием не найден. Создан новый")
End Try

End Sub

Вот как примерно выглядит XML-файл со списком событий после их ввода с помощью созданного приложения:

<?xml version="1.0" standalone="yes"?>
<ScheduleDataSet>
<Schedule>
<EventID>1</EventID>
<DateTime>2002-04-21T16:15:00.0000000+04:00</DateTime>
<Message>Тестовое событие 1</Message>
</Schedule>
<Schedule>
<EventID>2</EventID>
<DateTime>2002-04-21T18:42:24.0000000+04:00</DateTime>
<Message>Тестовое событие 2</Message>
</Schedule>
<Schedule>
<EventID>3</EventID>
<DateTime>2002-04-21T18:47:03.0000000+04:00</DateTime>
<Message>Выключить сервер на ночь</Message>
</Schedule>
<Schedule>
<EventID>4</EventID>
<DateTime>2002-04-21T18:49:01.2592912+04:00</DateTime>
<Message>Позвонить Иванову по поводу завтрашнего собрания</Message>
</Schedule>
<Schedule>
<EventID>5</EventID>
<DateTime>2002-04-21T19:02:34.4686288+04:00</DateTime>
<Message>Тестовое событие 3</Message>
</Schedule>
</ScheduleDataSet>

Итак, мы научились вводить описания событий, отображать их в DataGrid и сохранять в XML-файле. Наша следующая задача - добавить к приложению возможность оповещать о них пользователя. Этим мы займемся в следующем разделе.

Применение компонентов Timer и NotifyIcon

Самый простой (хотя и не самый эффективный) способ оповещения пользователя о событии - это периодический просмотр списка событий с целью выяснения, не наступило ли время оповестить о каком-либо из них. Для выполнения некоторых периодических действий можно использовать компонент Timer - это невизуальный компонент, обладающий регулярно повторяющимся событием Tick и свойством Interval, равным числу миллисекунд, через которые наступает это событие.

Добавим компонент Timer в наше приложение и установим его свойство Interval равным 60 000, что соответствует одной минуте, а свойство Enabled равным True.

Создадим обработчик события Tick:

Private Sub Timer1_Tick_1(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Timer1.Tick

Dim DR As DataRow
Dim DT As New DateTime()
For Each DR In DataSet1.Tables(0).Rows
DT = CType(DR(1), DateTime)
If (Now() > DT And Now() < DT.AddMinutes(1)) Then
MessageBox.Show(DR(2))
End If
Next

End Sub


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

Для этой цели мы можем использовать компонент NotifyIcon, позволяющий создать такую пиктограмму. Это невизуальный компонент, основными свойствами которого являются Icon (графический файл с пиктограммой - в нашем примере это изображение будильника), Text (надпись на ярлычке с подсказкой) и ContextMenu.

Прежде чем установить значение свойства ContextMenu этого элемента, следует перенести в приложение компонент ContextMenu (он также невизуальный). Выбрав из контекстного меню созданного нами компонента ContextMenu1 пункт Edit Menu, мы можем отредактировать его, добавив к нему необходимые пункты, например «Список событий» и «Закрыть».

Создадим обработчики этих событий:

Private Sub MenuItem4_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MenuItem4.Click
Application.Exit()
End Sub

Private Sub MenuItem1_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MenuItem1.Click
Me.Show()
End Sub

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

Private Sub Button2_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles Button2.Click
Me.Hide()
End Sub

Далее свойству ContextMenu компонента NotifyIcon можно присвоить значение ContextMenu1. Теперь при запуске приложения и скрытии формы можно управлять приложением с помощью контекстного меню, появляющегося при щелчке правой клавишей мыши над соответствующей пиктограммой.

Таким образом, мы создали приложение, напоминающее пользователю о событиях, если он предварительно ввел сведения о них.

Заключение

Выполнение

1. Загрузить Microsoft Visual Studio .

В результате будет создано окно с активной вкладкой Start Page (рисунок 1).

Окно Microsoft Visual Studio 2010

Рисунок 1. Окно Microsoft Visual Studio

2. Создание приложения типа Windows Forms Application

Чтобы создать новый проект (решение) на языке C++ , нужно выбрать последовательность команд (рис. 2):

Система Microsoft Visual Studio предлагает разные виды шаблонов приложения для программирования на языке C++ (рис. 2).

MS Visual Studio 2010. Вызов команды создания нового проекта

Рисунок 2. Вызов команды создания нового проекта

3. Основные элементы оконного интерфейса для работы с программой

В результате окно Microsoft Visual Studio примет вид как показано на рисунке 4.

В окне, в центре отображается основная форма приложения. На этой форме можно размещать компоненты. Компоненты размещаются на панели Toolbox (левая часть экрана).

Свойства формы или компонента отображаются в утилите Solution Explorer (правая часть экрана). Изменяя эти свойства, можно влиять на вид формы, поведение формы, реализовывать обработчики событий формы и прочее.

MS Visual Studio. Шаблон Windows Forms. Основные элементы окна приложения

Рисунок 4. Основные элементы окна приложения

4. Вызов режима ввода кода

На данный момент активным есть режим проектирования формы. Чтобы перейти в режим набора текста программы, нужно вызвать команду Code с меню View (рисунок 5):

Visual C++. Шаблон Windows Forms. Команда перехода в режим набора текста программы

Рисунок 5. Команда перехода в режим набора текста программы

Другой вариант вызова команды перехода в режим набора текста, это клик на соответствующей кнопке в Solution Explorer (рисунок 6).

Visual C++. Шаблон Windows Forms. Кнопка перехода в режим набора текста программы

Рисунок 6. Кнопка перехода в режим набора текста программы

В результате отобразится текст программы.

C++. MS Visual Studio. Режим просмотра текста программы

Рисунок 7. Режим просмотра текста программы

При создании проекта, система Microsoft Visual Studio генерирует программный код, который сохраняется в различных файлах.

Объясним некоторые фрагменты кода в тексте программы.

В вышеприведенном тексте создается пространство имен MyApp01 с помощью оператора

В пространстве имен MyApp01 создается класс с именем Form1. Этот класс соответствует главной форме приложения Form1.

Класс содержит конструктор, который вызывает метод

В методе InitializeComponent() создается компонента-форма (переменная components ), которая есть контейнером. Это означает, что на форме могут размещаться другие компоненты (кнопки, метки, поля ввода и т.д.). Также в методе InitializeComponent() настраиваются параметры формы: название заголовка, размер (300 * 300 пикселей), шрифт по умолчанию.

Form1() уничтожает форму (переменная components ) с помощью оператора delete .

6. Файлы, которые создаются в проекте

После создания проекта типа Windows Forms Application система Microsoft Visual Studio создает несколько файлов.

Visual C++. Шаблон Windows Forms. Файлы C++, которые создаются в проекте типа

Рисунок 8. Файлы C++ , которые создаются в проекте типа Windows Forms Application

7. Запуск проекта на выполнение

Для запуска проекта на выполнение используется команда Start Debuggin из меню Debug (клавиши F5).

Читайте также: