どうも！リョクちゃです。

 

Windowsフォームアプリケーションを作る中で、

• 画面レイアウトの配置などがうまくいかない
• 綺麗に配置ができない

といった悩みはありませんか？

 

そんな悩みを解消してくれる方法として、

TableLayoutPanelといったコントロールがあります。

今回はTableLayoutPanelについて紹介をしていきます。

 

ちなみに前回はこちら

 

 

TableLayoutPanelとは

画面レイアウトの操作を表形式で行えたり、コントロールを表形式で自動的に配置してくれるコンテナに分類されるコンポーネントになります。

言葉だといまいちピンとこないと思うので、

従来、当ブログで作成してきたフォームアプリケーションとの違いを図で示します。

こちらがTableLayoutPanelを使用した画面と使用していない画面になります。

TableLayoutPanelを使用していない画面では、ボタンを押したときのHelloWorldの表示が、

乱雑になっています。

 

一方で使用している方では、整えられて表示がされています。

このように、自動的に整えてくれるのがTableLayoutPanelになります。

以降で、使い方などを紹介していきます。

 

準備編：フォームの作成

まず、TableLayoutPanelをWindowsフォームアプリケーション上に配置していきます。

 

配置方法としては、

VisualStudio2019画面の左端にある“ツールボックス“をクリック、

コンテナと書かれたタブがあるので矢印をクリックして展開します。

 

展開すると、TableLayoutPanelがあります。

これを選択し、フォーム画面上にドラッグ&ドロップします。

 

もし、ツールボックスが表示されていない場合は、

表示タブをクリック→ツールボックスを選択します。

 

もしくは、

Ctrl + Alt + X　を押すことで表示することができます。

※同時押しになります。

 

配置がされると、下のような画面になります。

TableLayoutPanelの初期設定を行う

ここでは、先ほど配置したTableLayoutPanelに初期設定を施します。

これは筆者が作成する際に行っている設定ですので、参考程度にとらえていただければ。

1. プロパティのDockをFillにする
2. 列と行を任意の数追加する

最初はこのぐらいの設定を行っておけば、後のコントロールの配置が楽になります。

 

プロパティのDockをFillにする

設定方法は下図のようになります。

TableLayoutPanelを選択した状態で、

 

を行うと、

 

フォーム一面にTableLayoutPanelが配置されました。

これをもとに任意数の列・行を追加していきます。

 

列と行を任意の数追加する

今回は、5列・5行とします。

追加方法は、

TableLayoutPanelの右上端の矢印アイコンをクリックします。

 

クリックすると、TableLayoutPanelタスクが表示されます。

表示されたら、行および列の編集…をクリックします。

 

 

クリックすると編集画面が表示されます。(下図)

 

列を追加する場合、先ほどの画面のまま追加ボタンをクリックします。

 

行を追加する場合は、表示とかかれた項目に横に列と表示されているボックスがあります。

ボックスの左に矢印ボタンがあるので、こちらをクリックし、表示を行に切り替えます。

 

 

切り替えてからの追加方法は、列と同様、追加ボタンをクリックすることで追加ができます。

 

それぞれ追加した後、OKボタンを押すとTableLayoutPanelに追加した内容が反映されます。

 

※　追加した際に、サイズの型が絶対サイズ(Absolute)になっているので、

今回はすべてパーセントにします。

5行・5列のTableLayoutPanelの設定ができました。

これをもとに、アプリケーションで必要となるコンポーネントを配置していきます。

 

＜Memo＞

コンポーネント：ボタンやラベルのコントロール

コンポーネントの配置

まずは適当にボタンとラベル、テキストボックスを適当なTableLayoutPanelのセル(部屋)に

配置してみましょう。

このように配置ができました。

 

TableLayoutPanelのセル内でコンポーネントをドッキング

先ほど配置したままだとコンポーネントが小さいので、

セルに収まるようにドッキングをしていきます。

 

各コンポーネントのプロパティのDockをNoneからFillにします。

1つずつ行っていくのは効率が悪いので、

Ctrlキーを押しながら各コンポーネントを選択します。

 

全てが選択された状態で、プロパティ欄のDockをNoneからFillに変更します。

各セルに1回でドッキングすることができます。

 

意外と便利なので覚えておいて損はないです。

※　ただコンポーネントの数が多くなると動作が重くなるので注意です。

 

TableLayoutPanelのセル同士の結合(行・列別)

配置したコンポーネントだけだと、セルに余裕があるので、

各コンポーネントと隣接するセルを結合して、1つのセルにしていきます。

 

今回は列の結合を行っていくので、ColumnSpanといったプロパティを変更していきます。

 

各コンポーネントを選択した状態で、

プロパティ欄のColmunSpanを1から3に変更してみましょう。

 

下のようにレイアウトに反映されたかと思います。

セル内に配置されたコンポーネントのプロパティを後は変更し、大きさなどを整えます。

 

今回は、フォントの大きさをコードで変更してみようと思います。

コンポーネントのフォントを変更するコードを書くには、

と書くことでフォントの変更ができます。

 

＜Memo＞

フォントファミリー：MS P ゴシックやメイリオなどのフォントのこと

フォントサイズ：文字の大きさ

これらコードは、フォームがロードされたときに書くようにしましょう。

 

※　ボタンを押してからだと、不快感を与えてしまう恐れがあるため。

画面が表示される前にしておく処理はなるべくロード時に書きます。

 

コードを書くと下のようになります。

ここでは各コンポーネントをメイリオフォントの20ptに設定しています。

 

実行してみると、

ただコンポーネントの数が増えると、

同様のコードをコンポーネントごとに何個も書いていかなければなりません。

 

そこで、TableLayoutPanel内のセルに収められているコンポーネントに関しては、

一括で変更を行うことが実はできます。

 

コードで書くと、

このコードでは、TableLayoutPanelの行・列ごとに各セルを見ていき、

セルにコンポーネントが収められていたら、フォントを変更するといったコードになります。

 

こう書くことで、1つのコードでフォントを変更することができます。

 

ただ、コンポーネントが少数の場合や設定項目があまりない場合は、

最初の書き方でも問題ないと思います。

一種の書き方の例としてご参考ください。

 

後は、各コンポーネントのテキストを変更していきます。

変更後のフォームがこちらになります。

さて、ここまででTableLayoutPanelの設定をしていきました。

いよいよ、アプリケーションを作っていきます。

 

アプリケーションの目的

今回作成するアプリケーションでは、

ボタンを押すことでテキストボックスに入力された文字を

メッセージボックスで表示することを目的とします。

 

ただし、入力値がブランク(空白)の場合は、処理をしないものとします。

プログラム編

今回は、過去に書いてある記事でも紹介している内容を学んでいれば、

おそらくできてしまうコードですので、コードのみを載せておきます。

 

コードの詳細な解説については、コメントや過去記事を参照して頂ければと思います。

実行編

プログラム編のコードを実行すると

画面起動時

 

文字入力後

 

ボタン押下後

 

といった動作になります。

※　入力値がない場合は、何もしないので画面に変更はありません。

 

まとめ

TableLayoutPanelについて、使い方を例を交えて紹介しました。

 

ポイント

• 画面レイアウトの体裁を整えたいならTableLayoutPanelは便利
• コンポーネントをまとめて変更できるので設定に関するコードが短くできる

少しでもWindowsフォームアプリケーションの画面レイアウトで、

悩んでる方の参考になればなと思います。

 

ぜひ、一度TableLayoutPanelを使ってレイアウトを作成してみてください。

最後まで、ご覧いただきありがとうございます。

 

・こちらの書籍を参考にVB.Net勉強しています。