フォームを拡大縮小した時にDataGridViewの縦幅&横幅も拡大縮小させたい時のレイアウト術【画像あり】

オブジェクト指向EasyLanguage(OOEL)のフォームで、以下のような動作(レイアウト)を実現したい時です。フォームの右下端を広げたら、上部のTextBoxやButtonの位置はそのままで、下部のDataGridViewのみが拡大する感じです。

フォームを広げた時はこのように、DataGridViewなど結果が表示されるコントロールが一緒に拡大されるのが良い場合が多いと思います。

こうした動作は「コントロールのDockプロパティ」と「Panelコントロール」をうまく組み合わせてあげれば実現可能です。フォームに設置するコントロールが多くなればなるほど設定が複雑になりますが、とりあえずこれだけ押さえておけば応用が効くはずです。

何も設定しない場合はどうなる?

コントロールの設定を特にしない場合、フォームを広げても各コントロールはそのままの位置で動きません。これは、コントロールの位置は左上のxy座標で固定されるためです。

いくらフォームを広げても、各コントロールの縦幅&横幅はそのままで、左上でピン留めされているようなイメージです。

これで問題ない場合もありますが、例えばDataGridViewの列項目が多くて横にスクロールしないと閲覧できないような場合、フォームを拡大した時にフォーム幅に合わせてDataGridViewの横幅も広がると、見やすくなりますよね。これをどう実現するか?というお話です。

Dockプロパティを設定してみる

フォーム上のコントロールにDockプロパティを設定すると、そのコントロールの端(上下左右)をフォームの端とくっつける(ドッキングさせる)事ができます。Dockプロパティにより、フォームを拡大縮小した時にコントロールのくっついている部分も同時に拡大縮小します。

以下の例では、DataGridViewコントロールのDockプロパティを「Bottom」に設定しています。Bottomに設定した場合は、コントロールの上端以外がフォームの端とくっつく感じになるので、このような動作になります。フォームの端と一緒に、コントロールの端もつまんで広げたり縮めたりする感じでしょうか・・?

横幅の動きはイメージに近くなってきましたが、今度は縦の動きが気になります。フォームを縦に広げると、DataGridViewの縦幅はそのままでフォームが広がるので、上部のTextBoxやButtonと、下部のDataGridViewの間に、余白ができてしまいます。

DataGridViewの縦幅についても、行が一度にたくさん閲覧できた方が良い場合も多いので、どうせならフォームを縦に拡大した時にDataGridViewの縦幅も拡大してほしいところです。

Panelコントロールをうまく活用する

DataGridViewの縦幅もフォームに合わせて拡大させる場合は、「Panelコントロール」をうまく使えばOKです。

Panelコントロールはレイアウト用のコントロールで、他のコントロールを上に載せる事ができます。また、PanelにもDockプロパティを設定できます。

今回の場合、以下のような設定で期待通りの動きを実現できます。

・Panelを1つ用意して、Dockプロパティを「Top」に設定し、その上にTextBoxとButtonを載せる
・DataGridViewのDockプロパティに「Fill」を設定

これで、以下のような動きになります。

PanelはTop固定されているため、縦幅が固定の状態でフォームの上部に貼りついたような形になり、それ以外の領域がDataGridViewで埋められる、という感じです。

(DataGridViewのDockプロパティをFill設定する時、コントロールの配置順によってはDataGridViewの上部がPanelの下に隠れてしまうことがあるようなので、その場合は一旦DataGridViewを削除して再配置するとうまくいくようです)

以上が、DockプロパティとPanelコントロールを利用したレイアウト術になります。

フォーム上のコントロールが増えてきても、この2つを応用すれば様々なレイアウト&配置が可能になりますので、試してみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です