Элементы управления для разработки «иконографичных» пользовательских интерфейсов программных приложений с использованием интегрированной среды разработки Visual Studio.Net

Рассмотрим элементы управления для разработки пользовательских интерфейсов программных приложений в среде разработки Visual Studio.Net. Разработка программных приложений основана на применении визуального конструктора форм (Form Designer). Создание пользовательского интерфейса происходит с помощью перетаскивания элементов управления из панели элементов управления на форму и их размещения там, где они должны отображаться во время работы программного приложения. Далее рассматриваются элементы управления, наиболее часто применимые для разработки пользовательских интерфейсов в среде разработки Visual Studio.Net.

Элемент управления Форма (Form) используется как контейнер для других элементов управления и компонентов. При перетаскивании значков с панели элементов управления на форму Visual Studio генерирует код создания объекта и инициализации его основных свойств. Автоматически сгенерированный программный код автоматически обновляется при изменении свойств какого-либо элемента управления или компонента в интегрированной среде разработки (IDE). Удаление элемента управления или компонента с формы приводит к удалению соответствующего сгенерированного кода.

Чтобы создать программное приложение Windows Forms, необходимо сначала создать объект формы Windows (Form), задать его свойства, добавить на форму элементы управления, задать их свойства и реализовать обработчики событий (методы), которые реагируют на события, генерируемые элементами управления (рис. 98).

С помощью Visual Studio.Net [1, 11] могут быть настроены внешний вид и поведение формы в процессе выполнения программного приложения:

кнопка по умолчанию, которая срабатывает при нажатии клавиши «Enter»;

положение формы на экране устройства;

кнопка, которая срабатывает при нажатии клавиши «Esc»;

стиль границы формы и наличие заголовка формы и кнопок в верхнем правом углу формы (кнопки свертывания, развертывания и закрытия формы);

Форма «Цвет и линии» и расположенные на ней элементы управления Button, ListBox и Label

Рисунок 98 Форма «Цвет и линии» и расположенные на ней элементы управления Button, ListBox и Label

шрифт текста, выводимого на форме;

шрифт по умолчанию для элементов управления, добавляемых на форму;

текст в заголовке формы;

цвет фона формы;

события загрузки формы, закрытия формы с выгрузкой всех ресурсов, задействованных для хранения формы;

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

Элемент управления «кнопка» (Button) дает возможность «щелкать» по ней левой (правой) клавишей мыши (нажимать пальцем). Элемент управления Button присутствует практически в каждом диалоговом окне Windows. Результатом нажатия является выполнение определенной команды. Такой же результат имеет и нажатие клавиши «Enter» клавиатуры, если кнопка является активным элементом. Стандартная кнопка имеет прямоугольную форму (рис. 98, кнопка «Рисовать», рис. 103, кнопка «Проверить введенный пароль»).

Кроме стандартного (прямоугольного) внешнего вида кнопка может иметь любой нестандартный вид (рис. 99). Нестандартный вид кнопки настраивается программным путем.

Пользовательский интерфейс программного приложения с бегущей строкой (строка «Пользователь») и кнопкой, имеющей нестандартную, круглую форму

Рисунок 99 Пользовательский интерфейс программного приложения с бегущей строкой (строка «Пользователь») и кнопкой, имеющей нестандартную, круглую форму

В основном кнопка служит для решения трех видов команд:

закрытие диалогового окна (кнопки «ОК» и «Cancel»);

выполнение каких-либо действий с данными, введенными в диалоговом окне;

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

Для использования элемента «кнопка» в пользовательском интерфейсе могут быть настроены:

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

доступность кнопки (кнопка становится затемненной, и щелчок по ней не вызывает никаких последствий);

изображение внутри кнопки, отображаемое во время выполнения программного приложения, и его расположение внутри кнопки;

параметры и цвет шрифта, цвет фона, расположение текста внутри формы.

Элемент управления «флажок» (CheckBox) [1, 11] представляет собой квадратик небольшого размера, который может быть пустым или содержит пометку. Когда пользователь щелкает на «флажке», чтобы установить его, в квадратике появляется пометка. Повторный щелчок на установленном флажке снимает пометку. Обычно «флажок» используется в пользовательском интерфейсе для отражения бинарных значений каких-либо параметров («Тше/False», «Yes/No», «On/Off»). При этом «флажок» также можно настроить для переключения между тремя состояниями (установленным, снятым и неопределенным). Любое количество флажков, находящихся в пользовательском интерфейсе, может одновременно находиться в установленном состоянии. Обычно элемент управления «флажок» используется в сочетании с другими «флажками» для отображения в пользовательском интерфейсе списка вариантов выбора (рис. 100). Пользователи могут отметить поле «флажка», если они хотят выбрать данный параметр, или снять отметку, если они хотят убрать этот параметр. Для использования элемента «флажок» в пользовательском интерфейсе могут быть настроены:

внешний вид элемента управления (традиционный вид или в виде кнопки, которая выглядит нажатой при установке флажка);

поясняющая надпись к элементу управления, название и параметры шрифта, цвет шрифта и фона;

количество состояний, в которых может находиться «флажок» (два или три состояния);

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

состояние «флажка» (установленное, снятое или неопределенное). Если используются три состояния «флажка» и задано неопределенное его состояние, то «флажок» внутри квадрата окрашивается в серый цвет.

Элементы управления «переключатель» (класс RadioButton) могут находиться в одном из двух состояний (установленном и снятом). «Переключатели» обычно объединяются в группы, в которых в любой момент времени может быть установлен только один переключатель (рис. 101). Использование элементов управления CheckBox, NumericUpDown, DomainUpDown в пользовательском интерфейсе

Рисунок 100 Использование элементов управления CheckBox, NumericUpDown, DomainUpDown в пользовательском интерфейсе

Группа элементов управления «переключатель»

Рисунок 101 Группа элементов управления «переключатель»

При установке одного переключателя в группе остальные переключатели снимаются. Таким образом, переключатели используются для представления наборов взаимоисключающих вариантов выбора (то есть наборов, в которых одновременное выделение нескольких вариантов выбора невозможно). Все «переключатели», отвечающие за выполнение одной функции, добавленные в форму, образуют одну группу. Чтобы разделить «переключатели» на несколько групп необходимо рассортировать их по различным контейнерам, в качестве которых могут выступать элементы управления «контейнер» (GroupBox или Panel). Для использования элемента «переключатель» в пользовательском интерфейсе могут быть настроены:

поясняющая надпись к элементу управления, название и параметры шрифта, цвет шрифта и фона;

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

Элементы управления «надпись» (Label) [1, 11] используются для отображения в пользовательском интерфейсе текстовой информации (рис. 102, надпись «Нажмите сначала кнопку в данной функциональной области», рис. 103, надпись «Введите пароль в течение 10 секунд»). Элемент управления «гиперссылка» используется так же, как и элемент управления «надпись». При этом элемент управления может отображать гиперссылку (рис. 102, гиперссылка «URL-адрес сайта»). Для использования элемента «надпись» в пользовательском интерфейсе могут быть настроены: шрифт текста надписи, положение текста внутри элемента управления, размер и цвет шрифта;

расположение элемента управления на форме и его размеры; стиль рамки вокруг «надписи» отображения элемента управления (нет рамки, с рамкой, «утопленный» в форму, плоский до подведения курсора мыши и приподнятый при подведении курсора);

изображение и его расположение внутри элемента управления.

Для использования элемента «гиперссылка» в пользовательском интерфейсе могут быть настроены:

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

Элементы управления «надпись» и «гиперссылка»

Рисунок 102 Элементы управления «надпись» и «гиперссылка»

Элемент управления «текстовое поле» (класс TextBox) [1, 11] представляет собой область пользовательского интерфейса, в которую пользователь может вводить текст (рис. 103). Также в эту область может выводиться информация.

Элементы управления Button, TextBox, Label

Рисунок 103 Элементы управления Button, TextBox, Label

При использовании элемента «текстовое поле» для построения пользовательского интерфейса могут производиться следующие настройки:

задание многострочности элемента управления;

настройка вида рамки, окружающей элемент управления (без рамки, с рамкой);

настройка внешнего представления элемента управления (плоский, объемный), его размеров и расположения на форме;

возможность использования в режиме ввода пароля;

доступность (элемент управления становится серым и не реагирует на действия пользователя);

наличие полос прокрутки (вертикальной и горизонтальной);

шрифт, размер шрифта, цвет текста, положение текста внутри элемента управления, цвет фона.

Элемент управления «улучшенное текстовое окно» (RichTextBox) [1, 11] имеет ряд свойств, общих с TextBox, но при этом различий значительно больше. В то время как элемент управления TextBox обычно используется для получения коротких текстовых строк от пользователя, элемент управления RichTextBox служит для отображения и ввода форматированного текста (рис. 104). Это достигается использованием стандарта форматированного текста, получившего название Rich Text Format (расширенный текстовый формат или RTF).

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

Рисунок 104 Использование элемента управления RichTextBox

При использовании элемента «улучшенное текстовое окно» для построения пользовательского интерфейса в дополнение к настройкам «текстового поля» могут производиться следующие настройки:

возможность отмены последней выполненной операции и повторного выполнения последней отмененной операции;

возможности работы с текстом (выделение, сохранение форматирование выделенных фрагментов текста).

Элементы управления «контейнер» (GroupBox и Panel) [1, 11] предназначены для группирования элементов управления в пользовательском интерфейсе (в соответствии со сходной функциональностью или выполнением общих функций в пользовательском интерфейсе, рис. 105).

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

Рисунок 105 Использование элементов управления GroupBox и Panel

Все элементы управления, размещенные в GroupBox или Panel, закрепляются за ними и далее перемещаются вместе с контейнером. Кроме этого, контейнеры GroupBox и Panel могут использоваться для одновременного отображения или скрытия набора элементов (изменение видимости контейнера также изменяет видимость всех содержащихся в нем элементов управления). Различие между этими двумя элементами управления заключается в том, что контейнер GroupBox может иметь заголовок и не поддерживает полосы прокрутки, a Panel может иметь полосы прокрутки и не содержит заголовка. В элементе управления Panel в случае, если его размеры слишком малы для отображения всех содержащихся в нем элементов управления, могут отображаться полосы прокрутки. Полосы прокрутки могут использоваться для просмотра всех элементов управления в контейнере Panel (в режиме конструктора и во время выполнения). Для построения пользовательских интерфейсов может быть использовано размещение контейнеров Panel и GroupBox внутри других контейнеров Panel и GroupBox.

Элемент управления «графическое поле» (PictureBox) [1, 11] предназначен для вывода изображений, в которых поддерживаются разные форматы графики: BMP, PNG, GIF и JPEG (рис. 106). При использовании элемента «графическое поле» для построения пользовательского интерфейса могут производиться следующие настройки:

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

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

Рисунок 106 Использование элемента управления PictureBox

Элемент управления «коллекция изображений» (ImageList) позволяет хранить коллекцию изображений и работать с ней. При этом изображения из коллекции могут быть использованы другими элементами управления пользовательского интерфейса. Элемент управления ImageList невидим во время работы программного приложения. При перетаскивании ImageList на разрабатываемую форму, он помещается не на форме, а в область компонентов под ней (component tray), содержащий все аналогичные компоненты (рис. 107).

Загрузка коллекции изображений в элемент управления

Рисунок 107 Загрузка коллекции изображений в элемент управления

ImageList

Такая особенность элемента управления предназначена для предотвращения загромождения пользовательского интерфейса элементами управления, которые могут не являться частью интерфейса пользователя. Изображения в элемент управления ImageList можно добавлять как во время разработки пользовательского интерфейса, так и во время выполнения программного приложения. На рис. 107 показана загрузка коллекции изображений в элемент управления. Для этого необходимо нажать на треугольник в верхнем правом краю элемента управления, нажать на гиперссылку «Выбрать изображения» и работать с членами коллекции изображений в открывшемся диалоговом окне «Редактор коллекции изображений» (кнопки «Добавить», «Удалить»). Очень часто элемент управления ImageList используется совместно с элементом управления ListView (будет рассмотрен далее в этой главе).

Элемент управления «экранная подсказка» (ToolTip) [1, 11] используется для отображения небольшого диалогового окна с текстом подсказки, когда над каким-либо элементом управления пользовательского интерфейса в течение некоторого времени задерживается курсор мыши (рис. 1086). Элемент управления ToolTip, добавленный в пользовательский интерфейс из панели элементов управления, отображается в области компонентов (component tray), находящейся под формой в режиме конструктора (рис. 108а).

При использовании элемента «экранная подсказка» для построения пользовательского интерфейса могут производиться следующие настройки:

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

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

настройка промежутка времени (в миллисекундах), разделяющего появление двух разных подсказок (при перемещении указателя мыши между элементами управления);

настройка внешнего вида подсказки (подсказка прямоугольной формы или в виде «баллона»), заголовка подсказки, иконки внутри подсказки;

наличие анимации при появлении и скрытии подсказки;

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

Элемент управления «поле со счетчиком» (NumericUpDown) [1, 11 ] предназначен для того чтобы пользователь мог вводить данные, ограниченные конкретным диапазоном числовых значений. Элемент управления выглядит как текстовое поле, справа (слева) от которого расположены две маленькие кнопки со стрелками вверх и вниз (рис. 100). Пользователь может вводить числовые значения так, как это делается в «текстовом поле», или же нажимать на кнопки со стрелками для увеличения (уменьшения) текущего значения. При использовании элемента «поле со счетчиком» для построения пользовательского интерфейса могут производиться следующие настройки:

настройка максимального и минимального значения в диапазоне;

Использование элементов управления ToolTip, ProgressBar, TabControl

Рисунок 108 Использование элементов управления ToolTip, ProgressBar, TabControl

настройка величины изменения текущего значения при щелчке на кнопке;

настройка количества знаков в дробной части отображаемого числа; настройка режима выравнивания кнопок со стрелками (кнопки могут отображаться слева или справа от элемента управления);

настройка используемого шрифта, размера, цвета шрифта, цвета фона, внешнего вида, размера элемента управления и его расположения на форме;

настройка числового значения, отображаемого в элементе управления по умолчанию.

Элемент управления «поле со списком строк» (DomainUpDown) [ 1, 11] предназначен для того чтобы пользователь мог вводить данные, ограниченные конкретным перечнем строковых значений (рис. 109).

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

Рисунок 109 Использование элемента управления DomainUpDown

Элемент управления выглядит так же, как и NumericUpDown, но при этом пользователь может вводить текстовые строки из некоторого списка, который вводится во время настройки элемента управления. Пользователь может нажимать на кнопки со стрелками и выбирать текстовую строку только из списка. Также пользователь может ввести нужную ему строку непосредственно в окне элемента управления DomainUpDown. Элемент управления DomainUpDown напоминает элемент управления ComboBox (рассмотрен ниже в этой главе).

При использовании элемента «поле со списком строк» для построения пользовательского интерфейса могут производиться следующие настройки:

настройка списка строковых значений в диапазоне;

настройка режима выравнивания кнопок со стрелками (кнопки могут отображаться слева или справа от элемента управления);

настройка используемого шрифта, размера, цвета шрифта, цвета фона, внешнего вида, размера элемента управления и его расположения на форме;

настройка строки, отображаемой в элементе управления по умолчанию при запуске программного приложения.

Элементы управления «меню» и «контекстное меню» (соответственно MenuStrip, ContextMenuStrip) [1, 11] предназначены для группировки взаимосвязанных команд в приложениях Windows Forms. Элементы управления MenuStrip и ContextMenuStrip являются неотъемлемой частью графических пользовательских интерфейсов программных приложений (они позволяют группировать команды без загромождения пользовательского интерфейса). С помощью элементов управления MenuStrip, ContextMenuStrip можно добавлять новые меню, изменять и удалять существующие меню. Контекстные меню ContextMenuStrip полезны тем, что они полностью встраиваются в контекст действий пользователей: не нужно переводить взгляд и курсор в другую область экрана, практически не нужно прерывать текущее действие для выбора команды. При этом они не занимают много места на экране. В качестве недостатка следует отметить, что контекстные меню не способны чему- либо научить пользователя, так как их нет постоянно на экране. Главным назначением контекстных меню является повышение скорости работы пользователей. Меню, содержащее команду меню, называется родительским меню этой команды. Команда меню, содержащая подменю, считается родителем для этого подменю. Меню могут назначаться Alt- комбинации клавиш, состоящие из клавиши Alt и буквы, подчеркнутой в названии меню. Некоторые команды меню выводятся с пометками, которые обычно означают, что несколько команд меню могут быть выбраны одновременно. Чтобы создать меню, необходимо перенести элемент управления MenuStrip из панели элементов управления на форму. Элемент управления MenuStrip появляется не на поле формы, а под ней. При этом создаваемое меню графически изображается в верхней части формы (рис. 110а). Чтобы ввести название меню, нужно щелкнуть левой клавишей мыши по полю «Туре Неге» или «Вводить здесь» (прототип для текста). После этого можно добавлять заголовки подменю и других меню, выбирая нужные поля с помощью стрелок и вписывая туда требуемые названия.

Элемент управления ContextMenuStrip после переноса его из панели инструментов на форму появится под формой (так же, как и элемент управления MenuStrip). Если щелкнуть по нему левой клавишей мыши, то создаваемое меню графически изображается в верхней части формы под меню, отображаемым при помощи элемента управления MenuStrip. Чтобы ввести название меню, необходимо щелкнуть левой клавишей мыши по полю «Туре Неге» («Вводить здесь»). В появляющихся справа полях «Вводить здесь» также можно ввести друг под другом названия подменю (рис. 1106)

Разработка меню с помощью элемента управления MenuStrip и ContextMenuStrip

Рисунок 110 Разработка меню с помощью элемента управления MenuStrip и ContextMenuStrip

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

названия команд должны быть короткими и ясными и состоять из одного или максимум двух слов;

желательно каждой команде назначать клавишу доступа путем добавления перед буквой символа «&», при этом, клавиши доступа для элементов меню на одном уровне видимости клавиши быстрого доступа не должны совпадать;

если команда используется как переключатель «включе- но/выключено», то, когда она активна, рядом с ней должна быть видна галочка;

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

При использовании элементов управления MenuStrip и ContextMenuStrip для построения пользовательского интерфейса могут производиться следующие настройки элементов управления:

настройка направления вывода текста команд меню (слева направо и наоборот);

настройка помеченного состояния команды меню;

настройка клавиш ускоренного вызова команд меню;

настройка иконок, находящихся возле команд меню и соответствующих им;

настройка шрифта текста для команд меню, размер шрифта, его цвет, цвет заливки команды меню;

настройка точки пользовательского интерфейса, в котором отображается контекстное меню.

Элементы управления «календарь» (DateTimePicker и MonthCalendar) [1, 11] предоставляют пользователям возможность просматривать информацию по датам. Элемент управления MonthCalendar выводит на форме календарь на месяц (рис. 111а). Пользователь может выбрать дату из текущего месяца или перейти к другому месяцу при помощи кнопок со стрелками и при этом выбранная дата выделяется цветом. Пользователь также может выбрать несколько дат в календаре. При использовании элементов управления MonthCalendar для построения пользовательского интерфейса могут производиться следующие настройки:

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

настройка первого дня недели, максимальной и минимальной даты календаря;

настройка внешнего вида и расположения календаря в пользовательском интерфейсе;

настройка отражения в левой части календаря номера недели, а также отражения в нижней части календаря текущей даты.

Элемент управления DateTimePicker внешне похож на элемент управления MonthCalendar. Элемент управления при нажатии пользователем кнопки со стрелкой выводит календарь (рис. 1116). Элемент DateTimePicker может использоваться для получения от пользователя информации о дате и времени.

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

Рисунок 111 Использование элементов управления MonthCalendar и

DateTimePicker

При использовании элементов управления DateTimePicker для построения пользовательского интерфейса в дополнение к настройкам элемента управления MonthCalendar могут производиться следующие настройки элемента управления:

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

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

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

Элемент управления «список» (ListBox) [1, 11] предназначен для отражения, просмотра и выбора только одного варианта из списка вариантов (рис. 112а). Элементы управления ListBox относятся к статическим объектам пользовательского графического интерфейса (пользователь не может во время выполнения программного приложения редактировать содержимое списка).

Элемент управления «расширенный список» (CheckedListBox) [1, 11 ] позволяет пользователю выбирать несколько элементов из списка, отображаемого в пользовательском интерфейсе. По сравнению с элементом управления ListBox рядом с каждым элементом списка добавлен «флажок» (рис. 1126). В результате пользователь может устанавливать пометки рядом сразу с несколькими элементами списка. При использовании элементов управления ListBox и CheckedListBox для построения пользовательского интерфейса могут производиться следующие настройки:

настройка количества и ширины столбцов в списке, содержащем несколько столбцов;

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

настройка порядка сортировки элементов в списке (по возрастанию, по убыванию, без сортировки);

настройка режимов выбора элементов списка (ни один элемент списка не может быть выбран, может быть выбран только один элемент, возможен выбор нескольких элементов);

настройка шрифта, размеров и цвета шрифта;

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

Если содержимое списка в элементах управления ListBox и CheckedListBox не помещается в видимой области, то в обоих элементах управления появляются полосы прокрутки (рис. 112).

Элемент управления «поле со списком» (ComboBox) [1, 11] содержит список элементов для выбора и позволяет пользователю работать с раскрывающимся списком элементов и выбрать один вариант из списка. Элемент управления ComboBox, как правило, выглядит как текстовое поле, справа от которого располагается кнопка со стрелкой (рис. 113).

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

Рисунок 112 Использование элементов управления ListBox и CheckedListBox

Используя в работе элемент управления ComboBox, пользователь может ввести текст в поле или щелкнуть левой клавишей мыши (нажать) на кнопке для того чтобы открыть список элементов. Если пользователь выбирает вариант, то он отображается в текстовом поле. Если все элементы списка не помещается в списке, то появляется полоса прокрутки. Элемент управления ComboBox позволяет сэкономить место в пользовательском интерфейсе. Недостаток ComboBox заключается в том, что, в отличие от элемента управления ListBox, для просмотра всех вариантов ответов пользователь должен раскрыть список.

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

Рисунок 113 Использование элемента управления ComboBox

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

настройка порядка сортировки элементов в списке (по возрастанию, по убыванию, без сортировки);

настройка шрифта, размеров и цвета шрифта; настройка положения элемента управления в пользовательском интерфейсе, его доступности для пользователя и его внешнего вида; настройка возможных состояний:

редактируемая текстовая часть элемента управления с постоянно открытым списком и отсутствующей кнопкой со стрелкой;

редактируемая текстовая часть элемента управления со списком, который открывается при помощи кнопки со стрелкой;

нередактируемая текстовая часть со списком, который открывается при помощи кнопки со стрелкой.

Элемент управления «иерархическое дерево» (TreeView) [1, 11] предназначен для отображения иерархической информации (например, файловой структуры, рис. 114а). Узлы представляются в виде объектов, которые могут содержать коллекцию других узлов и ссылаться на них («родительский» узел содержит «дочерние» узлы, которые могут быть «родителями» для других узлов). Два дочерних узла с общим «родителем» называются родственными. Первым «родительским» узлом дерева является корневой узел (при этом элемент управления Tree View может иметь несколько корней). «Родительские» узлы можно открывать и закрывать, щелкая левой клавишей мыши или нажимая на квадратике со значком «+» или «-». У узлов, не имеющих «дочерних» узлов, квадратиков нет. При использовании элементов управления Tree View для построения пользовательского интерфейса могут производиться следующие настройки:

настройка отображения «флажков» рядом с узлами; настройка контекстного меню, «привязанного» к элементу управления;

настройка коллекции иконок, располагающихся в узлах элемента управления;

настройка первого и последнего узла (последнего дочернего узла дерева) в дереве узлов и путей к остальным узлам;

настройка положения элемента управления в пользовательском интерфейсе, его доступности для пользователя и его внешнего вида;

настройка отображения подсказок в узлах;

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

Элемент управления «Представление в виде списка» (ListView) [1, 11 ] по своим функциям похож на Listeox (может отображать список, в котором пользователь может выбрать один или несколько вариантов). Элемент управления ListView предназначен для отображения данных, применительно к которым пользователь располагает определенным контролем над степенью подробности и стилем их представления. Данные, содержащиеся в элементе управления, можно представлять в виде столбцов и строк (как в таблице), в виде единственного столбца или в виде различных значков. Наиболее часто используемое представление в виде списка (рис. 1146) служит для навигации по папкам файловой системы.

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

Рисунок 114 Использование элементов управления Tree View и ListView

Элемент ListView более универсален по сравнению с ListView и позволяет отображать информацию в пользовательском интерфейсе в более разнообразных форматах (отображение иконок рядом с вариантами выбора из списка и дополнительной информации о вариантах из отображаемого списка). При использовании элементов управления ListView для построения пользовательского интерфейса могут производиться следующие настройки:

настройка выделения одного варианта выбора или нескольких вариантов выбора (если разрешен выбор нескольких элементов, то рядом с элементами списка будут отображаться «флажки», а элемент управления будет напоминать элемент управления CheckedListBox);

настройка способа выделения элементов списка (активация одним «кликом» левой клавишей мыши, двойной «клик» с изменением цвета элемента списка или без изменения цвета);

настройка коллекции значков, которые будут выводиться рядом с элементов списка (с помощью элемента управления Imagelist);

настройка положения элемента управления в пользовательском интерфейсе, его доступности для пользователя и его внешнего вида;

настройка контекстного меню, «привязанного» к элементу управления;

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

настройка шрифта, его размера и цвета, а также возможности отображения текста элемента в одной или нескольких строках;

настройка порядка сортировки элементов в списке (по возрастанию, по убыванию, без сортировки);

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

Элемент управления «окно с вкладками» (TabControl) [1, 11] позволяет создавать пользовательский интерфейс с вкладками. Элемент управления TabControl содержит вкладки (элементы TabPage), каждая из которых работает подобно элементу управления GroupBox и предоставляет возможность организовать логическую группировку данных и элементов управления (рис. 115).

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

Рисунок 115 Использование элемента управления TabControl

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

При использовании элементов управления TabControl для построения пользовательского интерфейса могут производиться следующие настройки:

настройка места отображения вкладок в элементе управления (по умолчанию - верх элемента управления);

настройка изменения вида вкладок при прохождении над ними курсора мыши;

настройка иконок, отображаемых на вкладках; настройка возможности вывода вкладок в несколько рядов и настройка количества рядов вкладок;

настройка количества вкладок в элементе управления; настройка внешнего вида вкладок (в виде кнопок или как обычные вкладки), шрифта, размера шрифта и его цвета;

настройка положения элемента управления в пользовательском интерфейсе, его доступности для пользователя и внешнего вида полей вкладок;

настройка подсказки, всплывающей над элементом управления.

Элементы управления «полоса прокрутки» (вертикальная HscrollBar и горизонтальная VScrollBar) [1, 11] предназначены для задания значения какой-либо величины в определенном диапазоне (рис. 116).

Элементы управления HscrollBar, VScrollBar и Timer

Рисунок 116 Элементы управления HscrollBar, VScrollBar и Timer

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

настройка текущего значения и позиции движка на полосе прокрутки (0 — крайнее левое и верхнее положение, соответственно);

настройка диапазона вводимых с помощью полосы прокрутки чисел (по умолчанию от 0 до 100);

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

настройка положения элемента управления в пользовательском интерфейсе, его доступности для пользователя;

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

Элемент управления «таймер» (Timer) обрабатывает данные системных часов и действует в соответствии с ними. Его можно применить для повторения выполнения определенных действий через заданный интервал времени. Элемент управления Timer при переносе из панели элементов управления на форму отображаются не на форме, а под ней в специальной панели (рис. 116). В процессе выполнения программного приложения элемент управления не отображается на форме. При использовании элемента управления Timer для построения пользовательского интерфейса могут производиться следующие настройки элемента управления:

настройка интервала отсчета (срабатывания) в миллисекундах; настройка состояния (включен или выключен).

Элемент управления «индикация выполнения» (ProgressBar) [1, 11] представляет собой полоску, которая используется для отображения степени выполнения команды (загрузки, поиска и т.д.). Элемент управления ProgressBar часто используется для отображения степени выполнения продолжительных задач (рис. 117, элемент указан стрелкой). При использовании элемента управления ProgressBar для построения пользовательского интерфейса могут производиться следующие настройки:

настройка текущего значения элемента управления (какая часть полоски элемента управления заполнена);

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

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

настройка видимости элемента управления (обычно элемент управления становится видимым только во время выполнения команды).

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

Рисунок 117 Использование элемента управления ProgressBar (на него указывает стрелка)

Элемент управления «Ползунок» (TrackBar) [1, 11] предназначен для установки значения параметров для выполнения команд и визуальной идентификации установленных значений (рис. 118). При использовании элемента управления TrackBar для построения пользовательского интерфейса могут производиться следующие настройки: настройка текущего положения ползунка; настройка диапазона значений элемента управления; настройка внешнего вида и расположения элемента управления (горизонтальное или вертикальное положение);

настройка величины, на которую будет смещаться элемент управления при щелчке мышью или нажатии клавиш Page Up, Page Down;

настройка величины, на которую будет смещаться элемент управления при нажатии клавиш-стрелок на клавиатуре;

настройка интервала, через который отображаются метки на элементе управления;

настройка частоты делений на линейке элемента управления; настройка положения элемента управления в пользовательском интерфейсе, его доступности для пользователя;

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

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

Рисунок 118 Использование элемента управления TrackBar

Элемент управления «строка состояния» (StatusStrip) [1, 11] предназначен для создания строки состояния формы, в которой отображается информация, относящаяся к состоянию программного приложения. При переносе элемента управления StatusStrip из панели элементов управления на форму он по умолчанию размещается в нижней части окна приложения. Элемент управления StatusStrip может содержать различные элементы. В процессе разработки пользовательского интерфейса в элемент StatusStrip могут быть добавлены следующие объекты:

метка для вывода текстовой информации (объект ToolStripStatusLabel, рис. 119а);

индикатор прогресса (объект ToolStripProgressBar, рис. 1196); кнопка (объект ToolStripDropDownButton, рис. 119в), при нажатии на которую появляется выпадающий список, при этом кнопка представляет собой единое целое: кнопка выпадающего списка не отделена разделителем от прямоугольника с иконкой;

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

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

Рисунок 119 Использование элемента управления StatusStrip

При использовании элемента управления StatusStrip для построения пользовательского интерфейса могут производиться следующие настройки:

настройка размещений элемента управления на форме (по умолчанию: внизу, в верхней части, элемент управления растянут по всей форме, в левой или правой части формы, произвольное положение);

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

настройка внешнего вида объектов, находящихся в элементе управления StatusStrip (шрифт поясняющего текста, его размеры и цвет, цвет фона).

Элемент управления «электронная таблица» (DataGridView) [1, 11 ] позволяет отображать данные в виде таблицы, подобной рабочему листу MS Excel. Элемент управления предоставляет возможности для работы с базами данным (отображение результатов запросов к ним в виде таблиц или иерархической структуры таблиц). При взаимодействии с источником данных DataGridView присоединяется к управляемому кэшу, который управляет отправкой и получением строк данных. Когда пользователь прокручивает на экране строки таблицы DataGridView, код запрашивает новые данные из кэша и может очистить память от старых данных. Элемент управления DataGridView может отображать данные в трех разных режимах: в связанном, несвязанном и виртуальном. Несвязанный режим подходит для отображения относительно небольших объемов данных. Элемент управления DataGridView не присоединяется напрямую к источнику данных в несвязанном режиме. При этом данные в элементе управления заносятся самим программным приложением без взаимодействия с внешним источником данных (базой данных). Несвязанный режим может быть применен при разработке пользовательских интерфейсов, с помощью которых пользователь будет работать со статичными данными, предназначенными только для чтения.

Для построения пользовательского интерфейса, предназначенного для взаимодействия пользователя с внешним источником данных, используется связанный режим. Элемент управления DataGridView присоединяется непосредственно к источнику данных.

Виртуальный режим предназначен для реализации собственных операций по управлению данными и для оптимизации производительности при взаимодействии с большими объемами данных.

При использовании элемента управления DataGridView для построения пользовательского интерфейса могут производиться следующие настройки:

настройка при необходимости связи с источником данных (жесткое соответствие столбцов в источнике данных со столбцами в элементе управления или создание собственных столбцов в элементе управления в результате обработки столбцов из источника данных);

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

настройка одновременного выбора нескольких ячеек, строк или столбцов элемента управления;

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

настройка возможности изменения вручную размера строк и столбцов, а также настройка индекса ячейки, номеров столбца и строки, которые отображаются первыми в элементе управления;

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

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

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

настройка коллекции элементов управления, содержащихся в элементе управления.

Элемент управления «Открыть» (OpenFileDialog) [1, 11] предназначен для работы с хорошо известным диалоговым окном «Открыть», которое позволяет при помощи предоставляемых по умолчанию и настраиваемых средств просмотра пути к файлам открыть требуемый пользователю файл.

Элемент управления «сохранить» (SaveFileDialog) [1, 11] предназначен для работы с хорошо известным диалоговым окном «Сохранить как», которое предоставляет пользователю возможность при помощи предоставляемых им средств сохранить данные в файл. При использовании элементов управления OpenFileDialog и SaveFileDialog для построения пользовательского интерфейса могут производиться следующие настройки:

настройка используемого по умолчанию расширения файла;

настройка проверки существования открываемого файла и пути к нему (перед открытием файла);

настройка имени выбранного файла (файлов);

настройка фильтра для открытия файлов только с определенными расширениями;

настройка каталога, который открывается для просмотра при отображении диалогового окна;

настройка возможности выбора нескольких файлов;

настройка заголовка окна.

Элемент управления «палитра» ColorDialog [3, 17] предназначен для выбора пользователем требуемого цвета из отображаемой палитры. Диалоговое окно отображает стандартную (рис. 120а) или настраиваемую (рис. 1206) палитру цветов.

При использовании элементов управления ColorDialog для построения пользовательского интерфейса могут производиться следующие настройки:

настройка включения или выключения кнопки «Определить

цвет»;

настройка отображения в диалоговом окне всех доступных цветов в наборе базовых цветов;

настройка цвета, выбранного по умолчанию при отображении диалогового окна;

настройка возможности работать не только с чистыми цветами.

Стандартная и настраиваемая палитра цветов

Рисунок 120 Стандартная и настраиваемая палитра цветов

Элемент управления «Выбор параметров шрифта» (FontDialog) [1, 11 ] позволяет пользователю работать со стандартным диалоговым окном «Шрифт», которое позволяет выбрать шрифт, его размеры и начертание. После выбора параметров шрифта и нажатия кнопки «ОК» данные о шрифте и его свойствах передаются программному приложению. При использовании элементов управления FontDialog при построении пользовательского интерфейса могут производиться следующие настройки: настройка выбора вертикальных и горизонтальных шрифтов; настройка выбора шрифта и цвета шрифта по умолчанию при отображении диалогового окна;

настройка максимального и минимального размера шрифта; настройка возможности для работы со списком для выбора цвета шрифта;

настройка отображения кнопки «Help».

Элемент управления «Печать» (PrintDialog) [1, 11] предназначен для организации работы пользователя со стандартным диалоговым окном «Печать» (рис. 121) с использованием возможностей, указанных в диалоговом окне (выбор принтера и настройка его свойств, печатаемые страницы, количество копий, количество печатаемых страниц на одной странице, настройка параметров печати).

Стандартное диалоговое окно «Печать», открывшееся в результате использования элемента управления PrintDialog

Рисунок 121 Стандартное диалоговое окно «Печать», открывшееся в результате использования элемента управления PrintDialog

При использовании элементов управления PrintDialog для построения пользовательского интерфейса могут производиться следующие настройки:

настройка активации или дезактивации элементов управления типа «переключатель» (RadioButton) с названиями «Текущая страница», «Выделение», «Страницы» (с элементом управления «текстовое поле» для ввода номеров страниц);

настройка активации (блокировки) и установки элемента управления типа «флажок» (CheckBox) «Печать в файл»;

настройка стиля отображения диалогового окна; настройка отображения кнопки «Help».

Элемент управления «предварительный просмотр» (PrintPreviewDiaiog) [3, 17] предназначен для организации работы пользователя со стандартным диалоговым окном «Предварительный просмотр» (рис. 122а), предназначенного для просмотра информации, выводимой на печать. При использовании элементов управления PrintPreviewDiaiog для построения пользовательского интерфейса могут производиться следующие настройки:

настройка наличия иконки в заголовке формы предварительного просмотра;

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

настройка кнопки в диалоговом окне, нажатие на которую происходит, когда пользователь нажимает клавишу «Enter» на клавиатуре;

настройка ассоциированного с элементом управления документа, выводимого на печать (с помощью элемента управления PrintDocument).

Элемент управления «параметры страницы» (PageSetupDialog) [ 1, 11 ] предназначен для организации работы пользователя с диалоговым окном «параметры страницы» (для установки параметров страницы для вывода ее на печать, рис 1226).

Стандартные диалоговые окна «Предварительный просмотр» и «Параметры страницы», открывшиеся в результате использования элементо управления PrintPreviewDiaiog и PageSetupDialog

Рисунок 122 Стандартные диалоговые окна «Предварительный просмотр» и «Параметры страницы», открывшиеся в результате использования элементо управления PrintPreviewDiaiog и PageSetupDialog

При использовании элементов управления PageSetupDialog для построения пользовательского интерфейса могут производиться следующие настройки:

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

настройка возможности переключения элементов управления «Переключатель» в группе «Ориентация»;

настройка возможности для задания формата листа бумаги документа;

настройка ассоциированного с элементом управления документа, выводимого на печать (с помощью элемента управления PrintDocument).

При переносе элементов управления OpenFileDialog, SaveFilneDialog, ColorDialog, FontDialog, PrintDialog, PrintPreviewDialog, PrintDocument, PageSetupDialog из панели элементов управления в форму они размещается не на форме, а в специальной панели под формой (рис. 123).

Размещение элементов управления в специальной панели под

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

формой

Элемент управления «индикатор ошибки» (ErrorProvider) [1, 11] предназначен для отображения предупреждающего значка, информирующего пользователя об ошибке при вводе данных. Элемент управления ErrorProvider дает пользователю возможность (в дополнение к использованию диалогового окна с предупреждающим сообщением) отображения ошибки при вводе данных. Значок об ошибке появляется рядом с элементом управления, с помощью которого вводят данные. Пояснительное сообщение к ошибке выводится в виде всплывающей подсказки (рис. 124). При использовании элементов управления ErrorProvider для построения пользовательского интерфейса могут производиться следующие настройки:

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

Сообщение об ошибке при использовании элемента управления

Рисунок 124 Сообщение об ошибке при использовании элемента управления

ErrorProvider

Элемент управления «помощник» (HelpProvider) [ 1, 11] предназначен для работы пользователя с всплывающей справкой (рис. 125). При использовании элемента управления HelpProvider в заголовке формы появляется кнопка справки, при помощи которой можно получать справочную информацию об элементах управления, расположенных в форме. Всплывающая справка при использовании элемента управления HelpProvider

Рисунок 125 Всплывающая справка при использовании элемента управления HelpProvider

При использовании элементов управления HelpProvider для построения пользовательского интерфейса могут производиться следующие настройки:

настройка возможности использование кнопки справки в заголовке формы;

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

Часто пользователь во время работы с программным приложением взаимодействует с однодокументным пользовательским интерфейсом (SDI, Single Document Interface). В программных приложениях с SDI в любой момент времени открыто только одно диалоговое окно, или документ. Как правило, SDI-приложений обладают ограниченными возможностями (не допускают работу одновременно с несколькими документами или диалоговыми окнами). Для работы с несколькими документами (диалоговыми окнами) при использовании SDI-приложений пользователь должен запустить несколько раз одно и то же программное приложение, что уменьшает скорость работы пользователя с программным приложением.

Альтернативой многократному запуску SDI-приложений является использование MDI-приложений (Multiple Document Interface) с многодокументным интерфейсом. Использованием MDI позволяет работать сразу с несколькими документами или диалоговыми окнами. Главное окно многодокументного программного приложения называется родительским окном, а все внутренние окна называются дочерними окнами. Программное приложение MDI может несколько дочерних окон, но при этом родительское окно всегда только одно. Родительское окно отличается от дочерних диалоговых окон более темным фоном (рис. 126).

Многооконный (MDI) пользовательский интерфейс с тремя дочерними диалоговыми окнами (расположены каскадом)

Рисунок 126 Многооконный (MDI) пользовательский интерфейс с тремя дочерними диалоговыми окнами (расположены каскадом).

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

настройка родительской формы MD1 для дочерней формы; настройка возможности использования формы в качестве родительской формы;

настройка способа размещения дочерних форм в родительской форме MDI (каскадное, вертикальное, горизонтальное, мозаичное вертикальное, мозаичное горизонтальное).

 
Посмотреть оригинал
< Пред   СОДЕРЖАНИЕ   ОРИГИНАЛ   След >