Installing the Splitter & Resizing Width of the VCL Components

「～ 主として「幅」の変更に関する覚書 ～」

０．準備
１．最も簡単なリサイズ対応（幅の変更）･･･ AlignプロパティとSplitterの利用法
２．最も簡単なリサイズ対応（幅の変更）･･･ Anchorsプロパティの利用法
３．画面サイズの変更に追随（主として幅）
４．まとめ
５．お願いとお断り

DelphiのVCLコンポーネントTSplitterの使い方と画面のリサイズ対応の覚書。

Formの大きさは決め打ちで、決してResizeしない前提でプログラミングできれば、ある意味、それがいちばんラクなんだけど･･･。百歩譲って、Formの大きさはResizeしなくても、Formの中にあるVclコンポーネントの幅・高さは変更できた方がうれしい場合は多い。

例えば、 マークシート画像を読み取って処理する場合、マークシート画像と読み取り結果を比較（チェック）するには、画像と読み取り結果の両方が１つの画面上に表示されていることが望ましい。このような場合に備えて、必要に応じて「画像」と「データ」の表示領域を思いのまま手動で広げたり、狭めたり出来る機能をユーザーに提供したいと考えるのは、全プログラマに共通の思いだろう･･･。

そのような私自身の経験を基に、何に使うかはアイデア次第として、画面の左右や上下にさまざまなVCLコンポーネントが置かれている時、 Splitterを使ってその幅や高さを自由に変える方法をここでは取り上げた。

さらに、Formの大きさの変化に合わせ、Form上に置いた各コンポーネントの大きさ（主として幅）が追随して変化するようなプログラミングにも（自我流で恥ずかしい限りだが）チャレンジしてみた。

主として「幅」の変更に関する覚書

０．準備
１．最も簡単なリサイズ対応（幅の変更）･･･ AlignプロパティとSplitterの利用法
２．最も簡単なリサイズ対応（幅の変更）･･･ Anchorsプロパティの利用法
３．画面サイズの変更に追随（主として幅）
４．まとめ
５．お願いとお断り

０．準備

Delphiを起動して、新規プロジェクトを作成後、任意のフォルダに「プロジェクトに名前を付けて保存」する。※ 同じフォルダにプロジェクトとは別名で、Unitファイルも保存する（Unitが１つしかないプログラムでも、プロジェクトとは別名でUnitファイルを保存する必要がある）。ここではデフォルト設定の名称をそのまま利用する。

・プロジェクトファイル名：Project1.dproj
・ユニットファイル名：Unit1.pas

１．最も簡単なリサイズ対応（幅の変更）･･･ AlignプロパティとSplitterの利用法

最も簡単なリサイズ対応は、Formに置いたPanelなどのAlignプロパティをalNoneからalClientに変更することだ。これでFormの大きさの変更に合わせて（幅・高さ共に）、Form上のPanelの大きさも、親Formの大きさの変更に追随して変わるようになる。
もし、Panel上にButtonを１つだけ置いて使用するのであれば、Buttonの Anchorsプロパティを適切に指定するだけで、画面のリサイズに対応したGUIが完成する。

何に使うかはアイデア次第として、ここではサンプルとして画面の左にMemo、右にPanel（いろいろなコンポーネントを置くベース）がある条件で、Memoの幅を自由に変える方法を取り上げる。さらに、Formの大きさが変わっても、その時点でのMemoとPanelの幅の比率が維持されるような（自我流の）プログラミング例も掲載した。

新規作成したプロジェクトのForm上に、MemoとPanelを１つずつ置く。
MemoもPanelもパレットのStandardにあるので、まずStandardを開く。

＞をクリックして開く
MemoとPanelをそれぞれFormへドラッグ＆ドロップ
（それぞれをダブルクリックしてもよい）
Form上にMemoとPanelがのる

Memo1をクリックして選択し、下図のように操作してMemoのAlignプロパティをalLeftに設定する。

画面は次のようになる。

重要　ここでFormをクリックして選択する（Formをアクティブにする）。

ハンドル（水色の枠）がMemoからFormに移動し、Formの方がアクティブになる。

Formをアクティブにした状態で、パレットでsplitterを検索する。splitterはAdditionalにあるコントロールで、これを２つのコントロールの間に追加すると、ユーザーが実行時にそのコントロールのサイズを変更できるようになる。

「split」未満の入力で見つかるはず

見つけたらTSplitterをダブルクリックしてFormに配置する。

Memoの右側にSplitterが配置される。
デフォルトでは「幅」の変更用になっている

Cursorプロパティに設定された「crHSplit」は「左右分割カーソル」を意味する。ちなみに、「crVSplit」を指定すると「上下分割カーソル」になる。

最後に、PanelコンポーネントのAlignプロパティを変更する。Panelをクリックして選択し、オブジェクトインスペクタのAlignプロパティを alClient に設定する。

これでMemoの幅の大きさを自由に変更できるはず

Ctrl＋Sで上書き保存、F9を押して実行。意図した通りに操作できるか、確認する。

設計時にMemoの幅を適切に指定することで、実行時の初期画面を意図した通りに作成できる。

参考：SplitterのAutoSnapプロパティをFalseすると、幅を小さくしたとき、 Splitterの MinSizeプロパティで設定した値以下に変更されなくなる。これを用いると、MemoやPanelが完全に隠されてしまう事態を予め防止できる。

SplitterのAutoSnapをFalse、MinSizeを30に設定
MemoもPanelも幅がMinSize以下にならない

２．最も簡単なリサイズ対応（幅の変更）･･･ Anchorsプロパティの利用法

では、Panelの上にButtonをのせたら、画面サイズの変更に合わせてButtonの位置はどのように変わるのだろうか？

これを検証してみる。Panel1をクリックして選択し、その上にButtonを１つ設置する。

Panel1が選択されている状態でダブルクリック

設置したButtonの位置を変更する（下図のようにFormの右下隅の方へドラッグして移動）。Buttonのプロパティはデフォルト設定のままにしておく。

この状態で上書き保存（Ctrl＋S）し、実行（F9）して、Formの大きさを最大化してみる。

右上の × をクリックして画面を閉じる

Button1の位置を常識的な位置へ自動的に変化させる最も簡単な方法は、「Anchorsプロパティ」の利用である。Button1をクリックして選択し、オブジェクトインスペクタのAnchorsプロパティの設定を次のように変更する。

上書き保存（Ctrl＋S）し、実行（F9）して、Formの大きさを最大化して確認する。

右上の × をクリックして画面を閉じる

ちなみに下図のように設定すると･･･

AnchorsプロパティをすべてTrueに設定
もしかしたら、場合によってはアリかも･･･。 右上の × をクリックして画面を閉じる

ちなみに、コレだと･･･

akTopのみFalseに設定
「年越しそば」的な挙動を見せました。ほそーく、ながーく なりました。ある意味これがベスト？

３．画面サイズの変更に追随（主として幅）

さらに、Formの大きさが変わっても、その時点でのMemoとPanelの幅の比率が維持されるようにプログラミングしてみた。 まず、Private宣言部で整数型の変数２つと、Formが完全に表示された時点で実行される表示終了イベントを取得する手続き procedure CMShowingChangedを宣言。

Formの 表示終了イベントを取得するprocedureの実現部は、以下に記載したコードをミスのないように入力し（文法的に誤りのない状態で）、procedure CMSShowingChanged ～行のどこか（付近でも可）にフォーカスがある（＝カーソルがある）状態で、Shift＋Ctrl＋C 操作を行うと、手続きが自動的に生成される。

Shift＋Ctrl＋C：キーボード左側のShiftキーとCtrlキーを左手で同時に押して、さらに右手でCキーを押す

また、宣言の順番も大切。プライベートメンバー変数と手続き（procedure）の宣言の順番が逆になってはいけない。 プライベートメンバー変数の宣言を、手続きの宣言より必ず先に行う必要がある。

  private
    { Private 宣言 }
    //Memoの幅とFormの幅を記憶する変数
    intMW, intFW:integer;
    //Formの表示終了イベントを取得
    procedure CMShowingChanged(var Msg:TMessage); message CM_SHOWINGCHANGED;
  public
    { Public 宣言 }
  end;

Formの表示終了イベントを取得して、その時点でのMemoとFormの幅を記憶する。

フォームの表示完了時に処理する（くろねこ研究所さん）

URL：https://www.blackcat.xyz/article.php/ProgramingFAQ_del0049より引用
procedure TForm1.CMShowingChanged(var Msg: TMessage);
begin
  inherited; {通常の CMShowingChagenedをまず実行}
  if Visible then
  begin
    Update; {完全に描画}
    //Formの表示終了時に以下を実行
    Memo1.Width:=intMW;
    intMW:=Memo1.Width;
    intFW:=Form1.Width;
  end;
end;

Formが生成される際に、MemoとFormの大きさをプログラムから指示して決定。

procedure TForm1.FormCreate(Sender: TObject);
begin
  //MemoとFormの幅を記憶する変数を初期化
  intMW:=480;
  intFW:=640;
end;

Formの大きさの変更イベントに合わせて、Memoの幅を計算して決定。

procedure TForm1.FormResize(Sender: TObject);
begin
  //比率を維持してMemoの幅を変更
  Memo1.Width:=Trunc(Form1.Width*intMW/intFW);
end;

ここがいちばん重要か？ Splitterが動かされたら（＝Movedイベントが発生）、それが動かされた時点（＝動かされる直前）でのFormとMemoの幅を取得。この値をもとにしてFormとMemoの幅の比率を計算し、さらに、この比率をもとにFormのResize時にMemoの幅を計算、その計算結果の小数点以下を切り捨てた整数値をMemo1.Widthプロパティに設定している。※ Widthは整数値で、小数点以下の値にこだわる必要はまったくないから。

procedure TForm1.Splitter1Moved(Sender: TObject);
begin
  //MemoとFormの幅を取得
  intMW:=Memo1.Width;
  intFW:=Form1.Width;
end;

上書き保存（Ctrl＋S）し、実行（F9）して、Memoの幅を変更し、Formの大きさを最大化して、FormとMemoの幅の比率が維持されることを確認する。

Buttonコントロールの幅の違いに注目（上と下の画像は、同じ画像ではありません）

Formの幅は640ピクセル、Memoの幅は480ピクセルで表示
画面を最大化してみた。Formの幅とMemoの幅の比率は保たれているように見える。

数値的にはどうかと思い、FResize前のFormとMemoの幅を表示してみた。

procedure TForm1.FormResize(Sender: TObject);
begin
  //比率を維持してMemoの幅を変更
  Memo1.Width:=Trunc(Form1.Width*intMW/intFW);
  ShowMessage('Memoの幅 / Formの幅：'+IntToStr(intMW)+
    ' / '+IntToStr(intFW));
end;

画面を最大化してから、元の大きさに戻した時のようす。

Formの幅は1382ピクセルと表示されている

参考：私のPCは、画面の解像度を1366×768に設定している（Formが表示される際、Screen.Widthを調査すると1366と表示された）。そこで、FormのWidthを1366に設定すると、ClientWidthはそれより小さくなり、設計時に画面の横幅いっぱいに配置したVCLコンポーネントの右側に実行時余白が生まれる。
FormのClientWidthを1366に設定すると、Widthは1382となり、画面の解像度より大きくなるが、VCLコンポーネントの位置は設計時も実行時も同じになった。
この経験から、画面の解像度はClientWidth×ClientHeightを意味するものと、私は理解しているのだが、これでいいのだろうか？

４．まとめ

Formに置いたVCLコンポーネント（例：Memo）の幅を実行時に調整できるようにするには、Splitterを利用する。手順は以下の通り。

（１）MemoコンポーネントのAlignプロパティを alLeft に設定。
（２）Formを選択後、Splitterを設置。
（３）Panelコンポーネントを置いて、Alignプロパティを alClient に設定。

Panelの上に乗せたButtonなどのコンポーネントは、 Anchorsプロパティを適切に設定することでFormのリサイズに合わせて、その表示位置を変更できる。

５．お願いとお断り

このサイトの内容を利用される場合は、自己責任でお願いします。ここに記載した内容を利用した結果、利用者および第三者に損害が発生したとしても、このサイトの管理者は一切責任を負えません。予め、ご了承ください。

【関連記事】