次の方法で共有

チュートリアル: パディング、余白、および AutoSize プロパティを使用してコントロールをレイアウトする

  • [アーティクル]

フォーム上でのコントロールの正確な配置は、多くのアプリケーションにとって優先度が高くなります。 Visual Studio の Windows フォーム デザイナー には、これを実現するための多くのレイアウト ツールが含まれています。 最も重要なのは、すべての Windows フォーム コントロールに存在する Margin、Padding、および AutoSize プロパティです。

Margin プロパティは、コントロールの境界線から指定した距離を他のコントロールに保持するコントロールの周囲のスペースを定義します。

Padding プロパティは、コントロールのコンテンツ (Text プロパティの値など) をコントロールの境界線から指定した距離に保つコントロールの内部のスペースを定義します。

次の図は、コントロールの Padding プロパティと Margin プロパティを示しています。

Windows フォーム コントロールのパディングと余白

AutoSize プロパティは、コンテンツに合うように自動的にサイズを設定するようにコントロールに指示します。 元の Size プロパティの値より小さいサイズに変更されることはありません。また、Padding プロパティの値を考慮します。

前提 条件

このチュートリアルを完了するには、Visual Studio が必要です。

プロジェクトを作成する

  1. Visual Studio で、LayoutExampleという Windows アプリケーション プロジェクトを作成します。

  2. Windows フォーム デザイナーでフォームを選択します。

コントロールの余白を設定する

Margin プロパティを使用して、コントロール間の既定の距離を設定できます。 コントロールを別のコントロールに十分近づけると、2 つのコントロールの余白を示すスナップ線が表示されます。 また、移動しているコントロールは、余白によって定義される距離にスナップされます。

Margin プロパティを使用してフォームにコントロールを配置する

  1. ツールボックス からフォームに 2 つの Button コントロールをドラッグします。

  2. Button コントロールの 1 つを選択し、ほとんど触れるまで他のコントロールの近くに移動します。

    それらの間に表示されるスナップ線を観察します。 この距離は、2 つのコントロールの Margin 値の合計です。 移動しているコントロールは、この距離にスナップされます。 詳細については、「チュートリアル: スナップ線を使用した Windows フォームでのコントロールの配置」を参照してください。

  3. プロパティ ウィンドウで Margin エントリを展開し、All プロパティを 20に設定して、コントロールの Margin プロパティを変更します。

  4. Button コントロールの 1 つを選択し、もう一方のコントロールの近くに移動します。

    余白の値の合計を定義するスナップ線が長くなり、コントロールが他のコントロールからより大きな距離にスナップされます。

  5. 選択したコントロールの Margin プロパティを変更するには、[プロパティ] ウィンドウで Margin エントリを展開し、Top プロパティを 5に設定します。

  6. 選択したコントロールを他のコントロールの下に移動し、スナップ線が短くなっていることを確認します。 選択したコントロールを他のコントロールの左側に移動し、スナップ線が手順 4 で観察した値を保持していることを確認します。

  7. Margin プロパティ、Left、Top、Right、Bottom、の各側面を異なる値に設定することも、All プロパティを使用してすべて同じ値に設定することもできます。

コントロールのパディングを設定する

アプリケーションに必要な正確なレイアウトを実現するために、多くの場合、コントロールには子コントロールが含まれます。 子コントロールの境界線と親コントロールの境界線の近接性を指定する場合は、親コントロールの Padding プロパティを子コントロールの Margin プロパティと組み合わせて使用します。 Padding プロパティは、コントロールのコンテンツ (Button コントロールの Text プロパティなど) の境界線への近接性を制御するためにも使用されます。

埋め込みを使用してフォームにコントロールを配置する

  1. ツールボックス からフォームに Button コントロールをドラッグします。

  2. コントロールの プロパティの値を true変更します。

  3. Padding プロパティを変更するには、[プロパティ] ウィンドウで Padding エントリを展開し、All プロパティを 5に設定します。

    コントロールが広がり、新しいパディングのための領域が提供されます。

  4. ツールボックス からフォームに GroupBox コントロールをドラッグします。 ツールボックス から GroupBox コントロールに Button コントロールをドラッグします。 Button コントロールを GroupBox コントロールの右下隅にぴったりと揃えて配置します。

    Button コントロールが GroupBox コントロールの下と右の境界線に近づくと表示されるスナップ線を確認します。 これらのスナップ線は、Buttonの Margin プロパティに対応します。

  5. プロパティ ウィンドウで Padding エントリを展開し、All プロパティを 20に設定して、GroupBox コントロールの Padding プロパティを変更します。

  6. GroupBox コントロール内の Button コントロールを選んで、GroupBoxの中央に向かって移動させます。

    スナップ線は、GroupBox コントロールの境界線から離れた位置に表示されます。 この距離は、Button コントロールの Margin プロパティと GroupBox コントロールの Padding プロパティの合計です。

サイズに関するコントロールが自動化されている

一部のアプリケーションでは、コントロールのサイズは実行時にデザイン時と同じになりません。 たとえば、Button コントロールのテキストはデータベースから取得でき、その長さは事前にわかっていません。

AutoSize プロパティが trueに設定されている場合、コントロールはコンテンツに合ったサイズになります。 詳細については、「AutoSize プロパティの概要」を参照してください。

AutoSize プロパティを使用してフォームにコントロールを配置する

  1. ツールボックス からフォームに Button コントロールをドラッグします。

  2. コントロールの プロパティの値を true変更します。

  3. Button コントロールの Text プロパティを に変更します。このボタンには、Text プロパティの長い文字列があります。

    変更をコミットすると、Button コントロールは新しいテキストに合わせてサイズを変更します。

  4. ツールボックス からフォームに別の Button コントロールをドラッグします。

  5. Button コントロールの Text プロパティを " に変更しますこのボタンには、Text プロパティの長い文字列があります。"

    変更をコミットすると、Button コントロール自体のサイズは変更されず、テキストはコントロールの右端でクリップされます。

  6. Padding プロパティを変更するには、[プロパティ] ウィンドウで Padding エントリを展開し、All プロパティを 5に設定します。

    コントロールの内部のテキストは、4 辺すべてでクリップされます。

  7. コントロールの プロパティを trueに変更します。

    Button コントロールは、文字列全体を囲むようにそれ自体のサイズを変更します。 また、テキストの周囲にパディングが追加され、Button コントロールが 4 方向すべてに展開されます。

  8. ツールボックス からフォームに Button コントロールをドラッグします。 フォームの右下隅の近くに配置します。

  9. コントロールの プロパティの値を true変更します。

  10. Button コントロールの Anchor プロパティを Right, Bottomに設定します。

  11. Button コントロールの Text プロパティを " に変更しますこのボタンには、Text プロパティの長い文字列があります。"

変更をコミットすると、Button コントロールのサイズが左に向かって変更されます。 一般に、自動サイズ設定では、Anchor プロパティ設定の反対方向にコントロールのサイズが大きくなります。

AutoSize と AutoSizeMode プロパティ

一部のコントロールでは、AutoSizeMode プロパティがサポートされており、コントロールの自動サイズ設定動作をよりきめ細かく制御できます。

AutoSizeMode プロパティを使用する

  1. ツールボックス からフォームに Panel コントロールをドラッグします。

  2. コントロールの プロパティの値を true設定します。

  3. ツールボックス から Panel コントロールに Button コントロールをドラッグします。

  4. Panel コントロールの右下隅の近くに Button コントロールを配置します。

  5. Panel コントロールを選択し、右下のサイズ変更ハンドルをドラッグします。 Panel コントロールのサイズを大きく小さくします。

    手記

    Panel コントロールのサイズは自由に変更できますが、Button コントロールの右下隅の位置よりも小さくすることはできません。 この動作は、AutoSizeMode プロパティの既定値 (GrowOnly) で指定されます。

  6. Panel コントロールの AutoSizeMode プロパティの値を GrowAndShrinkに設定します。

    Panel コントロールは、Button コントロールを囲むサイズ自体を設定します。 Panel コントロールのサイズを変更することはできません。

  7. Button コントロールを Panel コントロールの左上隅にドラッグします。

    Panel コントロールのサイズが、Button コントロールの新しい位置に変更されます。

次の手順

Windows フォーム アプリケーションでコントロールを配置するための他の多くのレイアウト機能があります。 試す可能性のある組み合わせをいくつか次に示します。

  • TableLayoutPanel コントロールを使用してフォームを作成します。 詳細については、「チュートリアル: TableLayoutPanelを使用した Windows フォームでのコントロールの配置」を参照してください。 TableLayoutPanel コントロールの Padding プロパティの値と、その子コントロールの Margin プロパティを変更してみてください。

  • FlowLayoutPanel コントロールを使用して同じ実験を試してください。 詳細については、「チュートリアル: FlowLayoutPanelを使用した Windows フォームでのコントロールの配置」を参照してください。

  • Panel コントロールで子コントロールのドッキングを試します。 Padding プロパティは、DockPadding プロパティのより一般的な認識であり、Panel コントロールに子コントロールを配置し、子コントロールの Dock プロパティを Fillに設定することで、この点を満足させることができます。 Panel コントロールの Padding プロパティをさまざまな値に設定し、効果をメモします。

関連項目