![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi3_komaru-1.png)
コントロールを表に配置するように配置するのって難しいな。
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi1_normal.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi1_normal.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi1_normal.png)
TableLayoutPanelコントロールを使用すると、フォーム内に表敬式の枠を配置してコントロールを配置することができますよ。
目次
フォームを表形式に分割してレイアウトする
TableLayoutPanelコントロールを利用して、配置した枠に対してコントロールを綺麗に配置できます。
ツールボックスからTableLayoutPanelをフォームに配置します。
TableLayoutPanelコントロールの行列を編集するには、
- TableLayoutPanelコントロールの右上の三角をクリックし、「列の追加」「行の追加」など表の編集をすることができます。 ここでは、一番下の「行および列の編集…」をクリックします。
- 「列と行のスタイル」画面が表示されます。表示の「行」「列」を指定し追加を押すことで、行/列を増やすことができます。
- 追加した行/列を選択し、画面右の「サイズの型」で表示サイズ方法を設定することができます。
![](https://tech.mychma.com/wp-content/uploads/2022/06/image-41.png)
![](https://tech.mychma.com/wp-content/uploads/2022/06/image-41.png)
![](https://tech.mychma.com/wp-content/uploads/2022/06/image-42.png)
![](https://tech.mychma.com/wp-content/uploads/2022/06/image-42.png)
チェック!
Dockプロパティを「Fill」に設定するとフォーム全体に綺麗に収まります。
また、枠を結合したい場合は、「列方向:ColumnSpanプロパティ」 , 「行方向:RowSpanプロパティ」で結合範囲を指定することができます。
以下の例では、2行3列の表を作成し、1列目に左:ラベル、中央:ボタン、右:ボタンのコントロールを配置し、
2行目の一番右にはPictureBoxを配置し、ColumnSpanプロパティに3を指定しています。また、それぞれDockに「Fill」を指定しています。
![](https://tech.mychma.com/wp-content/uploads/2022/06/image-43.jpg)
![](https://tech.mychma.com/wp-content/uploads/2022/06/image-43.jpg)
![](https://tech.mychma.com/wp-content/uploads/2022/06/image-43.png)
![](https://tech.mychma.com/wp-content/uploads/2022/06/image-43.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi3_normal-1.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi3_normal-1.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi3_normal-1.png)
表に沿って整列したレイアウトを作成することができました。
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi1_normal.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi1_normal.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi1_normal.png)
TableLayoutPanelを利用することで、自由配置ではできないような画面拡大時の動きをさせることもできるので、状況に応じて使い分けていきましょう。
コメント