チュートリアル: スナップ線を使用した Windows フォームでのコントロールの配置Walkthrough: Arrange controls on Windows Forms using snaplines

フォーム上のコントロールを正確に配置することは、多くのアプリケーションで優先度の高い作業です。Precise placement of controls on your form is a high priority for many applications. Windows フォームデザイナーには、これを実現するための多数のレイアウトツールが用意されています。The Windows Forms Designer gives you many layout tools to accomplish this. 最も重要なものの1つは、SnapLine 機能です。One of the most important is the SnapLine feature.

スナップ線を使用すると、他のコントロールとコントロールを整列する場所を正確に確認できます。Snaplines show you precisely where to line up controls with other controls. また、 Windows ユーザーインターフェイスのガイドラインに従って、コントロール間の余白の推奨される距離も示しています。They also show you the recommended distances for margins between controls, as specified by the Windows User Interface guidelines.

スナップ線を使用すると、コントロールの配置が簡単になり、プロフェッショナルな外観と動作 (ルックアンドフィール) がわかりやすくなります。Snaplines make it easy to align your controls, for crisp, professional appearance and behavior (look and feel).

プロジェクトの作成Create the project

  1. Visual Studio で、"SnaplineExample" という名前の Windows ベースのアプリケーションプロジェクトを作成します。In Visual Studio, create a Windows-based application project called "SnaplineExample".

  2. フォームデザイナーでフォームを選択します。Select the form in the Forms Designer.

[スペースとコントロールの整列]Space and align controls

スナップ線を使用すると、フォーム上にコントロールを配置するための正確で直感的な方法が提供されます。Snaplines give you an accurate and intuitive way to align controls on your form. これは、選択したコントロールを、別のコントロールまたはコントロールのセットと一致する位置の近くに移動するときに表示されます。They appear when you are moving a selected control or controls near a position that would align with another control or set of controls. 他のコントロールを移動すると、選択した位置が提案された位置に "スナップ" されます。Your selection will "snap" to the suggested position as you move it past the other controls.

スナップ線を使用してコントロールを配置するにはTo arrange controls using snaplines

  1. Button ツールボックス から コントロールをフォームにドラッグします。Drag a Button control from the Toolbox onto your form.

  2. Button コントロールをフォームの右下隅に移動します。Move the Button control to the lower-right corner of the form. Button コントロールとして表示されるスナップ線は、フォームの下と右の境界線に近づいています。Note the snaplines that appear as the Button control approaches the bottom and right borders of the form. これらのスナップ線には、コントロールの境界線とフォームとの間の推奨される距離が表示されます。These snaplines display the recommended distance between the borders of the control and the form.

  3. フォームの境界線を中心に Button コントロールを移動し、スナップ線が表示される場所をメモします。Move the Button control around the borders of the form and note where the snaplines appear. 操作が完了したら、フォームの中央付近にある Button コントロールを移動します。When you are finished, move the Button control near the center of the form.

  4. 別の Button コントロールを [ツールボックス] からフォームにドラッグします。Drag another Button control from the Toolbox onto your form.

  5. 2番目の Button コントロールを、最初のレベルに近い方に移動します。Move the second Button control until it is nearly level with the first. 両方のボタンのテキストベースラインに表示されるスナップ線に注目してください。移動しようとしているコントロールは、他のコントロールと正確に同じ位置にスナップします。Note the snapline that appears at the text baseline of both buttons, and note that the control you are moving snaps to a position that is exactly level with the other control.

  6. 2番目の Button コントロールを、最初ののすぐ上に配置するまで移動します。Move the second Button control until it is positioned directly above the first. 両方のボタンの左端と右端に表示されるスナップ線に注目してください。移動するコントロールは、他のコントロールと正確に一致する位置にスナップされることに注意してください。Note the snaplines that appear along the left and right edges of both buttons, and note that the control you are moving snaps to a position that is exactly aligned with the other control.

  7. Button コントロールのいずれかを選択し、ほぼタッチするまで、そのコントロールの近くに移動します。Select one of the Button controls and move it close to the other, until they are almost touching. これらの間に表示されるスナップ線に注意してください。Note the snapline that appears between them. この距離は、コントロールの境界線の間の推奨される距離です。This distance is the recommended distance between the borders of the controls. また、移動しようとしているコントロールがこの位置にスナップされることにも注意してください。Also note that the control you are moving snaps to this position.

  8. ツールボックスから2つの Panel コントロールをフォームにドラッグします。Drag two Panel controls from the Toolbox onto your form.

  9. Panel コントロールのいずれかを1つ目のコントロールの最上位レベルまで移動します。Move one of the Panel controls until it is nearly level with the first. 両方のコントロールの上端と下端に表示されるスナップ線に注目します。また、移動しようとしているコントロールは、他のコントロールと正確に同じ位置にスナップします。Note the snaplines that appear along the top and bottom edges of both controls, and note that the control you are moving snaps to a position that is exactly level with the other control.

フォームとコンテナーの余白に合わせるAlign to form and container margins

スナップ線を使用すると、一貫した方法でコントロールを配置し、コンテナーの余白を整えることができます。Snaplines help you to align your controls to form and container margins in a consistent manner.

  1. Button コントロールの1つを選択し、スナップ線が表示されるまでフォームの右の境界線の近くに移動します。Select one of the Button controls and move it close to the right border of the form until a snapline appears. 右の境界線からのスナップ線の距離は、コントロールの Margin プロパティとフォームの Padding プロパティ値の合計です。The snapline's distance from the right border is the sum of the control's Margin property and the form's Padding property values.

    注意

    フォームの Padding プロパティが0、0、0、0に設定されている場合、Windows フォームデザイナーによって、影付きの Padding 値 (9、9、9、9) が示されます。If the form's Padding property is set to 0,0,0,0, the Windows Forms Designer gives the form a shadowed Padding value of 9,9,9,9. この動作をオーバーライドするには、0、0、0、0以外の値を割り当てます。To override this behavior, assign a value other than 0,0,0,0.

  2. [プロパティ] ウィンドウで Margin エントリを展開し、[All] プロパティを0に設定して、Button コントロールの Margin プロパティの値を変更します。Change the value of the Button control's Margin property by expanding the Margin entry in the Properties window and setting the All property to 0. 詳細については、「チュートリアル: 埋め込み、余白、AutoSize プロパティを使用した Windows フォームコントロールのレイアウト」を参照してください。For details, see Walkthrough: Laying Out Windows Forms Controls with Padding, Margins, and the AutoSize Property.

  3. スナップ線が表示されるまで、Button コントロールをフォームの右の境界線の近くに移動します。Move the Button control close to the right border of the form until a snapline appears. この距離は、フォームの Padding プロパティの値によって指定されるようになりました。This distance is now given by the value of the form's Padding property.

  4. GroupBox ツールボックス から コントロールをフォームにドラッグします。Drag a GroupBox control from the Toolbox onto your form.

  5. [プロパティ] ウィンドウの Padding エントリを展開し、[All] プロパティを10に設定して、GroupBox コントロールの Padding プロパティの値を変更します。Change the value of the GroupBox control's Padding property by expanding the Padding entry in the Properties window and setting the All property to 10.

  6. [ツールボックス] から [Button] コントロールを GroupBox コントロールにドラッグします。Drag a Button control from the Toolbox into the GroupBox control.

  7. スナップ線が表示されるまで、GroupBox コントロールの右の境界線の近くに Button コントロールを移動します。Move the Button control close to the right border of the GroupBox control until a snapline appears. GroupBox コントロール内で Button コントロールを移動し、スナップ線が表示される場所をメモします。Move the Button control within the GroupBox control and note where the snaplines appear.

グループ化されたコントロールに揃えるAlign to grouped controls

スナップ線を使用すると、グループ化されたコントロールだけでなく、GroupBox コントロール内のコントロールも配置できます。You can use snaplines to align grouped controls as well as controls within a GroupBox control.

  1. フォーム上の2つのコントロールを選択します。Select two of the controls on your form. 選択範囲を移動し、選択範囲と他のコントロールの間に表示されるスナップ線をメモします。Move the selection around and note the snaplines that appear between your selection and the other controls.

  2. GroupBox ツールボックス から コントロールをフォームにドラッグします。Drag a GroupBox control from the Toolbox onto your form.

  3. [ツールボックス] から [Button] コントロールを GroupBox コントロールにドラッグします。Drag a Button control from the Toolbox into the GroupBox control.

  4. Button コントロールのいずれかを選択し、GroupBox コントロールの周囲に移動します。Select one of the Button controls and move it around the GroupBox control. GroupBox コントロールの端に表示されるスナップ線に注意してください。Note the snaplines that appear at the edges of the GroupBox control. また、GroupBox コントロールに含まれる Button コントロールの端に表示されるスナップ線もメモします。Also note the snaplines that appear at the edges of the Button control that is contained by the GroupBox control. コンテナーコントロールの子であるコントロールは、スナップ線もサポートします。Controls that are children of a container control also support snaplines.

スナップ線を使用して、サイズをアウトラインし、コントロールを配置するUse snaplines to place a control by outlining its size

  1. [ツールボックス]Button コントロール アイコンをクリックします。In the Toolbox, click the Button control icon. フォームにドラッグしないでください。Do not drag it onto the form.

  2. フォームのデザイン画面上にマウスポインターを移動します。Move the mouse pointer over the form's design surface. ポインターが Button コントロール アイコンが付いた十字カーソルに変わることにご注意ください。Note that the pointer changes to a crosshair with the Button control icon attached. また、Button コントロールに対して配置された位置を示すために表示されるスナップ線もメモします。Also note the snaplines that appear to suggest aligned positions for the Button control.

  3. マウス ボタンを押したままにします。Click and hold the mouse button.

  4. フォームの周りにマウスポインターをドラッグします。Drag the mouse pointer around the form. コントロールの位置とサイズを示すアウトラインが描画されることに注意してください。Note that an outline is drawn, indicating the position and the size of the control.

  5. フォーム上の別のコントロールに合わせて、ポインターをドラッグします。Drag the pointer until it aligns with another control on the form. スナップ線が配置を示すように見えることに注意してください。Note that a snapline appears to indicate alignment.

  6. マウスのボタンを離します。Release the mouse button. コントロールは、アウトラインによって示される位置とサイズで作成されます。The control is created at the position and size indicated by the outline.

ツールボックスからコントロールをドラッグするときにスナップ線を使用するUse snaplines when dragging a control from the Toolbox

  1. Button コントロールをツールボックスからフォームにドラッグしますが、マウスボタンを離しません。Drag a Button control from the Toolbox onto your form, but do not release the mouse button.

  2. フォームのデザイン画面上にマウスポインターを移動します。Move the mouse pointer over the form's design surface. ポインターは、新しい Button コントロールが作成される位置を示すように変更されることに注意してください。Note that the pointer changes to indicate the position at which the new Button control will be created.

  3. フォームの周りにマウスポインターをドラッグします。Drag the mouse pointer around the form. Button コントロールに対して配置された位置を提案するために表示されるスナップ線に注意してください。Note the snaplines that appear to suggest aligned positions for the Button control. 他のコントロールに合わせて配置された位置を検索します。Find a position that is aligned with other controls.

  4. マウスのボタンを離します。Release the mouse button. コントロールは、スナップ線によって示される位置に作成されます。The control is created at the position indicated by the snaplines.

スナップ線を使用したコントロールのサイズ変更Resize a control using snaplines

  1. Button ツールボックス から コントロールをフォームにドラッグします。Drag a Button control from the Toolbox onto your form.

  2. 角のサイズ変更ハンドルとドラッグを取得して、Button コントロールのサイズを変更します。Resize the Button control by grabbing one of the corner sizing handles and dragging. 詳細については、「方法: Windows フォームのコントロールのサイズを変更する」を参照してください。For details, see How to: Resize Controls on Windows Forms.

  3. サイズ変更ハンドルをドラッグして、Button コントロールの境界線の1つが別のコントロールに揃うようにします。Drag the sizing handle until one of the Button control's borders is aligned with another control. スナップ線が表示されることに注意してください。Note that a snapline appears. また、サイズ変更ハンドルはスナップ線によって示される位置にスナップされることにも注意してください。Also note that the sizing handle snaps to the position indicated by the snapline.

  4. さまざまな方向に Button コントロールのサイズを変更し、サイズ変更ハンドルを別のコントロールに揃えます。Resize the Button control in different directions and align the sizing handle to different controls. 整列を示すために、さまざまな向きでスナップ線がどのように表示されるかに注目してください。Note how the snaplines appear in various orientations to indicate alignment.

コントロールのテキストにラベルを揃えるAlign a label to a control's text

  1. TextBox ツールボックス から コントロールをフォームにドラッグします。Drag a TextBox control from the Toolbox onto your form. フォームに TextBox コントロールをドロップする場合は、スマートタググリフをクリックし、 [テキストを textBox1 に設定] オプションを選択します。When you drop the TextBox control onto the form, click the smart-tag glyph and select the Set text to textBox1 option. 詳細については、「チュートリアル: Windows フォームコントロールのスマートタグを使用した一般的なタスクの実行」を参照してください。For details, see Walkthrough: Performing Common Tasks Using Smart Tags on Windows Forms Controls.

  2. Label ツールボックス から コントロールをフォームにドラッグします。Drag a Label control from the Toolbox onto your form.

  3. Label コントロールの AutoSize プロパティの値を trueに変更します。Change the value of the Label control's AutoSize property to true. コントロールの境界線は、表示テキストに合わせて調整されることに注意してください。Note that the control's borders are adjusted to fit the display text.

  4. Label コントロールを TextBox コントロールの左側に移動すると、TextBox コントロールの下端に揃えられます。Move the Label control to the left of the TextBox control, so it is aligned with the bottom edge of the TextBox control. 2つのコントロールの下端に沿って表示されるスナップ線に注意してください。Note the snapline that appears along the bottom edges of the two controls.

  5. Label テキストと TextBox テキストが揃うまで、Label コントロールを少し上に移動します。Move the Label control slightly upward, until the Label text and the TextBox text are aligned. 表示される別のスタイルのスナップ線を確認すると、両方のコントロールのテキストフィールドがアラインされたことを示します。Note the differently styled snapline that appears, indicating when the text fields of both controls are aligned.

キーボードナビゲーションでスナップ線を使用するUse snaplines with keyboard navigation

  1. Button ツールボックス から コントロールをフォームにドラッグします。Drag a Button control from the Toolbox onto your form. フォームの左上隅に配置します。Place it in the upper-left corner of the form.

  2. Ctrl+キーを押します。Press Ctrl+down arrow. コントロールが、最初に使用可能な水平方向の配置位置にフォームを下方向に移動することに注意してください。Note that the control moves down the form to the first available horizontal alignment position.

  3. Ctrl+↓キーを押して、コントロールがフォームの下部に到達するまで移動します。Press Ctrl+down arrow until the control reaches the bottom of the form. フォームの下に移動すると、その位置に注意してください。Note the positions it occupies as it moves down the form.

  4. Ctrl+キーを押します。Press Ctrl+right arrow. コントロールは、フォーム上で、最初に使用可能な垂直方向の配置位置に移動することに注意してください。Note that the control moves across the form to the first available vertical alignment position.

  5. コントロールがフォームの側に到達するまで、Ctrl キーを押しながら 右方向キーを+ます。Press Ctrl+right arrow until the control reaches the side of the form. フォーム間を移動するときに占有される位置に注意してください。Note the positions it occupies as it moves across the form.

  6. 方向キーの組み合わせを使用して、コントロールをフォームの周囲に移動します。Move the control around the form with a combination of arrow keys. コントロールが占有する位置と、コントロールに付随するスナップ線をメモします。Note the positions the control occupies and the snaplines that accompany them.

  7. Shiftキーを押し+方向キーを押して、1ピクセルずつインクリメントして Button コントロールのサイズを変更します。Press Shift+arrow keys to resize the Button control by increments of one pixel.

  8. Ctrl++Shiftキーを押しながら方向キーを押して、スナップ線のインクリメントで Button コントロールのサイズを変更します。Press Ctrl+Shift+arrow keys to resize the Button control in snapline increments.

スナップガイドラインを選択的に無効にするSelectively disable snaplines

  1. TableLayoutPanel ツールボックス から コントロールをフォームにドラッグします。Drag a TableLayoutPanel control from the Toolbox onto your form.

  2. Button ツールボックス コントロール アイコンをダブルクリックします。Double-click the Button control icon in the Toolbox. TableLayoutPanel コントロールの最初のセルに新しいボタンコントロールが表示されることに注意してください。Note that a new button control appears in the TableLayoutPanel control's first cell.

  3. ツールボックスの [Button コントロール] アイコンを2回ダブルクリックします。Double-click the Button control icon in the Toolbox twice more. これにより、TableLayoutPanel コントロールに1つの空のセルが残されます。This leaves one empty cell in the TableLayoutPanel control.

  4. [ツールボックス] から Button コントロールを TableLayoutPanel コントロールの空のセルにドラッグします。Drag a Button control from the Toolbox into the empty cell of the TableLayoutPanel control. スナップ線は表示されないことに注意してください。Note that no snaplines appear.

  5. Button コントロールを TableLayoutPanel コントロールの外にドラッグし、TableLayoutPanel コントロールの周囲に移動します。Drag the Button control out of the TableLayoutPanel control and move it around the TableLayoutPanel control. スナップ線が再び表示されることに注意してください。Note that snaplines appear again.

スナップガイドラインの無効化Disable snaplines

Altキーを押しながら、コントロールをフォームの上に移動します。Press the Alt key and while moving a control around the form.

スナップ線は表示されず、コントロールは潜在的な配置位置にスナップされません。No snaplines appear and the control does not snap to any potential alignment positions.

デザイン環境でスナップガイドラインを無効にするにはTo disable snaplines in the design environment

  1. [ツール] メニューの [オプション] ダイアログボックスを開きます。From the Tools menu, open the Options dialog box. [Windows フォームデザイナー] を選択します。Select Windows Forms Designer.

  2. [全般] ノードを選択します。Select the General node. [レイアウトモード] セクションで、選択範囲をスナップガイドラインからSnapToGridに変更します。In the Layout Mode section, change the selection from SnapLines to SnapToGrid.

  3. [OK] を選択して設定を適用します。Select OK to apply the setting.

  4. フォーム上のコントロールを選択し、他のコントロールの周囲に移動します。Select a control on your form and move it around the other controls. スナップ線が表示されないことに注意してください。Note that snaplines do not appear.

次のステップNext steps

スナップ線は、フォーム上にコントロールを配置するための直感的な手段を提供します。Snaplines offer an intuitive means of aligning controls on your form. さらに詳しく調べるための推奨事項を次に示します。Suggestions for more exploration include:

  • GroupBox コントロールを別の GroupBox コントロール内に入れ子にしてみてください。Try nesting a GroupBox control within another GroupBox control. GroupBox コントロールに Button コントロールを配置し、親 GroupBox コントロール内で別のコントロールを配置します。Place a Button control within the child GroupBox control, and another within the parent GroupBox control. Button コントロールを移動して、スナップ線がコンテナーの境界を越えていることを確認します。Move the Button controls around to see how the snaplines cross container boundaries.

  • TextBox コントロールの列と、Label コントロールの対応する列を作成します。Create a column of TextBox controls and a corresponding column of Label controls. Label コントロールの AutoSize プロパティの値を trueに設定します。Set the value of the Label controls' AutoSize property to true. スナップ線を使用して Label コントロールを移動し、表示されているテキストが TextBox コントロール内のテキストに合わせて調整されるようにします。Use snaplines to move the Label controls so their displayed text is aligned with the text in the TextBox controls.

関連項目See also