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

» 2006年04月28日 05時00分 公開
[一色政彦デジタルアドバンテージ]

この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。

「.NET TIPS」のインデックス

連載目次

 .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の[プロパティ]ウィンドウからこれらのプロパティを指定しているところだ。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。