Шаг 4. Создание макета формы с помощью элемента управления TableLayoutPanel Step 4: Lay out your form with a TableLayoutPanel control

На этом шаге в форму добавляется элемент управления TableLayoutPanel. In this step, you add a TableLayoutPanel control to your form. TableLayoutPanel помогает должным образом выровнять элементы управления в форме, которая будет добавлена позднее. The TableLayoutPanel helps properly align controls in the form that you’ll add later.

Создание макета формы с помощью элемента управления TableLayoutPanel How to lay out your form with a TableLayoutPanel control

С левой стороны интегрированной среды разработки Visual Studio выберите вкладку Панель элементов. (Можно также выбрать в строке меню пункт Вид > Панель элементов или нажать клавиши CTRL+ALT+X.) On the left side of the Visual Studio IDE, choose the Toolbox tab. (Alternatively, choose View > Toolbox from the menu bar, or press Ctrl+Alt+X.)

Выберите маленький треугольник рядом с группой Контейнеры, чтобы открыть ее, как показано на снимке экрана ниже. Choose the small triangle symbol next to the Containers group to open it, as shown in the following screenshot.

*Группа*_ _ **Контейнеры** **Containers* _ _group*

В форму можно добавить такие элементы управления, как кнопки, флажки и метки. You can add controls like buttons, check boxes, and labels to your form. Дважды щелкните элемент управления TableLayoutPanel на панели элементов. Double-click the TableLayoutPanel control in the Toolbox. (Можно также перетащить элемент управления с панели элементов в форму.) В результате этого действия интегрированная среда разработки добавляет в форму элемент управления TableLayoutPanel, как показано на снимке экрана ниже. (Or, you can drag the control from the toolbox onto the form.) When you do this, the IDE adds a TableLayoutPanel control to your form, as shown in the following screenshot.

*Элемент управления*_ _ **TableLayoutPanel** **TableLayoutPanel* _ _control*

После добавления элемента управления TableLayoutPanel, если внутри формы появляется окно с заголовком Задачи TableLayoutPanel, чтобы закрыть его, щелкните в любом месте внутри формы. After you add your TableLayoutPanel, if a window appears inside your form with the title TableLayoutPanel Tasks, choose anywhere inside the form to close it. Далее в этом руководстве приводятся сведения об этом окне. You’ll learn more about this window later in the tutorial.

Обратите внимание, что панель элементов разворачивается, чтобы закрыть форму при выборе ее вкладки, и закрывается после щелчка за ее пределами. Notice how the Toolbox expands to cover your form when you choose its tab, and closes after you choose anywhere outside of it. Это функция автоматического скрытия интегрированной среды разработки. That’s the Auto Hide feature in the IDE. Ее можно включить или отключить для любого из окон путем нажатия значка канцелярской кнопки в правом верхнем углу окна, чтобы включить автоматическое скрытие и закрепление на месте. You can turn it on or off for any of the windows by choosing the pushpin icon in the upper-right corner of the window to toggle Auto Hide and lock it in place. Появляется значок канцелярской кнопки, как показано на рисунке ниже. The pushpin icon appears as follows.

*Значок*_ _ **канцелярской кнопки** **Pushpin* _ _icon*

Убедитесь, что элемент управления TableLayoutPanel выделен, щелкнув его. Be sure the TableLayoutPanel is selected by choosing it. Чтобы убедиться в том, что элемент управления выделен, необходимо посмотреть на раскрывающийся список в верхней части окна Свойства, как показано на снимке экрана ниже. You can verify what control is selected by looking at the drop-down list at the top of the Properties window, as shown in the following screenshot.

*Окно **Свойства** _ с* *элементом управления **TableLayoutPanel*_ **Properties* _ window showing* ***TableLayoutPanel** _control*

Нажмите кнопку В алфавитном порядке на панели инструментов в окне Свойства. Choose the Alphabetical button on the toolbar in the Properties window. Список свойств в окне Свойства отсортируется в алфавитном порядке, что упрощает поиск свойств в этом учебнике. This sorts the list of properties in the Properties window in alphabetical order, which makes it easier to locate properties in this tutorial.

Селектор элементов управления представляет собой раскрывающийся список в верхней части окна Свойства. The control selector is a drop-down list at the top of the Properties window. В этом примере он показывает, что выбран элемент управления с именем tableLayoutPanel1 . In this example, it shows that a control called tableLayoutPanel1 is selected. Элементы управления можно выбирать, либо выделяя область в конструкторе Windows Forms, либо выбирая их в селекторе элементов управления. You can select controls either by choosing an area in Windows Forms Designer or by choosing from the control selector.

Теперь, когда выделен элемент управления TableLayoutPanel, найдите свойство Dock и выберите Dock, значение которого должно быть равным None. Now that the TableLayoutPanel is selected, find the Dock property and choose Dock, which should be set to None. Обратите внимание, что рядом со значением появляется стрелка раскрывающегося списка. Notice that a drop-down arrow appears next to the value. Щелкните стрелку, а затем нажмите кнопку Заполнение (большая кнопка в середине), как показано на снимке экрана ниже. Choose the arrow, and then select the Fill button (the large button in the middle), as shown in the following screenshot.

*Окно **Свойства**, в котором нажата кнопка* **Заполнение**_ **Properties* _ window with* ***Fill** _selected*

Под закреплением в Visual Studio понимается прикрепление окна к другому окну или области в интегрированной среде разработки. Docking in Visual Studio refers to when a window is attached to another window or area in the IDE. Например, окно Свойства можно оставить неприкрепленным—в пределах окна Visual Studio—или же закрепить в области Обозреватель решений. For example, the Properties window can be undocked—that is, unattached and free-floating within Visual Studio—or it can be docked against Solution Explorer.

Обратите внимание на то, что после присвоения свойству Dock элемента управления TableLayoutPanel значения Fill панель заполнит всю форму. After you set the TableLayoutPanel Dock property to Fill, notice that the panel fills the entire form. Если снова изменить размер формы, элемент управления TableLayoutPanel останется закрепленным и сам изменит свой размер для заполнения формы. If you resize the form again, the TableLayoutPanel stays docked, and resizes itself to fit.

Элемент управления TableLayoutPanel работает как таблица в Microsoft Office Word — он содержит строки и столбцы и отдельная ячейка может занимать несколько строк и столбцов. A TableLayoutPanel works like a table in Microsoft Office Word: It has rows and columns, and an individual cell can span multiple rows and columns. Каждая ячейка может содержать один элемент управления (например, кнопку, флажок или метку). Each cell can hold one control (like a button, a check box, or a label). Этот элемент управления TableLayoutPanel должен содержать элемент управления PictureBox, который займет всю верхнюю строку, элемент управления CheckBox в левой нижней ячейке и четыре элемента управления Button в правой нижней ячейке. Your TableLayoutPanel should have a PictureBox control spanning its entire top row, a CheckBox control in its lower-left cell, and four Button controls in its lower-right cell.

В данный момент элемент управления TableLayoutPanel содержит две одинаковые по размеру строки и два одинаковых по размеру столбца. Currently, the TableLayoutPanel has two equal-size rows and two equal-size columns. Давайте изменим их размер, чтобы верхняя строка и правый столбец были намного больше. Let’s resize them so the top row and right column are both much bigger. В конструкторе Windows Forms выберите элемент управления TableLayoutPanel. In Windows Forms Designer, select the TableLayoutPanel. В правом верхнем углу расположена маленькая кнопка с черным треугольником, как показано на рисунке ниже. In the upper-right corner, there is a small black triangle button, which appears as follows.

*Кнопка_ _ **с треугольником*** **Triangle* _ _button*

Это кнопка указывает, что элемент управления содержит задачи, которые помогут автоматически задать его свойства. This button indicates that the control has tasks that help you set its properties automatically.

Чтобы отобразить список задач элемента управления, как показано на снимке экрана ниже, нажмите треугольник. Choose the triangle to display the control’s task list, as shown in the following screenshot.

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

Выберите задачу Изменить строки и столбцы, чтобы открыть окно Стили столбцов и строк. Choose the Edit Rows and Columns task to display the Column and Row Styles window. Выберите Столбец1, нажмите кнопку Проценты и задайте его размер равным 15 %, введя значение 15 в поле Проценты. Choose Column1, and set its size to 15 percent by being sure the Percent button is selected and entering 15 in the Percent box. (Это элемент управления NumericUpDown, который будет использоваться в одном из руководств далее.) Выберите Столбец2 и задайте значение 85 процентов. (That’s a NumericUpDown control, which you’ll use in a later tutorial.) Choose Column2 and set it to 85 percent. Пока не нажимайте кнопку ОК, так как окно будет закрыто. Don’t choose the OK button yet, because the window will close. (Но если это было сделано, его можно открыть повторно с помощью списка задач.) (But if you do, you can reopen it by using the task list.)

*Стили столбцов и строк_ _ **TableLayoutPanel*** **TableLayoutPanel* _ _column and row styles*

В раскрывающемся списке Показать в верхней части окна Стили столбцов и строк выберите пункт Строки. From the Show drop-down list at the top of the Column and Row Styles window, choose Rows. Задайте для Row1 значение 90 процентов, а для Row2 10 процентов. Set Row1 to 90 percent and Row2 to 10 percent.

Нажмите кнопку ОК . Choose the OK button. Элемент управления TableLayoutPanel теперь должен содержать большую верхнюю строку, маленькую нижнюю строку, маленький левый столбец и большой правый столбец. Your TableLayoutPanel should now have a large top row, a small bottom row, a small left column, and a large right column. (Размеры строк и столбцов в элементе управления TableLayoutPanel можно изменить, выбрав элемент tableLayoutPanel1 в форме, а затем перетащив границы его строк и столбцов.) (You can resize the rows and columns in the TableLayoutPanel by choosing tableLayoutPanel1 in the form and then dragging its row and column borders.)

*Элемент **Form1** _ _(средство просмотра изображений) с измененным размером* **TableLayoutPanel** **Form1* _ _(Picture Viewer) with resized* **TableLayoutPanel**

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

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

Предыдущий раздел: Шаг 3. Задание свойств формы. To return to the previous tutorial step, see Step 3: Set your form properties.