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

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

Программное добавление элементов управления в 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.

Step 5: Add controls to your form

In this step, you add controls, such as a PictureBox control and a CheckBox control, to your form. You then add Button controls to your form.

How to add controls to your form

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.

Double-click the PictureBox item to add a PictureBox control to your form. Because the TableLayoutPanel is docked to fill your form, the IDE adds the PictureBox control to the first empty cell (the upper left corner).

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 tasks

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.

In the PictureBox Tasks menu from the PictureBox control, choose the Dock in parent container link. This automatically sets the PictureBox Dock property to 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.

Make the PictureBox span both columns by changing its ColumnSpan property. In the PictureBox, choose the PictureBox control and set its ColumnSpan property to 2. Also, when the PictureBox is empty, you want to show an empty frame. Set its BorderStyle property to Fixed3D.

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. To fix this, choose the PictureBox, delete it, choose the TableLayoutPanel, and then add a new PictureBox.

Choose the TableLayoutPanel on the form and then add a CheckBox control to the form. Double-click the CheckBox item in the Toolbox to add a new CheckBox control to the next free cell in your table. Because a PictureBox takes up the first two cells in the TableLayoutPanel, the CheckBox control is added to the lower-left cell. Choose the Text property and type in the word Stretch, as shown in the following image.

TextBox control with Stretch property

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). Then, dock the FlowLayoutPanel in the TableLayoutPanel. 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.

A FlowLayoutPanel is a container that arranges other controls in a row, one after another. 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.

Here, you’ll use a FlowLayoutPanel to hold four buttons. 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. In this example, the lower-right cell of the TableLayoutPanel contains four button controls. Why? Because the FlowLayoutPanel is a container control, which is a control in a cell that holds other controls.)

To add buttons

Choose the new FlowLayoutPanel that you added. 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. 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. This time, choose button2, and then from the menu bar, choose Edit > Copy (or press Ctrl+C). Next, choose Edit > Paste from the menu bar (or press Ctrl+V) to paste a copy of your button. Now paste it again. 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.

Choose the first button and set its Text property to Show a picture. 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. Choose the FlowLayoutPanel and look at its FlowDirection property. 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.

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. Then, to choose the rest of the buttons at the same time, press and hold the Ctrl key and choose them, too.

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. Set it to True.

Your buttons should now be sized properly and be in the right order. (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

To go to the next tutorial step, see Step 6: Name your button controls.