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

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

Видеоверсию этого раздела см. на следующих страницах: Tutorial 1: Create a Picture Viewer in Visual Basic - Video 2 или Tutorial 1: Create a Picture Viewer in C# - Video 2.Эти видеоролики сняты с использованием более ранней версии Visual Studio, поэтому существуют небольшие различия в некоторых командах меню и других элементах пользовательского интерфейса.Однако концепции и процедуры аналогичны текущей версии Visual Studio.

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

1. На левой стороне среды разработки Visual Studio найдите вкладку Панель элементов.Выберите вкладку Панель элементов; появится панель элементов. (Или выберите в строке меню Вид, Панель элементов.)

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

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

   

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

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

   

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

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

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

   

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

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

   

5. Нажмите кнопку В алфавитном порядке на панели инструментов в окне Свойства.Это приведет к отображению списка свойств в окне Свойства в алфавитном порядке, что упрощает поиск свойств в этом учебнике.

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

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

   

   Под закреплением в Visual Studio понимается прикрепление окна к другому окну или области в интегрированной среде разработки.Например, окно "Свойства" можно открепить, т. е. отсоединить и оставить свободно плавающим в пределах Visual Studio или же закрепить в области Обозреватель решений.

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

   Примечание

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

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

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

   

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

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

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

   

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

    Стили столбцов и строк TableLayoutPanel

    

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

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

    Form1 с измененным размером TableLayoutPanel

    

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

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

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