チュートリアル : Padding、Margin、および AutoSize プロパティを使用した Windows フォーム コントロールのレイアウト
更新 : 2007 年 11 月
フォーム上にコントロールを正確に配置することは、多くのアプリケーションで重要度の高い処理です。Windows フォーム デザイナには、そのためのさまざまなレイアウト ツールが用意されています。最も重要な 3 つのプロパティは、Margin、Padding、および AutoSize です。これらは、すべての Windows フォーム コントロールに存在します。
Margin プロパティは、コントロール周囲の空白領域を定義します。これによってコントロールの境界線と他のコントロールとの間で、指定した距離が保たれます。
Padding プロパティはコントロールの内部の空白領域を定義します。これによって、コントロールの内容 (たとえばその Text プロパティの値) とコントロールの境界線との間で、指定した距離が保たれます。
コントロールの Padding プロパティと Margin プロパティを次の図に示します。
.gif "Windows フォーム コントロールのパディングとマージン")
AutoSize プロパティを使用すると、コントロールのサイズが内容に合わせて自動的に調整されます。コントロールは元の Size プロパティの値よりも小さいサイズには自動調整されず、Padding プロパティの値に対する領域を占めます。
このチュートリアルでは、以下のタスクを行います。
Windows フォーム プロジェクトの作成
コントロールのマージンの設定
コントロールの埋め込みの設定
コントロールの自動サイズ変更
ここでは、これらの重要なレイアウト機能が果たす役割について理解します。
.gif "メモ") メモ : |
|---|
使用している設定またはエディションによっては、表示されるダイアログ ボックスやメニュー コマンドがヘルプに記載されている内容と異なる場合があります。設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。詳細については、「Visual Studio の設定」を参照してください。 |
前提条件
このチュートリアルを実行するための要件は次のとおりです。
- Visual Studio がインストールされているコンピュータで、Windows フォーム アプリケーション プロジェクトを作成および実行するための十分なアクセス許可が付与されていること。
プロジェクトの作成
最初にプロジェクトを作成し、フォームを設定します。
プロジェクトを作成するには
LayoutExample という名前の Windows アプリケーション プロジェクトを作成します。詳細については、「方法 : Windows アプリケーション プロジェクトを作成する」を参照してください。
Windows フォーム デザイナでフォームを選択します。
コントロールのマージンの設定
Margin プロパティを使用すると、コントロール間の既定の距離を設定できます。別のコントロールのすぐ近くまでコントロールを移動すると、両方のコントロールのマージンを示すスナップ線が表示されます。また、移動中のコントロールは、マージンで定義された距離にスナップします。
Margin プロパティを使用してフォーム上にコントロールを配置するには
ツールボックスから 2 つの Button コントロールをフォームにドラッグします。
Button コントロールのどちらかを選択し、もう 1 つのコントロールにほぼ接触するまで近づけます。
両方のコントロールの間にスナップ線が表示されることを確認します。この距離は、この 2 つのコントロールの Margin 値の合計です。移動中のコントロールは、この距離にスナップします。詳細については、「チュートリアル : スナップ線を使用した Windows フォーム上のコントロールの配置」を参照してください。
一方のコントロールの Margin プロパティを変更します。これを行うには [プロパティ] ウィンドウで Margin エントリを展開し、All プロパティを 20 に設定します。
Button コントロールの一方を選択し、他方のコントロールに近づけます。
マージンの合計値を定義しているスナップ線が延長され、他方のコントロールからより遠い距離にコントロールがスナップします。
選択したコントロールの Margin プロパティを変更します。これを行うには [プロパティ] ウィンドウで Margin エントリを展開し、Top プロパティを 5 に設定します。
選択したコントロールを他方のコントロールの下に移動し、スナップ線が短くなったことを確認します。選択したコントロールを他方のコントロールの左に移動し、手順 4. で確認した値をスナップ線が維持していることを確認します。
Margin プロパティの各要素 (Left、Top、Right、Bottom) を異なる値に設定できます。また、All プロパティを使用してすべての要素を同じ値に設定することもできます。
コントロールの埋め込みの設定
アプリケーションに要求される正確なレイアウトを実現するために、コントロール内に子コントロールを含めることもあります。子コントロールの境界線と親コントロールの境界線の間隔を指定するには、親コントロールの Padding プロパティと子コントロールの Margin プロパティを組み合わせて使用します。Padding プロパティは、コントロールの内容 (たとえば、Button コントロールの Text プロパティ) と境界線の間隔を制御するためにも使用します。
埋め込みを使用してフォーム上にコントロールを配置するには
ツールボックスの Button コントロールをフォームにドラッグします。
Padding プロパティを変更します。これを行うには [プロパティ] ウィンドウで Padding エントリを展開し、All プロパティを 5 に設定します。
コントロールが拡大され、新しい埋め込みのための領域が確保されます。
ツールボックスの GroupBox コントロールをフォームにドラッグします。ツールボックスの Button コントロールを GroupBox コントロールにドラッグします。Button コントロールを GroupBox コントロールの右下隅に揃えて配置します。
Button コントロールが GroupBox コントロールの下側と右側の境界線に近づくと、スナップ線が表示されることを確認します。これらのスナップ線は、Button の Margin プロパティに対応します。
GroupBox コントロールの Padding プロパティを変更します。これを行うには [プロパティ] ウィンドウで Padding エントリを展開し、All プロパティを 20 に設定します。
GroupBox コントロール内の Button コントロールを選択し、GroupBox の中心の方向に移動します。
GroupBox コントロールの境界線からより遠い距離でスナップ線が表示されます。この距離は、Button コントロールの Margin プロパティと GroupBox コントロールの Padding プロパティの合計です。
コントロールの自動サイズ変更
アプリケーションによっては、デザイン時と実行時でコントロールのサイズが異なるものがあります。たとえば、Button コントロールのテキストはデータベースから取得されることがあり、その長さを事前に知ることはできません。
AutoSize プロパティを true に設定すると、コントロールのサイズはその内容に合わせて自動的に調整されます。詳細については、「AutoSize プロパティの概要」を参照してください。
AutoSize プロパティを使用してフォーム上にコントロールを配置するには
ツールボックスからフォームに、Button コントロールをドラッグします。
Button コントロールの Text プロパティを "This button has a long string for its Text property" に変更します。
この変更をコミットすると、Button コントロールのサイズが新しいテキストに合わせて変更されます。
ツールボックスから別の Button コントロールをフォームにドラッグします。
Button コントロールの Text プロパティを "This button has a long string for its Text property" に変更します。
この変更をコミットすると、Button コントロールのサイズは自動的に調整されず、テキストがコントロールの右端でクリップされます。
Padding プロパティを変更します。これを行うには [プロパティ] ウィンドウで Padding エントリを展開し、All プロパティを 5 に設定します。
コントロールの内部のテキストが 4 辺でクリップされます。
Button コントロールの AutoSize プロパティを true に変更します。
Button コントロールのサイズが自動的に変更され、文字列全体が囲まれます。また、テキストの周囲に埋め込みが追加され、Button コントロールが上下左右に拡大されます。
ツールボックスからフォームに、Button コントロールをドラッグします。フォームの右下隅付近に配置してください。
Button コントロールの Text プロパティを "This button has a long string for its Text property" に変更します。
この変更をコミットすると、Button コントロールのサイズが左方向に調整されます。通常、自動サイズ変更により、コントロールは Anchor プロパティ設定と反対の方向に拡大されます。
AutoSize プロパティと AutoSizeMode プロパティ
一部のコントロールは、AutoSizeMode プロパティをサポートしています。このプロパティにより、コントロールの自動サイズ変更動作をより細かく制御できます。
AutoSizeMode プロパティを使用するには
ツールボックスからフォームに、Panel コントロールをドラッグします。
Panel コントロールを選択し、右下のサイズ変更ハンドルをグラブします。Panel コントロールを拡大または縮小します。
メモ :Panel コントロールのサイズは自由に変更できますが、Button コントロールの右下隅の位置を越えて縮小できません。この動作は、AutoSizeMode プロパティの既定値である GrowOnly で指定されます。
Panel コントロールの AutoSizeMode プロパティの値を GrowAndShrink に設定します。
Panel コントロールのサイズが自動的に変更され、Button コントロールが囲まれます。Panel コントロールのサイズは変更できません。
次の手順
Windows フォーム アプリケーションにコントロールを配置するためのレイアウト機能は、他にも数多くあります。次のような組み合わせを試すことができます。
TableLayoutPanel コントロールを使用してフォームをビルドします。詳細については、「チュートリアル : TableLayoutPanel を使用した Windows フォーム上のコントロールの配置」を参照してください。TableLayoutPanel コントロールの Padding プロパティの値、およびその子コントロールの Margin プロパティの値を変更してみてください。
また、FlowLayoutPanel コントロールを使用して同じ内容を試みます。詳細については、「チュートリアル : FlowLayoutPanel を使用した Windows フォーム上のコントロールの配置」を参照してください。
Panel コントロール内で子コントロールのドッキングを試みます。Padding プロパティは、DockPadding プロパティをより一般化したものです。機能を確認するには、Panel コントロール内に子コントロールを配置し、その子コントロールの Dock プロパティを Fill に設定します。次に、Panel コントロールの Padding プロパティをさまざまな値に変更して変化を確認します。
参照
処理手順
チュートリアル : TableLayoutPanel を使用した Windows フォーム上のコントロールの配置
チュートリアル : FlowLayoutPanel を使用した Windows フォーム上のコントロールの配置
チュートリアル : スナップ線を使用した Windows フォーム上のコントロールの配置