Шаг 4. Создание макета формы с помощью элемента управления TableLayoutPanel

На этом шаге выполняется добавление в форму элемента управления TableLayoutPanel.

Для видео версии этого раздела см. в разделе Учебное руководство 1. Создание приложения для просмотра рисунков на языке Visual Basic - видео 2 OR Учебное руководство 1. Создайте средство просмотра видео в c# - 2 изображения.

Создание макета формы с помощью элемента управления TableLayoutPanel

1. Перейдите в конструктор Windows Forms.Посмотрите на левую сторону формы и найдите вкладку Панель элементов.Наведите указатель на вкладку Панель элементов и задержите над ней. Появится "Панель элементов"(или в меню Вид выберите пункт Панель элементов).

2. Щелкните по знаку плюс рядом с группой Контейнеры, чтобы открыть ее как на рисунке ниже.

   Группа "Контейнеры"

   

3. В форму можно добавить такие элементы управления, как кнопки, флажки и метки.Дважды щелкните элемент управления TableLayoutPanel в панели элементов.В результате этого действия интегрированная среда разработки добавляет в форму элемент управления TableLayoutPanel, как показано на рисунке ниже.

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

   

   Примечание
   После того, как добавляется элемент управления TableLayoutPanel, если внутри формы появляется окно с заголовком Задачи TableLayoutPanel, чтобы закрыть его, щелкните в любом месте внутри формы.Далее в этом руководстве приводятся сведения об этом окне.

   Примечание

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

   Значок канцелярской кнопки

   

4. Убедитесь, что выделен элемент управления TableLayoutPanel — для этого щелкните по нему.Чтобы проверить, что элемент управления выделен, необходимо посмотреть в раскрывающийся список в верхней части окна Свойства, как показано на рисунке ниже.

   Окно "Свойства", в котором показан элемент управления TableLayoutPanel

   

5. Селектор элементов управления представляет раскрывающийся список в верхней части окна Свойства.В данном пример он показывает, что выделен элемент управления с именем tableLayoutPanel1.Элементы управления можно выделять с помощью щелчка в конструкторе Windows Forms или выбирая их в селекторе элементов управления.Теперь, когда выделен элемент управления TableLayoutPanel найдите свойство Dock и щелкните Dock, значение которого должно быть равным None.Обратите внимание, что рядом со значением появляется стрелка раскрывающегося списка.Нажмите стрелку, затем нажмите кнопку Заполнение (большая кнопка по середине), как показано на рисунке ниже.

   Окно "Свойства", в котором нажата кнопка "Заполнение"

   

6. После того, как у элемента управления TableLayoutPanel свойству Dock присвоено значение Fill, панель заполняет всю форму.Если снова изменить размер формы, элемент управления TableLayoutPanel останется закрепленным и сам изменит свой размер для заполнения формы.

   Примечание

   Элемент управления TableLayoutPanel работает как таблица в Microsoft Office Word — он содержит строки и столбцы и отдельная ячейка может занимать несколько строк и столбцов.Каждая ячейка может содержать один элемент управления (например, кнопку, флажок или метку).Этот элемент управления TableLayoutPanel будет содержать элемент управления PictureBox, который займет всю верхнюю строку, элемент управления CheckBox в левой нижней ячейке, и четыре элемента управления Button в правой нижней ячейке.

   Примечание

   Хотя было сказано, что каждая ячейка может содержать только один элемент управления, нижняя правая ячейка содержит четыре элемента управления Button.Это так, потому что можно разместить элемент управления в ячейке, которая содержит другие элементы управления.Такой тип элементов управления называется "контейнер", и элемент управления TableLayoutPanel является контейнером.Далее в этом руководстве приводятся сведения об этом типе элементов.

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

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

   

   Это кнопка указывает, что элемент управления содержит задачи, которые помогут автоматически задать его свойства.

8. Чтобы отобразить список задач элемента управления, как показано на рисунке ниже, нажмите треугольник.

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

   

9. Щелкните задачу Изменить строки и столбцы, чтобы открыть окно Стили столбцов и строк.Щелкните Column1, убедитесь, что нажата кнопка Проценты, установите его размер равным 15 процентам — введите 15 в поле Проценты.(это элемент управления NumericUpDown, который далее будет использоваться в этом руководстве). Щелкните Column2 и задайте значение 85 процентов.Пока не нажимайте кнопку ОК, так как окно будет закрыто.(но если это было сделано, его можно открыть повторно с помощью списка задач).

10. В раскрывающемся списке Показать в верхней части окна выберите Строки.Задайте для Row1 значение 90 процентов, а для Row2 10 процентов.

11. Нажмите кнопку ОК.Элемент управления TableLayoutPanel теперь должен содержать большую верхнюю строку, маленькую нижнюю строку, маленький левый столбец и большой правый столбец.Изменить размер строк и столбцов в элементе управления TableLayoutPanel можно с помощью перетаскивания их границ.

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

• Следующий шаг руководства см. в разделе Шаг 5. Добавление элементов управления в форму.

• Предыдущий шаг руководства см. в разделе Шаг 3. Настройка свойств формы.