TableLayoutPanel

Введение
Наверное каждый из нас сталкивался с ситуацией, когда несколько часов заботливо расставляешь контролы на форме. Подбираешь размеры контролов. Вычитываешь до миллиметра. Вылизываешь все. Получаешь конфетку, что глаз не оторвать. 
Запускаешь, любуешься. Разворачиваешь форму на весь экран и ... о ужас. Все что ты заботливо расставлял на форме стало напоминать убожество. Появилась куча пустого пространства. Контролы лежат не так как задумано. А если, нечаянно, запустить приложение при другом разрешении, то ... В общем – не красиво.
Хватаешься за голову. Лазишь по свойствам контролов, по MSDN. Раскапываешь, что есть неплохие свойства контрола Dock и Anchor. C помощью них, кое как, приводишь свою форму в более менее приличный вид. 
Но, к своему разочарованию, понимаешь, что докинг и анкоринг не совсем удовлетворяет твоим требованиям. Возникает вопрос как, например, разместить несколько кнопок в ряд. Расстояние между которыми фиксировано, а они сами меняют свои размеры в зависимости от размеров формы. Как?
Можно, конечно, повеситься на событие формы Resize и пересчитывать размеры и положение контролов, но это, честно говоря, геморой. Да и не может в такой продвинутой технологии как .Net отсутствовать возможность автоматического изменения размеров контрола. Пробежался я по списку контролов и ..., довольно скоро, я нашел то что искал. Представляю вам TableLayoutPanel. Прошу любить и жаловать.

Где взять такое чудо и что с ним можно делать? 
Все очень просто: Toolbox --> Containers --> TableLayoutPanel.

Хватаем ее и бросаем на форму. Появляется небольшая таблица с двумя колонками и двумя строчками. Попробовали поизменять размер таблицы и, о чудо, колонки и строки ее то же меняются соответственно.

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

Оказывается тут тоже все просто. Можно добавлять и удалять столбцы и строки. А можно и редактировать колонки и строки в дизайнере. 

Настойка TableLayoutPanel в дизайнере.
Нажимаем Edit Rows and Columns... Появляется окно. С помощью которого можно не только добавлять, но и настраивать нужные колонки и строки. Дальше я буду писать о колонках, но все это будет в равной мере относиться и к строкам.
Всего есть три типа размера колонок (соответственно и строк):

• абсолютный;
• процентный;
• автоматический;

Абсолютный – размер колонки фиксированный, например 30 пикселей. Тогда, что бы мы ни делали с таблицей размер этой колонки так и останется 30 пикселей.
Процентный – задаем размер колонки в зависимости от ширины (для строк – высоты) всей таблицы. Если установить 25% то, что бы мы ни делали, размер колонки будет составлять ровно четверть (25%) ширины таблицы.
Автоматический – ничего задать нельзя, но размер, судя по названию, должен меняться автоматически. Наверное заполнять до конца пустое пространство, подумал я. Решил попробовать. Выбрал тип AutoSize и ... колонка пропала. Вот незадача. Полез я в MSDN, а там написано, что такая колонка будет подстраиваться под размер контролов, расположенных в этой колонке. Попробовал, вернув колонке % размер и кинув кнопку в ячейку колонки, – точно все работает как надо.
 
Как разместить несколько контролов в одной ячейке таблицы?
Ответ: никак! Ну нельзя такое сделать. Попытался кинуть в ячейку второй контрол, он кинулся, но предыдущий контрол из ячейки выпрыгнул. Но не беда. Это не критично –можно добавить еще одну колонку или строку в таблицу.

ColSpan и RowSpan
А что если я хочу чтобы мой контрол заполнил не одну ячейку а 2, 3... Стал лазить по свойствам и... ничего не нашел. Опять полез в MSDN. Нашел нужную статью. Оказывается нужные свойства есть, но не у таблицы, а у контрола, расположенного в таблице. Кто бы мог подумать.

Расположение контролов в таблице
Внутри ячейки (ячеек) контрол может лежать как угодно. Он подчиняется тем же правилам, как и в любой другой ограниченной части формы. Можно использовать докинг, а можно и анкоринг.

Пример: Расположение 6 кнопок в 2 ряда и три колонки. С расстоянием между ними 20 пикселей по горизонтали и 10 пикселей по вертикали.
Значит так. Нам нужна TableLayoutPanel с двумя строками и тремя колонками. Одинаково размера. Ширина ячеек – по 33%, высота – 50%.
Думаю никого не затруднит создать такую таблицу.

Кликаем на первую ячейку. И добавляем 6 кнопок. Они сами расположатся по ячейкам (у меня в этом месте конкретно заглючил дизайнер, не хотел обновлять таблицу, переоткрыл дизайнер формы, стало все на свои места).

В принципе готово. Пробуем поизменять размеры таблицы. Меняются расстояния между кнопками, а не сами контролы. 

Нам это нужно? Нет. Идем дальше.
Выбираем все кнопки (если кто не знает, кликаем на них с зажатой клавишей Shift). Залазим в поле Anchor и выбираем все что видим: лево, право, верх, низ. Ого, наши кнопки заполнили почти всю свою ячейку. Пробуем ресайзить таблицу – все как и нужно было. 

Действительно? Нет! Перечитываем условие:  
Исправляемся: выделяем кнопки, лезем в свойство Margin (открываем его) и выставляем верх-низ по 5, лево-право по 10. 

Теперь все. Устанавливаем у таблицы нормальную высоту (ну не нравятся мне эти пузатые кнопки).
В дополнение, установим анкор на саму таблицу (чтобы она ресайзилась вместе с формой). Запускаем приложение и любуемя полодами рук своих.

Это все. Спасибо за внимание. 
C уважением, ваш ivashkanet.
P.S. Жду ваших отзывов. 

Это ты по поводу недавно обсуждавшейся темы о кривом докинге? )) В итоге я убедился в том, что не так всё с ним плохо. Неадыкватное поведение только "по умолчанию".

Немного похоже на таблицы в HTML. А как с динамическим добавлением контролов? 

Как я посмотрю, это твоя больная тема  
ОК, добавим 

TableLayoutPanel -- взгляд изнутри
Залез я, значится, в дизайнер форм, а там оказывается все проще пареной репы.

P.S. Решил я посмотреть куда запихивает новое свойство контролов RowSpan, оказалось в секцию контрла, но обращается к tableLayoutPanel1
Зачем такой изврат --- неизвесно, но и не столь важно.
P.P.S. Если попытаться добавить два контрола на одно место, то, как говорилось выше, первый выскочит, но его координаты какими были таким и останутся.
А если поставить в ячейку кторой нет, то дизайнер создаст нужное количество строк и столбцов.
В общем, нужно быть ооочень аккуратным с этим контролом и, ИМХО, лучше не настраивать его ручками. 

господа! А как эту штуку оживить в compact framework'е? нету ее там....:(((((
А масштабировать очень надо! подскажите пожалста!

А можно как-то добавить контролы динамически не залазя в дизайнер форм? Ну скажем клацнул на кнопку и у тебя TableLayoutPanel заполнился TextBox - сами? Пожалуйста напишите, если есть время и несложно. Я хочу таким образом сделать табличку из диманически созданных TextBox - ов.

Добавлено через 2 минуты и 12 секунд
Вот типа такого(это пример, а не готовый вариан. Тут не все верно. Поэтому не ругайте меня если что)).

Конечно можно. Это есть в 4м посте темы

Это сообщение отредактировал(а) v1rtu0z - 25.11.2009, 12:29

Надо разместить два контрола, которые будут расширяться процентно и 1 контрол между ними, который имеет автосайз?
Можно ли как-то избежать указания точных цифр для процентов, если расширяться контролы будут одинаково?

Это сообщение отредактировал(а) Blazkovicz - 9.12.2009, 11:21

Приветствую! Это все хорошо, но у меня на форме 56 таких панелей)) и все это грузится долго и не эстетично) может знает кто, как избежать этого?)