.NET TIPS

コントロールのマージンやパディングを適切に設定するには?[2.0のみ、C#、VB]

デジタルアドバンテージ 一色 政彦
2006/04/28

 .NET Framework 2.0では、コントロールを適切な間隔を空けて配置するための機能として、次の2つのプロパティがControlクラス(System.Windows.Forms名前空間)に追加されている。

  • Marginプロパティ
  • Paddingプロパティ

 Marginプロパティはその名のとおり「マージン」(=ほかのコントロールとの間のスペース。以降、Margin)を指定するためのもので、Paddingプロパティは「パディング」(=コントロール内部の余白。以降、Padding)を指定するためのものだ。

 具体的には次の図を参考にしてほしい。

Margin=コントロール間の間隔
この画面は[button1]ボタンと[button2]ボタンの間のスペース(つまりMargin)を示している。両方のボタン・コントロールのMarginプロパティ(上下左右のすべて)に「10」を設定した場合、コントロール間のスペースは20ピクセルとなる。
 
Padding=コントロール内の余白
この画面は、ほかのコントロールを内部に配置するためのコンテナの1つであるTableLayoutPanelコントロール内部の余白(つまりPadding)を示している。TableLayoutPanelコントロールのPaddingプロパティ(上下左右のすべて)に「20」を指定した場合、TableLayoutPanelコントロールの枠とその内部に配置されたコントロールとのスペースは20ピクセルとなる。

 ここで注意していただきたいのは、パネルやグループボックスなどのコンテナ・コントロールにPaddingを指定した場合、その外枠と、その内部に配置したMarginを指定しているコントロールとのスペースはPadding+Marginの大きさになるということだ。具体的には次の図を参照してほしい。

MarginとPaddingの組み合わせ
この画面はTableLayoutPanelコントロールのPaddingと[button3]ボタンのMarginの組み合わせを示している。この例では、TableLayoutPanelコントロールのPaddingプロパティ(上下左右のすべて)に「20」を、[button3]ボタンのMarginプロパティ(上下左右のすべて)に「10」を指定したとすると、TableLayoutPanelコントロールの境界線から[button3]ボタンの外枠までのスペースは(合計で)30ピクセルとなる。

 このようにMarginとPaddingを指定する際には、その組み合わせも考慮しておく必要がある。

 なお、新たにMarginプロパティやPaddingプロパティが追加されたのは、恐らく.NET Framework 2.0のクラス・ライブラリにFlowLayoutPanelコントロールやTableLayoutPanelコントロールが追加されたからだと考えられる。つまり、HTMLのスタイルシート(例えば<Table>タグのStyle属性などで指定する)にMarginプロパティやPaddingプロパティがあるように、これらのコントロールで見栄えを整えるにはこれらのプロパティがあった方が便利なのだ。

 しかし副次的な効果として、Visual Studio 2005などのWindowsフォーム・デザイナ上でこれら以外のコントロールを配置する際にもこの両プロパティの値が活用されるので(具体的にはその指定値に合わせてスナップ・ラインが表示されるので)、開発者がこれらのプロパティに適切な値を指定しておくことで意図どおりの間隔を空けてうまくコントロールを配置できるようになる(スナップ・ラインについては「Visual Basic 2005 ここが便利!IDE編 第11回 ラベルとテキストボックスのきれいな並べ方とは!?」を参照してほしい)。

 ちなみに通常のコントロールでは、デフォルトでMarginプロパティ(上下左右のすべて)の値が「3」に、Paddingプロパティ(上下左右のすべて)の値が「0」になっているようだ。

MarginやPaddingの上下左右をまとめて、あるいは個別に設定するには?

 MarginプロパティやPaddingプロパティでは、その上下左右すべての値を一括設定することができるが、それぞれで違う値を指定したい場合には個別に指定することもできる。

 次の画面は、Visual Studio 2005のIDEの[プロパティ]ウィンドウからこれらのプロパティを指定しているところだ。

Visual Studio 2005におけるMarginプロパティとPaddingプロパティの指定方法
Visual Studio 2005のIDEの[プロパティ]ウィンドウでMarginプロパティとPaddingプロパティの「All」の値を指定すれば上下左右のすべてに同じ値を一括設定でき、「Left」「Top」「Right」「Bottom」のそれぞれに値を指定すれば、「左」「上」「右」「下」の値を個別に設定できる(その際「All」は「-1」と表示される)。
  Marginプロパティを指定する。
  Paddingプロパティを指定する。

 このように、Visual Studio 2005のIDEの[プロパティ]ウィンドウでMarginプロパティとPaddingプロパティの「All」の値を指定すれば、上下左右のすべてに同じ値を一括設定できる。また、「Left」「Top」「Right」「Bottom」のそれぞれに値を指定すれば、「左」「上」「右」「下」の値を個別に設定できる(その際「All」は「-1」と表示される)。

 もちろんこれをコードにより実装することもできる。具体的なコードは次のとおりだ。

tableLayoutPanel1.Margin = new Padding(10);
tableLayoutPanel1.Padding = new Padding(30, 20, 30, 20);
tableLayoutPanel1.Margin = New Padding(10)
tableLayoutPanel1.Padding = New Padding(30, 20, 30, 20)
コードによるMarginプロパティとPaddingプロパティの指定方法(上:C#、下:VB)

 MarginプロパティとPaddingプロパティに指定できるのは、どちらもPaddingクラス(System.Windows.Forms名前空間)のオブジェクトである。End of Article

利用可能バージョン:.NET Framework 2.0のみ
カテゴリ:Windowsフォーム 処理対象:Windowsフォーム・デザイナ
使用ライブラリ:Controlクラス(System.Windows.Forms名前空間)
使用ライブラリ:Paddingクラス(System.Windows.Forms名前空間)

この記事と関連性の高い別の.NET TIPS
複数のコントロール間の左右/上下のすき間を細かく調整するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH