Элементы управления visual studio

Обновлено: 04.07.2024

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

Visual Studio 2010 содержит несколько механизмов управления расположением элементов управления в форме, включая:

окно Properties;
панель инструментов Layout;
линии выравнивания;
изменение элемента управления в конструкторе с помощью мыши;
свойства Anchorи Dock.

Элементы управления

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

CheckBox - кнопки отложенного действия - их нажатие не должно запускать какое-либо немедленное действие. С их помощью пользователь вводит параметры, которые скажутся, когда действие будет запущено иными элементами управления. Элемент CheckBox может иметь 3 состояния — помеченное, непомеченное и смешанное. Чаще всего этот элемент применяется для определения значений, которые могут иметь только два состояния.

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

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

Label– метка - используется для отображения текста только для чтения, т.е комментарии.

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

MaskedTextBox- поле ввода по шаблону -дает возможность указывать формат для отображения текста или ввода пользователя. Свойство Maskопределяет форматирование текста.

RichTextBox – расширенное поле ввода - дает возможность пользователю вводить и обрабатыать большие объемы информации (более 64 кБт). Кроме того, RichTextBox позволяет редактировать цвет текста, шрифт, добавлять изображения. RichTextBox включает все возможности текстового редактора Microsoft Word.

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

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

TrackBar - бегунок - типичным примером применения элемента TrackBar является регулятор уровня громкости в панели Windows. TrackBar может использоваться в различных режимах: в горизонтальном или вертикальном положении, с включенными черточками или без.

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

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

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

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

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

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

На данном шаге производится добавление в форму элемента управления PictureBox и элемента управления CheckBox. Затем вы добавляете в форму элементы управления Button.

Добавление элементов управления в форму

Перейдите на вкладку Панель элементов в левой части интегрированной среды разработки Visual Studio (или нажмите клавиши CTRL+ALT+X) и разверните группу Стандартные элементы управления. В результате этого действия отображается большая часть стандартных элементов управления, которые можно увидеть в формах.

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

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

****Задачи элемента управления _ _PictureBox

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

В меню Задачи элемента управления PictureBox для элемента управления PictureBox выберите ссылку Закрепить в родительском контейнере. В результате этого действия у элемента управления PictureBox свойство Dock принимает значение Fill. Чтобы это увидеть, выберите элемент управления PictureBox, перейдите в окно Свойства и убедитесь, что свойство Dock имеет значение Fill.

Сделайте так, чтобы элемент управления PictureBox занимал два столбца, изменив его свойство ColumnSpan. Выберите элемент управления PictureBox и установите для его свойства ColumnSpan значение 2**.** Также необходимо, чтобы когда элемент управления PictureBox был пустым, отображалась пустая рамка. Установите для его свойства BorderStyle значение Fixed3D.

Выберите в форме элемент управления TableLayoutPanel и добавьте в нее элемент управления CheckBox. Двойным щелчком выберите элемент CheckBox на панели элементов, чтобы добавить новый элемент управления CheckBox в следующую свободную ячейку таблицы. Поскольку элемент управления PictureBox занимает первые две ячейки в TableLayoutPanel, элемент управления CheckBox добавляется в нижнюю левую ячейку. Выберите свойство Text и введите слово Stretch, как показано на рисунке ниже.

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

Выберите в форме элемент управления TableLayoutPanel, а затем на панели элементов перейдите к группе Контейнеры (из которой был взят элемент управления TableLayoutPanel) и дважды щелкните элемент FlowLayoutPanel, чтобы добавить новый элемент управления в последнюю ячейку (справа внизу). Затем закрепите элемент управления FlowLayoutPanel в элементе TableLayoutPanel. Для этого выберите ссылку Закрепить в родительском контейнере в списке задач FlowLayoutPanel, раскрываемом с помощью черного треугольника, или присвойте свойству Dock элемента FlowLayoutPanel значение Fill.

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

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

(Как правило, каждая ячейка содержит только один элемент управления. В этом примере правая нижняя ячейка TableLayoutPanel содержит четыре элемента управления "Кнопка". Почему? Потому что FlowLayoutPanel является контейнерным элементом управления, то есть элементом в ячейке, содержащим другие элементы управления.)

Добавление кнопок

Выберите только что добавленный элемент управления FlowLayoutPanel. Перейдите к группе Стандартные элементы управления на панели элементов и двойным щелчком выберите элемент Кнопка, чтобы добавить в элемент управления FlowLayoutPanel кнопку с именем button1. Чтобы добавить другую кнопку, повторите это действие. Среда интегрированной разработки определяет, что уже существует кнопка с именем button1, и называет следующую кнопку как button2.

Обычно другие кнопки добавляются с помощью панели элементов. На этот раз выберите button2, а затем в строке меню выберите Правка > Копировать (или нажмите клавиши CTRL+C). Далее в строке меню выберите Правка > Вставить (или нажмите клавиши CTRL+V), чтобы вставить копию кнопки. Повторите вставку еще раз. Обратите внимание на то, что в интегрированной среде разработки были добавлены кнопки button3 и button4 в FlowLayoutPanel.

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

Выберите первую кнопку и установите для ее свойства Text значение Показать рисунок. Затем установите для свойства Text следующих трех кнопок значения Очистить рисунок, Установить цвет фона и Закрыть.

Давайте зададим размер кнопок и разместим их таким образом, чтобы они были выровнены по правой стороне панели. Выберите элемент управления FlowLayoutPanel и обратите внимание на его свойство FlowDirection. Измените его значение на RightToLeft.

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

Если кнопки по-прежнему остаются в неправильном порядке, можно перетащить кнопки вокруг элемента управления FlowLayoutPanel для расположения их в произвольном порядке. Можно выбрать кнопку и перетащить ее влево или вправо.

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

Выделив все кнопки, перейдите к окну Свойства и прокрутите его вверх до свойства AutoSize. Это свойство указывает кнопке автоматически изменять свой размер так, чтобы весь текст мог разместиться на ней. Задайте значение true.

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

Средство просмотра изображений _ _с четырьмя кнопками

Теперь снова запустите программу, чтобы увидеть изменения.

Обратите внимание, что при нажатии кнопок и установке флажка пока ничего не происходит,—однако вскоре все заработает.

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

Anchor : Определяет, как элемент будет растягиваться

BackColor : Определяет фоновый цвет элемента

BackgroundImage : Определяет фоновое изображение элемента

ContextMenu : Контекстное меню, которое открывается при нажатии на элемент правой кнопкой мыши. Задается с помощью элемента ContextMenu

Cursor : Представляет, как будет отображаться курсор мыши при наведении на элемент

Dock : Задает расположение элемента на форме

Enabled : Определяет, будет ли доступен элемент для использования. Если это свойство имеет значение False, то элемент блокируется.

Font : Устанавливает шрифт текста для элемента

ForeColor : Определяет цвет шрифта

Location : Определяет координаты верхнего левого угла элемента управления

Name : Имя элемента управления

Size : Определяет размер элемента

Width : ширина элемента

Height : высота элемента

TabIndex : Определяет порядок обхода элемента по нажатию на клавишу Tab

Tag : Позволяет сохранять значение, ассоциированное с этим элементом управления

Кнопка

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

При нажатии на кнопку на форме в редакторе Visual Studio мы по умолчанию попадаем в код обработчика события Click , который будет выполняться при нажатии:

Оформление кнопки

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

Flat - Кнопка имеет плоский вид

Popup - Кнопка приобретает объемный вид при наведении на нее указателя, в иных случаях она имеет плоский вид

Standard - Кнопка имеет объемный вид (используется по умолчанию)

System - Вид кнопки зависит от операционной системы

Изображение на кнопке

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

Overlay : текст накладывается на изображение

ImageAboveText : изображение располагается над текстом

TextAboveImage : текст располагается над изображением

ImageBeforeText : изображение располагается перед текстом

TextBeforeImage : текст располагается перед изображением

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

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

После выбора изображения мы можем установить свойство ImageAlign , которое управляет позиционированием изображения на кнопке:

Нам доступны 9 вариантов, с помощью которых мы можем прикрепить изображение к определенной стороне кнопки. Оставим здесь значение по умолчанию - MiddleCenter , то есть позиционирование по центру.

Затем перейдем к свойству TextImageRelation и установим для него значение ImageBeforeText . В итоге мы получим кнопку, где сразу после изображения идет надпись на кнопке:

Клавиши быстрого доступа

При работе с формами при использовании клавиатуры очень удобно пользоваться клавишами быстрого доступа. При нажатии на клавиатуре комбинации клавиш At+некоторый символ, будет вызываться определенная кнопка. Например, зададим для некоторой кнопки свойство Text равное &Аватар . Первый знак - амперсанд - определяет ту букву, которая будет подчеркнута. В данном случае надпись будет выглядеть как А ватар. И теперь чтобы вызвать событие Click, нам достаточно нажать на комбинацию клавиш Alt+А.

Кнопки по умолчанию

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

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

Аналогично работает свойство формы CancelButton , которое назначает кнопку отмены. Назначив такую кнопку, мы можем вызвать ее нажатие, нажав на клавишу Esc.

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

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

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

Несмотря на то, что мы видим только форму, но стартовой точкой входа в графическое приложение является класс Program, расположенный в файле Program.cs:

Сама форма сложна по содержанию. Она делится на ряд компонентов. Так, в структуре проекта есть файл Form1.Designer.cs, который выглядит примерно так:

Здесь объявляется частичный класс формы Form1, которая имеет два метода: Dispose() , который выполняет роль деструктора объекта, и InitializeComponent() , который устанавливает начальные значения свойств формы.

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

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

Еще один файл - Form1.resx - хранит ресурсы формы. Как правило, ресурсы используются для создания однообразных форм сразу для нескольких языковых культур.

И более важный файл - Form1.cs, который в структуре проекта называется просто Form1, содержит код или программную логику формы:

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