1.3. Применение элементов управления и компонентов

Наряду с формами пользовательский интерфейс составляют элементы управления (или, как их еще называют, элементы управления Windows Forms). Это графические инструменты, которые формируют либо дополняют функциональность приложения. Их перетаскивают на форму с инструментальной панели Toolbox. Некоторые из них, например Button и TextBox, служат для получения ввода от пользователя и выполняют базовые задачи по взаимодействию с пользователем. Кроме того, предусмотрены специализированные компоненты, реализующие более сложные операции по взаимодействию с другими частями приложения. Компоненты похожи на элементы управления: это тоже готовые блоки кода, инкапсулирующие определенную функциональность. Основное отличие между ними в том, что элементы управления видимы, а компоненты — нет (по крайней мере в период выполнения). На этом занятии вы узнаете, как применять элементы управления и компоненты при создании пользовательского интерфейса.

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

Инструментальная панель Toolbox в Visual Studio содержит множество готовых элементов управления для разработки собственных решений. Большинство реальных функций пользовательского интерфейса реализовано соответствующими элементами управления, размещенными на формах. Возьмем для примера элемент управления, представляющий кнопку (Button). Его размещают на форме и, как правило, снабжают заголовком, поясняющим его назначение. Когда пользователь щелкает кнопку, вызывается обработчик ее события click, исполняющий некоторый код.

Элементы управления Label (надпись) и PictureBox (изображение) предназначены для отображения данных, a TextBox (текстовое поле) и ListBox (список) способны как отображать данные, так и принимать их от пользователя.

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

Как добавить элемент управления к приложению

1. Щелкните нужный элемент управления на панели инструментов.

2. Щелкните форму в том месте, куда его хотите поместить. Не отпуская левой кнопки мыши, установите требуемый размер элемента управления, перетащив его границы.

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

3. Откорректируйте размер и положение элемента управления мышью или клавишами управления курсором.

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

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

1. Щелкните элемент управления правой кнопкой и выберите из контекстного меню Properties. Возможны другие варианты: щелкните нужный элемент управления левой кнопкой и нажмите F4 либо выберите команду Properties из меню View.

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

Как одновременно отредактировать свойства для нескольких элементов управления во время разработки

1. Выделите нужные элементы управления на форме. Для этого щелкните форму и, не отпуская кнопки мыши, обведите их либо нажмите клавишу Ctrl и, не отпуская ее, щелкните по очереди необходимые элементы управления. Общие для всех выделенных элементов управления свойства отобразятся в окне Properties.

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

Панель Toolbox также содержит компоненты, которые, как и элементы управления, представляют собой предварительно скомпилированные блоки, инкапсулирующие определенную функциональность; их можно включать в собственные приложения. Главное отличие компонентов и элементов управления в том, что компоненты не видны в пользовательском интерфейсе приложения (например компонент Timer, генерирующий события через заданный интервал времени). У компонентов нет графического интерфейса. Поэтому те, что размещаются на форме при помощи дизайнера, попадают не на поверхность формы, а в область компонентов (component tray). Она находится внизу окна дизайнера и предоставляет графический интерфейс для манипулирования свойствами компонентов, не имеющих собственного интерфейса. Компоненты добавляют к приложению так же, как элементы управления, а для редактирования их свойств во время разработки применяется окно Properties.

Установка порядка передачи фокуса при нажатии клавиши Tab

Клавишей Tab пользователи приложения передают фокус ввода от одного элемента управления к другому. Чтобы задать последовательность перехода фокуса между элементами управления, следует определить порядок передачи фокуса при нажатии клавиши Tab (tab order) с помощью свойства Tablndex. Изменяя его, вы меняете порядок передачи фокуса: элементы управления с меньшим значением свойства Tablndex первыми получают фокус и передают его элементу управления с большим значением этого свойства. Если у нескольких элементов управления значение свойства Tablndex совпадает, первым получает фокус элемент управления переднего плана или ближайший к нему элемент. Чтобы переместить элемент управления, размещенный на форме, на передний или на задний план, щелкните его правой кнопкой и выберите соответственно Bring To Front или Send To Back.

В Visual Studio предусмотрен графический инструмент для установки порядка передачи фокуса. Чтобы вызывать его, выберите из меню View элемент Tab Order - каждый элемент в окне дизайнера будет помечен прямоугольником с числом внутри. Чтобы задать порядок передачи фокуса, достаточно щелкнуть элементы управления в том порядке, в котором они должны получать фокус.

Примечание Некоторые элементы управления, такие, как PictureBox, не могут получать фокус, поэтому у них нет свойства Tablndex.

Как установить порядок передачи фокуса при помощи свойства Tablndex

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

2. Для выбранного элемента управления установите в окне Properties требуемое значение свойства Tablndex — фокус будет передаваться между элементами управления в порядке возрастания значений Tablndex.

Как установить порядок передачи фокуса через графический интерфейс Visual Studio

1. В меню View выберите элемент Tab Order — все элементы управления будут отмечены прямоугольниками с цифрами, отражающими текущий порядок передачи фокуса.

2. Щелкните элементы управления в желаемом порядке передачи фокуса.

3. Еще раз щелкните в меню View элемент Tab Order, чтобы возобновить редактирование формы.

Вложенные элементы управления и контейнеры

Некоторые элементы управления, называемые контейнерами (container controls), способны содержать другие элементы управления. К контейнерам относятся Panel, GroupBox и TabComrol, форму тоже можно считать контейнером. Контейнеры позволяют упорядочить элементы управления, размещенные на формах. Например, логически связанные переключатели можно объединить средствами GroupBox.

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

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

Изменение свойств контейнера отражается на элементах управления, которые он содержит. Например, назначив свойства Enabled элемента управления GroupBox ъ false, вы автоматически сделаете недоступными все вложенные в него элементы управления. Свойства контейнера, определяющие внешний вид, такие, как BackColor, ForeColor, Visible и Font, также действуют на вложенные элементы управления. Это упрощает оформление фрагментов пользовательского интерфейса в едином стиле. Свойства Anchor и Dock вложенных элементов управления также зависят от свойств контейнера.

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

Применение элементов управления Group Box и Panel

Элементы управления GroupBox и Panel очень похожи: оба позволяют объединять другие элементы управления в логические и физические группы. Можно сказать, что эти элементы физически делят форму на отдельные «подформы». Изменение свойств Panel или GroupBox действует на все вложенные в них элементы управления. Во время разработки элементы управления, вложенные в Panel или GroupBox, можно перемещать все вместе, а во время выполнения — одновременно деактивировать их, установив свойство Enabled контейнера в false.

У GroupBox есть заголовок, позволяющий аннотировать группу вложенных в него элементов управления, текст заголовка определяется свойством Text. У Panel заголовка нет, зато он поддерживает прокручивание содержимого. Чтобы включить полосы прокрутки для этого элемента, установите его свойство AutoScroll в true.

Применение элемента управления TabControl

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

Свойство TabPages — важнейшее у элемента управления TabControl. Оно представляет собой набор элементов управления TabPage, каждый из которых обладает собственным набором свойств. Набор — это логическая группа объектов, похожая на массив; подробнее о наборах рассказано в следующей главе. Чтобы получить доступ к любому из объектов TabPage, достаточно щелкнуть вкладку, которую он представляет (рис. 2-6).

Рис. 2-6. Элементы управления TabPage в составе TabControl

Отдельные элементы управления TabPage весьма напоминают панели (Panel): они также поддерживают прокрутку и создают внутри формы- контейнера «вложенные формы», в свою очередь способные быть контейнерами для других элементов управления. Чтобы включить прокрутку содержимого для TabPage, необходимо установить его свойство Autoscroll в true.

Элементы управления TabPage добавляют к TabControl, устанавливая его свойство TabPages. При выборе в окне дизайнера свойства TabPages открывается редактор наборов, позволяющий добавлять к TabControl элементы управления TabPage и устанавливать свойства для любого из них. Чтобы разместить на добавленной вкладке необходимые элементы управления, щелкните эту вкладку в окне дизайнера. Во время выполнения пользователь сможет открывать нужные вкладки, щелкая их ярлычки.

Создание обработчиков событий элементов управления

События представляют происшествия в ходе исполнения программы. Все элементы управления способны генерировать разнообразные события, отражающие те или иные обстоятельства взаимодействия с пользователем, Рассмотрим знакомый всем пример — щелчок мыши. Когда он происходит, приложение генерирует событие Button.Click, ищет методы, обрабатывающие это событие и, если таковые обнаружатся, исполняет их. Такие методы называются обработчиками события (event handlers).

Обработчики событий создаются для исполнения некоторых действий в ответ на действия пользователя. Для каждого элемента управления задано событие по умолчанию, в качестве которого выбрано то, что генерируется этим элементом управления чаще всего. Например, событие по умолчанию для элемента управления Button — Click, для Checkbox — CheckChanged. Создать обработчик события по умолчанию проще простого — для этого достаточно дважды щелкнуть элемент управления в окне дизайнера.

Создание обработчика события по умолчанию для элемента управления

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

2. Дополните этот шаблон нужным кодом.

Помимо события по умолчанию, элементы управления способны генерировать множество других полезных событий. Например, событие MouseOver позволяет изменять текст, отображаемый элементом управления, когда над ним находится указатель мыши; события Validate и Validating обеспечивают поддержку проверки введенных пользователем данных — и это далеко не все. Целый ряд других событий расширяет возможности пользовательского интерфейса и представляет пользователям разнообразную информацию. Как правило, по названию события легко догадаться, в каких случаях событие генерируется.

Обработчики событий элементов управления пишут так же, как обработчики событий формы.

Создание обработчика события в проекте Visual C#

1. В режиме Design щелкните элемент управления, для которого хотите создать обработчик события.

2. В окне Properties шелкните кнопку Events — откроется список доступных событий.

3. Найдите нужное событие и дважды щелкните его.

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

4. Кроме того, можно назначить для обработки события готовый метод, выбрав его из списка, расположенного справа от списка событий.

1.4. Меню

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

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

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

Конструирование меню во время разработки

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

Применение компонента MainMenu

Компонент MainMenu позволяет выполнять следующие действия во время разработки:

• создавать новые меню;

• добавлять к существующим меню новые элементы;

• изменять свойства меню и отдельных элементов меню через окно Properties;

• создавать обработчики Click и других событий элементов меню.

Все, что нужно сделать для создания меню, — это поместить на форму компонент MainMenu, который появится в области компонентов. На форме же появится полоска с прямоугольным полем, содержащим надпись «Туре Неrе». Введите в поле текст, чтобы создать новый элемент меню. После добавления первого элемента снизу и справа от него появляются новые поля. Вложенные элементы меню создаются аналогично: достаточно ввести имя элемента в поле, расположенное справа от родительского элемента. Вид меню в период разработки почти не отличается от такового во время выполнения. На рис. 2-9 показано создание меню при помощи компонента MainMenu.

Рис. 2-9. Создание меню при помоши компонента MainMenu

При добавлении к меню нового элемента дизайнер создает экземпляр объекта Menultem. У каждого объекта Menultem имеются собственные свойства и члены, которые устанавливают в окне Properties. Свойство Text определяет текст данного элемента меню, отображаемый во время выполнения. В это свойство автоматически заносится текст, введенный в поля компонента MainMenu во время разработки.

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

Создание главного меню во время разработки

1. Поместите на форму компонент MainMenu, перетащив его с Toolbox либо дважды щелкнув его значок на инструментальной панели — MainMenu появится в области компонентов.

2. В окне дизайнера введите в поле, расположенное на полосе меню формы, имя первого элемента меню. Компонент MainMenu откроет новые поля — укажите в них имена дополнительных элементов меню. Продолжайте, пока не создадите все элементы меню.

3. В окне Properties задайте необходимые значения для свойств элементов меню.

4. Проверьте окно свойств формы. Убедитесь, что свойство Menu определяет именно то меню, которое вы только что создали. Если у формы несколько меню, отображаться будет только то, которое задано этим свойством.

Разделение элементов меню

При необходимости элементы меню отделяют друг от друга горизонтальной линией — разделителем. Разделители позволяют упорядочить меню, которое состоит из множества элементов, разбив его на логические группы (рис. 2-10).

Чтобы добавить к меню разделитель, введите в поле MainMenu дефис вместо имени — во время выполнения он превратится в разделитель.

Рис. 2-10. Разделитель в меню

Создание разделителя в меню

1. Выберите элемент меню, на место которого хотите поместить разделитель.

2. Введите в его поле дефис — во время выполнения на месте этого элемента меню будет отображаться разделитель.

Доступ к меню с клавиатуры

Доступ к элементам меню с клавиатуры осуществляют, назначая им клавиш доступа (access keys) и быстрые клавиши (shortcut keys).

Клавиши доступа

Нажимая одновременно Alt и букву, назначенную клавишей доступа, вы быстро откроете меню. Воспользовавшись клавишей доступа, можно также выбрать команду из открытого меню. Например, во многих программах Alt+F открывает меню File.

Определить, какая буква назначена в качестве клавиши доступа, просто: нужная буква подчеркнута в названиях элементов меню.

Разрешается назначать одинаковые клавиши для доступа к элементам меню, если последние расположены в разных группах. Например, сочетание Alt+C применяют для доступа к командам Close из группы File и Сору из группы Edit. Однако не стоит назначать одинаковые клавиши доступа к элементам меню из одной группы, например Alt+C для команд Cut и Сору из группы Edit. Если пренебречь этой рекомендацией, клавиша доступа будет поочередно активировать элементы меню, для которых она назначена, но выбрать какой-либо из них удастся только нажатием Enter.

Как назначить клавишу доступа для элемента меню

1. В окне дизайнера щелкните элемент меню, для которого хотите назначить клавишу доступа.

2. Введите знак «&» перед буквой, соответствующей клавише доступа.

Быстрые клавиши

Быстрые клавиши ускоряют доступ к командам меню. Эта возможность экономит время при вызове часто используемых команд. Быстрых клавиш может быть одна или несколько, например Fl, Insert, Delete или Ctrl+A, Ctrl+Fl, Ctrl+Shift+X. Быстрые клавиши отображаются справа от имени элемента меню, для которого они назначены. Если для некоторого элемента меню свойство ShowShortcut установлено в false, то быстрые клавиши для него не отображаются.

Назначение быстрых клавиш

1. Выберите элемент меню, для которого хотите назначить быстрые клавиши,

2. Щелкните свойство Shortcut в окне Properties.

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

События элементов меню

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

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

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

Создание контекстного меню

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

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

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

Создание контекстного меню

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

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

3. В окне Properties задайте необходимые значения для свойств элементов меню.

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

Изменение меню во время выполнения

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

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

Активация и деактивация команд меню

У каждого элемента меню есть свойство Enabled. Установив его в false, вы деактивируете элемент меню, запрещая ему реагировать на действия пользователя, в том числе на клавиши доступа и быстрые клавиши. Деактивированные элементы меню выделены бледно-серым цветом. Следующий пример показывает, как деактивировать элемент меню во время выполнения.

MenuItem1.Enabled = false;

Отображение элементов меню с флажками

Свойство Checked можно снабдить элемент меню флажком, который отображается справа от имени элемента. Флажки позволяют пометить выбранные параметры.

Следующий пример демонстрирует, как пометить элемент меню флажком и снять флажок:

// Пометить элемент меню флажком

MenuItem1.Checked = true;

// Снять флажок у элемента меню

MenuItem1.Checked = false;

Отображение элементов меню с переключателями

Вместо флажка можно отображать переключатель. Для этого свойство RadioCheck элемента меню следует установить в true, в результате справа от имени элемента меню отобразится не флажок, а переключатель. Если же свойство Checked установлено в false, ни фдажок, ни переключатель не отображаются. Заметьте, что переключатели часто применяют для выбора взаимоисключающих параметров, например цвета фона. Чтобы при установке одного переключателя остальные сбрасывались, вам придется самостоятельно написать соответствующий код.

Как сделать элемент меню невидимым

Чтобы сделать элемент меню невидимым, установите его свойство Visible в false. Это свойство позволяет изменять меню во время выполнения в зависимости от некоторых условий. Вот как это делается:

menuItem1.Visible = false;

Заметьте, что элементы, сделанные во время выполнения невидимыми, удаляются из меню, а их вложенные элементы становятся недоступными.

Создание элементов меню во время выполнения

Разрешается динамически добавлять к меню новые элементы во время выполнения. Например, к меню File можно добавить элементы, отображающие путь к недавно открывавшимся файлам. У новых элементов меню нет обработчиков событий, однако можно задать метод, обрабатывающий событие Click, передав ею конструктору элемента меню как аргумент. Этот метод должен быть процедурой ( void) с сигнатурой обработчика события. Вот примеры подходящих методов:

public void ClickHandler (object sender, System.EventArgs e)

{

// Реализация опущена

}

Создание элементов меню во время выполнения

1. Объявите новый элемент меню и создайте его экземпляр. При желании можно сразу же задать метод-обработчик события Click:

// Зтот пример предполагает наличие метода myClick

// с сигнатурой обработчика события

Menultern myltem;

myltem = new Menu Item("Item 1", new EventHandler(myClick));

2. Добавьте новый элемент к набору элементов расширяемого меню.

MainMenul.Menu!tems.Add{myltem);

... _. . . ...... __ и чУ