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

Элементы управления представляют собой визуальные классы, которые получают введенные пользователем данные и могут инициировать различные события. Все элементы управления наследуются от класса 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.

Элемент управления Button (Windows Forms) Button Control (Windows Forms)

Элемент управления Windows Forms Button позволяет пользователю щелкнуть его для выполнения действия. The Windows Forms Button control allows the user to click it to perform an action. На элементе управления Button могут отображаться текст и изображения. The Button control can display both text and images. При щелчке кнопки мышью элемент управления выглядит так, как будто его нажимают и отпускают. When the button is clicked, it looks as if it is being pushed in and released.

в этом разделе In This Section

Общие сведения об элементе управления Button Button Control Overview
Описание элемента управления, его основных возможностей и свойств. Explains what this control is and its key features and properties.

Практическое руководство. Обработка события нажатия кнопки в Windows Forms How to: Respond to Windows Forms Button Clicks
Описание основных приемов использования кнопки на форме Windows Forms. Explains the most basic use of a button on a Windows Form.

Практическое руководство. Назначение кнопок принятия в Windows Forms How to: Designate a Windows Forms Button as the Accept Button
Описывается, как назначить элемент управления Button в качестве кнопки «Принять», также известной как кнопка по умолчанию. Explains how to designate a Button control to be the accept button, also known as the default button.

Практическое руководство. Назначение кнопок отмены в Windows Forms How to: Designate a Windows Forms Button as the Cancel Button
Описывается, как назначить элемент управления Button в качестве кнопки «Отмена», которая активируется при любом нажатии клавиши ESC. Explains how to designate a Button control to be the cancel button, which is clicked whenever the user presses the ESC key.

Справочник Reference

Класс Button Button class
Описание класса и всех его членов. Describes this class and has links to all its members.

Связанные разделы Related Sections

Элементы управления для использования в формах Windows Forms Controls to Use on Windows Forms
Полный список элементов управления Windows Forms со ссылками на информацию об их применении. Provides a complete list of Windows Forms controls, with links to information on their use.

Программное добавление элементов управления в Windows Forms во время выполнения с помощью Visual C#

Эта статья поможет программным способом добавлять и настраивать элементы управления в форме Windows Forms с помощью Visual C#.

Исходная версия продукта: Visual C #
Исходный номер статьи базы знаний: 319266

Сводка

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

Пакет средств разработки программного обеспечения (SDK) Microsoft .NET Framework предоставляет множество визуальных элементов управления, которые можно использовать для создания приложения Windows Forms. Вы можете добавлять и настраивать элементы управления во время конструирования в Visual Studio .NET или в Visual Studio. Вы можете добавлять и настраивать элементы управления программным способом во время выполнения.

Требования

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

• Синтаксис Visual C#
• Среда Visual Studio .NET, среда Visual Studio
• Назначение распространенных элементов управления Visual C#

Создание приложения Windows Forms

Запустите Visual Studio .NET или Visual Studio и создайте новый проект приложения Visual C# для Windows с именем винконтролс. По умолчанию форма Form1 добавляется в проект.

Дважды щелкните Form1, чтобы создать и просмотреть Form1_Load процедуру обработки события.

Добавьте в класс переменные частных экземпляров Form1 для работы с общими элементами управления Windows. Form1 Класс запускается следующим образом:

Код должен быть изменен в Visual Studio. Когда вы создаете проект Windows Forms, Visual C# добавляет по умолчанию одну форму в проект. Эта форма называется Form1. Два файла, представляющие форму, называются Form1.CS и Form1.Designer.CS. Вы пишете свой код в Form1.CS. Файл Designer.CS — это место, в котором конструктор Windows Forms записывает код, который реализует все действия, выполненные путем добавления элементов управления. Дополнительные сведения о конструкторе Windows Forms в Visual C# приведены в статье Создание проекта (Visual c#).

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

Нахождение Form1_Load процедуры обработки события и добавление в процедуру следующего кода для настройки внешнего вида элемента управления формы:

Добавьте следующий код в Form1_Load процедуру обработки события для настройки внешнего вида элемента управления «Кнопка»:

Добавьте следующий код для настройки внешнего вида элемента управления TextBox в Form1_Load :

Добавьте следующий код для настройки внешнего вида элемента управления ListBox в Form1_Load :

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

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

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

Добавьте следующий код, чтобы добавить каждый объект в Controls массив формы в конце Form1_Load :

Проверка работы

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

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

Ссылки

Дополнительные сведения об использовании элементов управления программным способом можно найти в разделе приложения Windows в разделе Visual C# справочной документации по Visual Studio .NET Online или в справочной документации по Visual Studio Online.

Шаг 5. Добавление элементов управления в форму Step 5: Add controls to your form

На данном шаге производится добавление в форму элемента управления PictureBox и элемента управления CheckBox. In this step, you add controls, such as a PictureBox control and a CheckBox control, to your form. Затем вы добавляете в форму элементы управления Button. You then add Button controls to your form.

Добавление элементов управления в форму How to add controls to your form

Перейдите на вкладку Панель элементов в левой части интегрированной среды разработки Visual Studio (или нажмите клавиши CTRL+ALT+X) и разверните группу Стандартные элементы управления. Choose the Toolbox tab on the left side of the Visual Studio IDE (or press Ctrl+Alt+X), and then expand the Common Controls group. В результате этого действия отображается большая часть стандартных элементов управления, которые можно увидеть в формах. This shows the most common controls that you see on forms.

Дважды щелкните элемент PictureBox, чтобы добавить в форму элемент управления PictureBox. Double-click the PictureBox item to add a PictureBox control to your form. Поскольку элемент управления TableLayoutPanel закреплен так, чтобы заполнять собой форму, интегрированная среда разработки добавляет элемент управления PictureBox в первую пустую ячейку (левый верхний угол). Because the TableLayoutPanel is docked to fill your form, the IDE adds the PictureBox control to the first empty cell (the upper left corner).

Щелкните новый элемент управления PictureBox, чтобы выбрать его, а затем щелкните черный треугольник на новом элементе управления PictureBox, чтобы отобразить его список задач, как показано на снимке экрана ниже. Choose the new PictureBox control to select it, and then choose the black triangle on the new PictureBox control to display its task list, as shown in the following screenshot.

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

Если на TableLayoutPanel случайно был добавлен элемент управления неправильного типа, то его можно удалить. If you accidentally add the wrong type of control to your TableLayoutPanel, you can delete it. Щелкните элемент управления правой кнопкой мыши и в контекстном меню выберите Удалить. Right-click the control, and then choose Delete on its context menu. Удалять элементы управления из формы также можно с помощью строки меню. You can also remove controls from the form by using the menu bar. В строке меню выберите Правка > Отменить или Правка > Удалить. On the menu bar, choose Edit > Undo, or Edit > Delete.

В меню Задачи элемента управления PictureBox для элемента управления PictureBox выберите ссылку Закрепить в родительском контейнере. In the PictureBox Tasks menu from the PictureBox control, choose the Dock in parent container link. В результате этого действия у элемента управления PictureBox свойство Dock принимает значение Fill. This automatically sets the PictureBox Dock property to Fill. Чтобы это увидеть, выберите элемент управления PictureBox, перейдите в окно Свойства и убедитесь, что свойство Dock имеет значение Fill. To see this, choose the PictureBox control to select it, go to the Properties window, and be sure that the Dock property is set to Fill.

Сделайте так, чтобы элемент управления PictureBox занимал два столбца, изменив его свойство ColumnSpan. Make the PictureBox span both columns by changing its ColumnSpan property. Выберите элемент управления PictureBox и установите для его свойства ColumnSpan значение 2****. In the PictureBox, choose the PictureBox control and set its ColumnSpan property to 2. Также необходимо, чтобы когда элемент управления PictureBox был пустым, отображалась пустая рамка. Also, when the PictureBox is empty, you want to show an empty frame. Установите для его свойства BorderStyle значение Fixed3D. Set its BorderStyle property to Fixed3D.

Если у PictureBox отсутствует свойство ColumnSpan, вероятно, элемент управления PictureBox был добавлен в саму форму, а не в элемент управления TableLayoutPanel. If you don’t see a ColumnSpan property for your PictureBox, then it’s likely that the PictureBox was added to the form rather than the TableLayoutPanel. Чтобы исправить это, выберите элемент управления PictureBox, удалите его, выберите элемент TableLayoutPanel, а затем добавьте новый элемент управления PictureBox. To fix this, choose the PictureBox, delete it, choose the TableLayoutPanel, and then add a new PictureBox.

Выберите в форме элемент управления TableLayoutPanel и добавьте в нее элемент управления CheckBox. Choose the TableLayoutPanel on the form and then add a CheckBox control to the form. Двойным щелчком выберите элемент CheckBox на панели элементов, чтобы добавить новый элемент управления CheckBox в следующую свободную ячейку таблицы. Double-click the CheckBox item in the Toolbox to add a new CheckBox control to the next free cell in your table. Поскольку элемент управления PictureBox занимает первые две ячейки в TableLayoutPanel, элемент управления CheckBox добавляется в нижнюю левую ячейку. Because a PictureBox takes up the first two cells in the TableLayoutPanel, the CheckBox control is added to the lower-left cell. Выберите свойство Text и введите слово Stretch, как показано на рисунке ниже. Choose the Text property and type in the word Stretch, as shown in the following image.

Элемент управления TextBox со свойством *Stretch* TextBox _ _control with *Stretch _property*

Выберите в форме элемент управления TableLayoutPanel, а затем на панели элементов перейдите к группе Контейнеры (из которой был взят элемент управления TableLayoutPanel) и дважды щелкните элемент FlowLayoutPanel, чтобы добавить новый элемент управления в последнюю ячейку (справа внизу). Choose the TableLayoutPanel on the form, and then go to the Containers group in the Toolbox (where you got your TableLayoutPanel control) and double-click the FlowLayoutPanel item to add a new control to the last cell (bottom right). Затем закрепите элемент управления FlowLayoutPanel в элементе TableLayoutPanel. Then, dock the FlowLayoutPanel in the TableLayoutPanel. Для этого выберите ссылку Закрепить в родительском контейнере в списке задач FlowLayoutPanel, раскрываемом с помощью черного треугольника, или присвойте свойству Dock элемента FlowLayoutPanel значение Fill. You can do so either by choosing Dock in parent container on the FlowLayoutPanel’s black triangle task list, or by setting the FlowLayoutPanel’s Dock property to Fill.

Элемент управления FlowLayoutPanel является контейнером, в котором другие элементы управления размещаются построчно в определенном порядке. A FlowLayoutPanel is a container that arranges other controls in a row, one after another. При изменении размера элемента управления FlowLayoutPanel все его компоненты размещаются в одной строке, если для этого хватает места. When you resize a FlowLayoutPanel, it lays out all of its controls in a single row, if it has room to do so. В противном случае он размещает их по строкам одну над другой. Otherwise, it arranges them in lines, one on top of the other.

В данном случае элемент управления FlowLayoutPanel будет использоваться для размещения четырех кнопок. Here, you’ll use a FlowLayoutPanel to hold four buttons. Если кнопки при добавлении располагаются одна поверх другой, перед их добавлением необходимо выбрать FlowLayoutPanel. If the buttons arrange one on top another when you add them, make sure that you select the FlowLayoutPanel before you add the buttons.

(Как правило, каждая ячейка содержит только один элемент управления. (Typically, each cell contains only one control. В этом примере правая нижняя ячейка TableLayoutPanel содержит четыре элемента управления «Кнопка». In this example, the lower-right cell of the TableLayoutPanel contains four button controls. Почему? Why? Потому что FlowLayoutPanel является контейнерным элементом управления, то есть элементом в ячейке, содержащим другие элементы управления.) Because the FlowLayoutPanel is a container control, which is a control in a cell that holds other controls.)

Добавление кнопок To add buttons

Выберите только что добавленный элемент управления FlowLayoutPanel. Choose the new FlowLayoutPanel that you added. Перейдите к группе Стандартные элементы управления на панели элементов и двойным щелчком выберите элемент Кнопка, чтобы добавить в элемент управления FlowLayoutPanel кнопку с именем button1. Go to Common Controls in the Toolbox and double-click the Button item to add a button control called button1 to your FlowLayoutPanel. Чтобы добавить другую кнопку, повторите это действие. Repeat to add another button. Среда интегрированной разработки определяет, что уже существует кнопка с именем button1, и называет следующую кнопку как button2. The IDE determines that there’s already a button called button1 and calls the next one button2.

Обычно другие кнопки добавляются с помощью панели элементов. Typically, you add the other buttons by using the Toolbox. На этот раз выберите button2, а затем в строке меню выберите Правка > Копировать (или нажмите клавиши CTRL+C). This time, choose button2, and then from the menu bar, choose Edit > Copy (or press Ctrl+C). Далее в строке меню выберите Правка > Вставить (или нажмите клавиши CTRL+V), чтобы вставить копию кнопки. Next, choose Edit > Paste from the menu bar (or press Ctrl+V) to paste a copy of your button. Повторите вставку еще раз. Now paste it again. Обратите внимание на то, что в интегрированной среде разработки были добавлены кнопки button3 и button4 в FlowLayoutPanel. Notice that the IDE adds button3 and button4 to the FlowLayoutPanel.

Любой элемент управления можно копировать и вставлять. You can copy and paste any control. Среда интегрированной разработки именует и размещает новые элементы управления логическим образом. The IDE names and places the new controls in a logical manner. Если вставка элемента управления выполняется в контейнер, среда интегрированной разработки выбирает следующую логическую область для размещения. If you paste a control into a container, the IDE chooses the next logical space for placement.

Выберите первую кнопку и установите для ее свойства Text значение Показать рисунок. Choose the first button and set its Text property to Show a picture. Затем установите для свойства Text следующих трех кнопок значения Очистить рисунок, Установить цвет фона и Закрыть. Then set the Text properties of the next three buttons to Clear the picture, Set the background color, and Close.

Давайте зададим размер кнопок и разместим их таким образом, чтобы они были выровнены по правой стороне панели. Let’s size the buttons and arrange them so they align to the right side of the panel. Выберите элемент управления FlowLayoutPanel и обратите внимание на его свойство FlowDirection. Choose the FlowLayoutPanel and look at its FlowDirection property. Измените его значение на RightToLeft. Change it so it’s set to RightToLeft.

Кнопки должны сами выровняться по правой стороне ячейки и изменить свой порядок таким образом, чтобы кнопка Показать рисунок располагалась с правой стороны. The buttons should align themselves to the right side of the cell, and reverse their order so that the Show a picture button is on the right.

Если кнопки по-прежнему остаются в неправильном порядке, можно перетащить кнопки вокруг элемента управления FlowLayoutPanel для расположения их в произвольном порядке. If the buttons are still in the wrong order, you can drag the buttons around the FlowLayoutPanel to rearrange them in any order. Можно выбрать кнопку и перетащить ее влево или вправо. You can choose a button and drag it left or right.

Щелкните кнопку Закрыть, чтобы выбрать ее. Choose the Close button to select it. Затем выберите остальные кнопки, удерживая нажатой клавишу CTRL. Then, to choose the rest of the buttons at the same time, press and hold the Ctrl key and choose them, too.

Выделив все кнопки, перейдите к окну Свойства и прокрутите его вверх до свойства AutoSize. After you’ve selected all the buttons, go to the Properties window and scroll up to the AutoSize property. Это свойство указывает кнопке автоматически изменять свой размер так, чтобы весь текст мог разместиться на ней. This property tells the button to automatically resize itself to fit all of its text. Задайте значение true. Set it to True.

Кнопки теперь должны иметь соответствующий размер и быть расположены в правильном порядке. Your buttons should now be sized properly and be in the right order. (Пока выделены все четыре кнопки, можно одновременно изменить все четыре свойства AutoSize.) На рисунке ниже показаны эти четыре кнопки. (As long as all four buttons are selected, you can change all four AutoSize properties at the same time.) The following image shows the four buttons.

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

Теперь снова запустите программу, чтобы увидеть изменения. Now run your program again to see your changes.

Обратите внимание, что при нажатии кнопок и установке флажка пока ничего не происходит,—однако вскоре все заработает. Notice that the buttons and the check box don’t do anything yet—but they will, soon.

Продолжить или повторить пройденный материал To continue or review

Следующий раздел руководства: Шаг 6. Присвоение имен элементам управления «Кнопка» . To go to the next tutorial step, see Step 6: Name your button controls.