Шаг 6. Присвоение имен элементам управления «Кнопка» Step 6: Name your button controls

В форме существует только один элемент управления PictureBox. There’s only one PictureBox on your form. Когда он был добавлен, интегрированная среда разработки автоматически присвоила ему имя pictureBox1. When you added it, the IDE automatically named it pictureBox1. Существует только один элемент управления CheckBox с именем checkBox1. There’s only one CheckBox, which is named checkBox1. Скоро вы напишите код, которым будете обращаться к элементам управления CheckBox и PictureBox. Soon, you’ll write some code, and that code will refer to the CheckBox and PictureBox. Так как существует только по одному их экземпляру, то становится ясно, что означает упоминание имен pictureBox1 или checkBox1 в коде. Because there’s only one of each of these controls, you’ll know what it means when you see pictureBox1 or checkBox1 in your code.

В Visual Basic по умолчанию первая буква любого имени элемента управления является заглавной, поэтому у элементов управления имена PictureBox1, CheckBox1 и так далее. In Visual Basic, the default first letter of any control name is initial cap, so the names are PictureBox1, CheckBox1, and so on.

В форме есть четыре кнопки. Интегрированная среда разработки назвала их как button1, button2, button3 и button4. There are four buttons on your form, and the IDE named them button1, button2, button3, and button4. Только по их текущему имени нельзя узнать, какая кнопка является кнопкой Закрыть , а какая кнопкой Показать рисунок . By just looking at their current names, you don’t know which button is the Close button and which one is the Show a picture button. Вот почему присвоение элементам управления в виде кнопок более осмысленных названий полезно. That’s why giving your button controls more informative names is helpful.

Присвоение имен элементам управления «Кнопка» To name your button controls

В форме нажмите кнопку Закрыть . On the form, choose the Close button. (Если все кнопки все еще выделены, для отмены выделения нажмите клавишу ESC.) Прокрутите содержимое окна Свойства, пока не появится свойство (Name) . (If you still have all the buttons selected, choose the Esc key to cancel the selection.) Scroll in the Properties window until you see the (Name) property. (Свойство (Name) расположено в верхней части, когда свойства расположены в алфавитном порядке.) Измените имя на closeButton, как показано на снимке экрана ниже. (The (Name) property is near the top when the properties are alphabetical.) Change the name to closeButton, as shown in the following screenshot.

_Окно Свойства _ с именем *closeButton_ * Properties _ _window with *closeButton _name*

Попробуйте изменить имя кнопки на close Button (с пробелом между словами close и Button). Try changing the name of your button to close Button, with a space between the words «close» and «Button». В интегрированной среде разработки появится сообщение об ошибке: «Недопустимое значение свойства». When you do so, the IDE displays an error message: «Property value is not valid.» Пробелы (а также несколько других символов) запрещено использовать в именах элементов управления. Spaces (and a few other characters) are not allowed in control names.

Переименуйте другие три кнопки как backgroundButton, clearButton, showButton. Rename the other three buttons to backgroundButton, clearButton, and showButton. Имена можно проверить в раскрывающемся списке селектора элементов управления в окне Свойства . You can verify the names by choosing the control selector drop-down list in the Properties window. Отобразятся новые имена кнопок. The new button names appear.

Двойным щелчком нажмите кнопку Показать рисунок в форме. Double-click the Show a picture button on the form. В качестве альтернативы можно нажать кнопку Показать рисунок в форме, а затем нажать клавишу ВВОД. As an alternative, choose the Show a picture button on the form, and then press the Enter key. При этом в главном окне интегрированной среды разработки открывается дополнительная вкладка, которая называется Form1.cs. When you do, the IDE opens an additional tab in the main window named Form1.cs. (Если вы используете Visual Basic, она называется Form1.vb.) (If you’re using Visual Basic, the tab is named Form1.vb).

На этой вкладке отображается файл кода для формы, как показано на снимке экрана ниже. This tab displays the code file behind the form, as shown in the following screenshot.

**Вкладка Form1.cs* _ с_кодом C# **Form1.cs* _ _tab with C# code

На вкладке Form1.cs или Form1.vb кнопка showButton может отображаться как ShowButton. Your Form1.cs or Form1.vb tab might display showButton as ShowButton instead.

Обратите внимание на эту часть кода. Focus on this part of the code.

Используйте элемент управления языка программирования в правом верхнем углу этой страницы, чтобы просмотреть фрагмент кода на C# или Visual Basic. Use the programming language control at the top right of this page to view either the C# code snippet or the Visual Basic code snippet.

Вы видите код showButton_Click() (или ShowButton_Click() ). You’re looking at code called showButton_Click() (alternatively, ShowButton_Click() ). Интегрированная среда разработки добавила его в код формы при открытии файла кода для кнопки showButton . The IDE added this to the form’s code when you opened the code file for the showButton button. Во время разработки при открытии файла кода для элемента управления в форме для элемента управления создается код, если он еще не существует. At design-time, when you open the code file for a control in a form, code is generated for the control if it doesn’t already exist. Этот код, известный как метод, выполняется при запуске приложения и выборе элемента управления (в данном случае кнопки Показать рисунок). This code, known as a method, runs when you run your app and choose the control — in this case, the Show a picture button.

Снова выберите вкладку конструктора Windows Forms (Form1.cs [Design]), а затем откройте файл кода для кнопки Очистить рисунок, чтобы создать метод для нее в коде формы. Choose the Windows Forms Designer tab again (Form1.cs [Design]), and then open the code file for the Clear the picture button to create a method for it in the form’s code. Повторите это действие для двух оставшихся кнопок. Repeat this for the remaining two buttons. Каждый раз при этом действии среда интегрированной разработки добавляет в файл кода формы новый метод. Each time, the IDE adds a new method to the form’s code file.

Чтобы добавить еще один метод, откройте файл кода для элемента управления CheckBox в конструкторе Windows Forms, чтобы интегрированная среда разработки создала метод checkBox1_CheckedChanged() . To add one more method, open the code file for the CheckBox control in Windows Forms Designer to make the IDE add a checkBox1_CheckedChanged() method. Этот метод вызывается каждый раз, когда пользователь устанавливает или снимает флажок. That method is called whenever the user selects or clears the check box.

При работе с приложением необходимо часто переключаться между редактором кода и конструктором Windows Forms. When working on an app, you often move between the code editor and Windows Forms Designer. Среда интегрированной разработки упрощает передвижение по проекту. The IDE makes it easy to navigate in your project. Используйте Обозреватель решений, чтобы открыть конструктор Windows Forms, дважды щелкнув Form1.cs в C# или Form1.vb в Visual Basic, либо выберите Вид > Конструктор в строке меню. Use Solution Explorer to open Windows Forms Designer by double-clicking Form1.cs in C# or Form1.vb in Visual Basic, or on the menu bar, choose View > Designer.

Ниже показан новый код, который представлен в редакторе кода. The following shows the new code that you see in the code editor.

В вашем коде обработчики событий могут не отображаться в «верблюжьем» стиле. Your code might not display event handlers in «camelCase» letters.

Пять методов, которые были добавлены, называются обработчики событий, так как приложение вызывает их каждый раз, когда происходит событие (например, пользователь нажимает кнопку или устанавливает флажок). The five methods that you added are called event handlers, because your application calls them whenever an event (like a user choosing a button or selecting a box) happens.

При просмотре кода для элемента управления в интегрированной среде разработки во время разработки Visual Studio добавляет метод обработчика событий для элемента управления, если он не существует. When you view the code for a control in the IDE at design time, Visual Studio adds an event handler method for the control if one isn’t there. Например, при двойном щелчке по кнопке интегрированная среда разработки добавляет обработчик события Click, который вызывается каждый раз, когда пользователь нажимает кнопку. For example, when you double-click a button, the IDE adds an event handler for its Click event (which is called whenever the user chooses the button). Если дважды щелкнуть флажок, интегрированная среда разработки добавляет обработчик события CheckedChanged, который вызывается каждый раз, когда пользователь устанавливает или снимает флажок. When you double-click a check box, the IDE adds an event handler for its CheckedChanged event (which is called whenever the user selects or clears the box).

После добавления обработчика событий для элемента управления к нему можно вернуться в любой момент из конструктора Windows Forms с помощью двойного щелчка по элементу управления или выбрав Вид > Код в строке меню. After you add an event handler for a control, you can return to it at any time from Windows Forms Designer by double-clicking the control, or on the menu bar, choosing View > Code.

Имена являются важными при выполнении построения программы, и методы (включая обработчики событий) могут иметь любые имена, которые нужны. Names are important when you build programs, and methods (including event handlers) can have any name that you want. При добавлении обработчика событий с помощью интегрированной среды разработки она создает имя на основе имени элемента управления и обрабатываемого события. When you add an event handler with the IDE, it creates a name based on the control’s name and the event being handled.

Например, событие Click для кнопки с именем showButton вызывает метод обработчика событий showButton_Click() (или ShowButton_Click() ). For example, the Click event for a button named showButton is called the showButton_Click() (alternatively, ShowButton_Click() ) event handler method. Также обычно после имени метода добавляются открывающая и закрывающая круглые скобки () для определения рассматриваемых методов. Also, opening and closing parentheses () are usually added after the method name to indicate that methods are being discussed.

Если вы решите изменить имя переменной кода, щелкните правой кнопкой мыши переменную в коде, а затем выберите команду Рефакторинг > Переименовать. If you decide you want to change a code variable name, right-click the variable in the code and then choose Refactor > Rename. Все экземпляры этой переменной в коде будут переименованы. All instances of that variable in the code are renamed. Дополнительные сведения см. в разделе Оптимизация кода с помощью переименования. For more information, see Rename refactoring.

Дальнейшие действия Next steps

Следующий раздел руководства: Шаг 7. Добавление компонентов диалогового окна в форму . To go to the next tutorial step, see Step 7: Add dialog components to your form.

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

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