Советы по использованию элемента управления TableLayoutPanel Best Practices for the TableLayoutPanel Control

TableLayoutPanelЭлемент управления предоставляет мощные функции макета, которые следует тщательно продумать перед использованием в Windows Forms. The TableLayoutPanel control provides powerful layout features that you should consider carefully before using on your Windows Forms.

Рекомендации Recommendations

Приведенные ниже рекомендации помогут вам использовать TableLayoutPanel элемент управления в качестве лучшего преимущества. The following recommendations will help you use the TableLayoutPanel control to its best advantage.

Целевое использование Targeted Use

Используйте TableLayoutPanel элемент управления с осторожностью. Use the TableLayoutPanel control sparingly. Его не следует использовать во всех ситуациях, требующих макета с изменяемыми размерами. You should not use it in all situations that require a resizable layout. В следующем списке описаны макеты, которые лучше всего используют TableLayoutPanel элемент управления: The following list describes layouts that benefit most from the use of the TableLayoutPanel control:

Макеты, в которых имеется несколько частей формы, размер которых пропорционально изменен. Layouts in which there are multiple parts of the form that resize proportionally to each other.

Макеты, которые будут динамически изменяться или создаваться во время выполнения, например формы ввода данных, которые добавляются или вычитаются на основе настроек пользователем. Layouts that will be modified or generated dynamically at run time, such as data entry forms that have user-customizable fields added or subtracted based on preferences.

Макеты, которые должны оставаться в общем фиксированном размере. Layouts that should remain at an overall fixed size. Например, у вас может быть диалоговое окно, размер которого должен быть меньше 800 x 600, но необходимо поддерживать локализованные строки. For example, you may have a dialog box that should remain smaller than 800 x 600, but you need to support localized strings.

В следующем списке описаны макеты, которые не имеют существенного смысла при использовании TableLayoutPanel элемента управления: The following list describes layouts that do not benefit greatly from using the TableLayoutPanel control:

Простые формы ввода данных с одним столбцом меток и одним столбцом областей ввода текста. Simple data entry forms with a single column of labels and a single column of text-entry areas.

Формы с одной большой областью просмотра, которая должна заполнить все доступное пространство при изменении размера. Forms with a single large display area that should fill all the available space when a resize occurs. Примером этого является форма, в которой отображается один PropertyGrid элемент управления. An example of this is a form that displays a single PropertyGrid control. В этом случае используйте привязку, так как ничего не нужно расширять при изменении размера формы. In this case, use anchoring, because nothing else should expand when the form is resized.

Тщательно выбирайте элементы управления, которые должны находиться в TableLayoutPanel элементе управления. Choose carefully which controls need to be in a TableLayoutPanel control. Если место для текста увеличивается на 30% с помощью привязки, рекомендуется использовать Anchor только свойство. If you have room for your text to grow by 30% using anchoring, consider using the Anchor property only. Если вы можете оценить пространство, необходимое для макета, используйте Dock и проще, Anchor чем оценивать детали оставшегося пространства и AutoSize поведения. If you can estimate the space required by your layout, use of Dock and Anchor is easier than estimating the details of remaining space and AutoSize behavior.

Как правило, при проектировании макета с помощью TableLayoutPanel элемента управления следует максимально упростить его работу. In general, when designing your layout with the TableLayoutPanel control, keep the design as simple as possible.

Использование окна «Структура документа» Use the Document Outline Window

Окно «Структура документа» предоставляет представление макета в виде дерева, которое можно использовать для управления связями элементов управления по оси z и родители-потомки. The Document Outline window gives you a tree view of your layout, which you can use to manipulate the z-order and parent-child relationships of your controls. В меню Вид выберите другие окна, а затем выберите Структура документа. From the View menu, select Other Windows, then select Document Outline.

Избегайте вложенности Avoid Nesting

Избегайте вложения других TableLayoutPanel элементов управления в TableLayoutPanel элемент управления. Avoid nesting other TableLayoutPanel controls within a TableLayoutPanel control. Отладка вложенных макетов может оказаться сложной задачей. Debugging nested layouts can be difficult.

Избегайте визуального наследования Avoid Visual Inheritance

TableLayoutPanelЭлемент управления не поддерживает визуальное наследование в конструктор Windows Forms в Visual Studio. The TableLayoutPanel control does not support visual inheritance in the Windows Forms Designer in Visual Studio. TableLayoutPanelЭлемент управления в производном классе отображается как «заблокированный» во время разработки. A TableLayoutPanel control in a derived class appears as «locked» at design time.

Шаг 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.