DelphiLab - Крестообразный сплиттер

Крестообразный сплиттер

Написал Alexeis

30.07.2009

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

Однако среди компонентов делфи такого компонента нет. Далее будет показано как делается крестообразный сплиттер на делфи из 3х обычных сплитеров

Для начала кидаем на форму 2е панельки. У первой назначаем свойство align в alTop, затем кидаем на форму первый сплитер (TSplitter) он находиться на вкладке Additional. Назначаем сплитеру свойство align в alTop. Теперь разворачиваем вторую панель на все оставшееся пространство. Свойство align в alClient

В результате должно получиться похоже на это

Далее на верхнюю панель помещаю 2 компонента Memo. У первого устанавливаю свойство align в alLeft. Затем на верхнюю панель помещаю второй сплиттер. Ему также нужно установить align в alLeft. Затем второй компонент Memo расширяем на всю оставшуюся часть панели. align в alClient Должно получиться примерно так

С нижней панелькой поступаем аналогично. В результате получаем

Почти все сделано осталось синхронизировать 2й и 3й сплиттеры. У сплиттера есть свойство OnMoved. Теперь если сделать на него обработчик и синхронизировать размеры, то желаемая цель будет почти достигнута

procedure TForm1.Splitter2Moved(Sender: TObject);
begin
  Memo3.Width := Memo1.Width;
end;
 
procedure TForm1.Splitter3Moved(Sender: TObject);
begin
  Memo1.Width := Memo3.Width;
end;

Те компоненты Memo которые в правой части сами примут необходимый размер.

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

procedure TForm1.FormCreate(Sender: TObject);
begin
  Memo3.Width := Memo1.Width;
end;

Теперь осталось еще 2 штриха. При перемещении вертикальных сплиттеров видно что они не цельные. Исправим это изменив свойство ResizeStyle на rsUpdate. Для этого выделим все 3 сплиттера удерживая клавишу Shift. См. рисунок.

И второй штрих. Можно заметить что панельки выдавлены вверх и между ними возникла полоска. Убираем ее. Выделяем обе панельки (в Object Tree View удерживая клавишу ctrl). находим свойство BevelOuter и убираем его. См. рисунок.