【VB.Net】TableLayoutPanelを配置して、動的に画面をカスタマイズしてみた

2021/8/22 VB.Net

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

 

今回は、Windowsフォームアプリケーションのフォーム画面に

既に配置されたTableLayoutPanelの中に動的にコントロールを

追加し、画面をカスタマイズしていく方法を紹介していきます。

 

あらかじめコントロールを配置するのではなく、プログラムの条件によって

画面を変更するアプリケーションが作れるようになります。

 

ちなみに前回の記事はこちら

【VB.Net】好きな場所にフォルダを作成するWindowsフォームアプリを作る
Windowsフォームアプリケーションで好きな場所にフォルダを作成するアプリを簡単に作成してみたので紹介しています。VB.Netでフォルダ操作をする際の参考になれば嬉しいです。小さなことからコツコツと始めてみます。
dreamparadaisu.com
2021-08-12 04:31

 



 

目次

TableLayoutPanel

以前にTableLayoutPanelについては下記の記事で紹介をしていました。

その時はTableLayoutPanelの使い方どまりでした。

【VB.Net】TableLayoutPanelの使い方～画面レイアウトを工夫してみた～
Windowsフォームアプリケーションの画面レイアウトでコンポーネントの配置が整わない、綺麗に配置できないといった悩みはありませんか？そんな時に使える、TableLayoutPanelについて例を交えて紹介しています。初学者の参考になれば。
dreamparadaisu.com
2020-11-22 18:50

 

今回はステップアップしたTableLayoutPanelの使い方になります。

 

スポンサーリンク




フォーム画面の作成

まず、最初に以下のフォーム画面を作成します。

 

このフォームを使って、TableLayoutPanelのレイアウトなどを

動的に変更していきたいと思います。

 

コントロールの配置については下記の表になります。

Noコントロール名前
1TableLayoutPaneltlpMain

実行環境

筆者の実行環境は、

  • VisualStudio2019
  • Windows 10 64bit
  • .Net Framework 4.5.1

になります。

※　Windows7 8 8.1でも動作はできますが、画面デザインの表示が変わるかもしれません。

 

TableLayoutPanelの列と行を動的に追加

追加したTableLayoutPanelに動的に列や行を追加するには、下記のコードで行います。

 

列を追加する場合

TableLayoutPanel.ColumnCount = 追加したい列数

 

行を追加する場合

TableLayoutPanel.RowCount = 追加したい行数

 

これを使って、試しに5個の列と行を追加していきます。

 

これを実行すると、

うーん、よくわかりませんね、追加できたかどうか。。。

 

これをわかりやすくするために、境界線の設定を行っていきます。

こちらも動的に行っていきます。

 



境界線の設定

境界線の設定には2種類あり、

  • TableLayoutPanelの境界線
  • TableLayoutPanelの各部屋(セル)の境界線

の設定の2種類があります。

(これが主に使うであろう境界線の設定になります。)

 

それぞれ

TableLayoutPanelの境界線

TableLayoutPanel.BorderStyle = BorderStyle.各設定したい境界線

設定したい境界線には3種類あります。

  • BorderStyle.None  ‘ 境界線なし
  • BorderStyle.FixedSingle  ‘ 1重線の境界線
  • BorderStyle.Fixed3D  ‘ 3Dの境界線

デフォルトだと、Noneが割り当てられています。

 

TableLayoutPanelの各部屋(セル)の境界線

TableLayoutPanel.CellBorderStyle =
TableLayoutPanelCellBorderStyle.各設定したい境界線

設定したい境界線には、7種類あります。

  • TableLayoutPanelCellBorderStyle.None ‘ 境界線無し
  • TableLayoutPanelCellBorderStyle.Single ‘ 1重線の境界線
  • TableLayoutPanelCellBorderStyle.Inset ‘ 1重線のくぼんだ境界線
  • TableLayoutPanelCellBorderStyle.InsetDouble  ‘ 2重線のくぼんだ境界線
  • TableLayoutPanelCellBorderStyle.Outset ‘ 1重線の浮出した境界線
  • TableLayoutPanelCellBorderStyle.OutsetDouble ‘ 2重線の浮出した境界線
  • TableLayoutPanelCellBorderStyle.OutsetPartial ‘ 浮出した部分を含む1重線の境界線

先ほど追加した列と行数に対して、下記のように設定します。

 

今回は、TableLayoutPanelのBorderStyleには1重線の境界線

TableLayoutPanelの各部屋の境界線には1重線のくぼんだ境界線を設定しています。

 

これを実行すると、

わかりやすくはなりましたが、各部屋のサイズが微妙ですね。

 

TableLayoutPanelの各部屋のサイズの設定

各部屋のサイズが微妙なので、こちらも動的に設定してみます。

サイズを設定するには、行と列にそれぞれ行う必要があります。

 

列の場合

TableLayoutPanel.ColumnStyles.Insert(設定する列数,
New ColumnStyle(SizeType.設定するサイズのモード))

 

行の場合

TableLayoutPanel.RowStyles.Insert(設定する行数,
New RowStyle(SizeType.設定するサイズのモード)
設定するサイズのモードには、3種類あります。
  • SizeType.AutoSize  ‘ 他の行や列と猟奇を共有するように自動的に設定
  • SizeType.Absolute  ‘ 行または列のサイズは、正確なピクセル数に設定
  • SizeType.Percent  ‘ 行または列のサイズは、親コンテナのパーセントとして設定

 

サイズモードの設定によって、サイズの指定などがオプションとして付加できたりします。

 

例えば、SizeType.Percentにすると、

New RowStyle(SizeType.Percent, width)となります。

widthにサイズを指定することができます。

 

ここでは下記のようにコードを書いてみます。

それぞれ列と行ごとにサイズの設定をしています。

 

これを実行すると、

綺麗になりました。

ちゃんと5行5列に区切ることができています。

 

これを全体に表示するには、Dockプロパティを設定します。

こちらも動的に行っていきます。

フォームへドッキング

Dockプロパティを設定するには、

TableLayoutPanel.Dock = DockStyle.ドッキングモード

ドッキングモードには、6種類あります。

 

  • None  ‘ なし
  • Top  ‘ 格納する側のコントロールの上端にドッキング
  • Bottom  ‘ 格納する側のコントロールの下端にドッキング
  • Left  ‘ 格納する側のコントロールの左端にドッキング
  • Right  ‘ 格納する側のコントロールの右端にドッキング
  • Fill  ‘ 格納する側のコントロールの四辺にドッキング且つ適切なサイズに自動調整

 

今回はFillにして、フォーム全体にドッキングし、適切なサイズに自動で調整をさせます。

 

これを実行すると、

見やすくなりました。

 

それでは、ここからいよいよコントロールを動的に追加していきます。

 



 

TableLayoutPanelに動的にコントロールを追加

よく使うであろうコントロールをここでは動的に追加していく方法を紹介します。

 

TableLayoutPanelにコントロールを追加するには、

TableLayoutPanel.Controls.Add(追加したいコントロール、列番号、行番号)
追加するコントロールは事前に、変数としてインスタンスを生成しておく必要があります。

ラベル(Label)

ラベルを追加するには、

Dim 変数名 As New Label

とし、

TableLayoutPanel.Controls.Add(作成した変数名, 列番号, 行番号)

となります。

 

例として、2列目の1行目にボタンを追加します。

わかりやすいように、作成したラベルには”こんにちは”と表示させています。

ここで行番号と列番号の始まりは1からではなく、0からになるので注意が必要です。

 

これを実行すると、

追加することができました。

 

ボタン(Button)

ボタンを追加するには、

Dim 変数名 As New Button

として、インスタンス化しておく必要があります。

 

これも例として、

2列目の2行目に追加してみます。

わかりやすいようにテキストには”押してみて”と表示させてみます。

 

実行すると

 

テキストボックス(TextBox)

テキストボックスを追加するには、

Dim 変数名 As New TextBox

 

例として、

3列目の1行目に追加してみます。

 

これを実行すると、

 

チェックボックス(CheckBox)

チェックボックスを追加するには、

Dim 変数名 As New CheckBox

 

例として、

3列目の4行目に追加してみます。

 

これを実行すると、

 

ラジオボタン(RadioButton)

ラジオボタンを追加するには、

Dim 変数名 As New RadioButton

 

例として、

4列目の4行目に追加してみます。

 

これを実行すると、

 

このようにして各種コントロールを動的に追加することもできます。

 

動的に追加したコントロールでイベントを発生させて処理を行いたい場合については、

次回以降の記事で触れていこうと思います。

 

まとめ

TableLayoutPanelに動的にコントロールを追加する方法について紹介しました。

プログラム実行中に画面をカスタマイズしたい、そんなときにおススメです。

 

最後までお読みいただきありがとうございます。

 

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

Visual Basic 2019 パーフェクトマスター

Visual Basic 2019 パーフェクトマスター

金城俊哉
3,300円(11/21 11:06時点)
楽天ブックス
作って覚える Visual Basic 2019 デスクトップアプリ入門

作って覚える Visual Basic 2019 デスクトップアプリ入門

荻原 裕之, 宮崎 昭世
2,860円(11/21 11:06時点)
楽天ブックス
かんたんVisual　Basic改訂2版

かんたんVisual　Basic改訂2版

高橋広樹
2,904円(11/21 11:06時点)
楽天ブックス

こちらの記事も読まれています。

この投稿の関連記事が見つかりませんでした。

スポンサーリンク