チュートリアル: スナップ線を使用して Windows フォーム上のコントロールを配置する

  • [アーティクル]

フォーム上のコントロールを正確に配置することは、多くのアプリケーションで優先度の高い作業です。 Windows フォーム デザイナーには、これを実現するための多数のレイアウト ツールが用意されています。 最も重要なものの 1 つは SnapLine 機能です。

スナップ線を使用すると、他のコントロールに合わせてコントロールを配置する場所を正確に確認できます。 また、Windows ユーザー インターフェイス ガイドラインに従って、コントロール間の余白の推奨される距離も示されます。

スナップ線を使用すると、わかりやすくプロフェッショナルな外観と動作 (ルック アンド フィール) になるように、コントロールを簡単に配置できます。

プロジェクトの作成

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

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

間隔を空けてコントロールを整列する

スナップ線を使用すると、フォーム上にコントロールを配置するための正確で直感的な方法が提供されます。 それは、選択したコントロール (1 つまたは複数) を、別のコントロールまたはコントロールのセットと揃った位置の近くに移動すると表示されます。 選択したものを、他のコントロールを超えて移動すると、推奨される位置に "スナップ" されます。

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

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

  2. Button コントロールを、フォームの右下隅に移動します。 Button コントロールがフォームの下と右の境界線に近づくと表示されるスナップ線に注意してください。 これらのスナップ線には、コントロールの境界線とフォームとの間の推奨される距離が表示されます。

  3. フォームの境界線の周囲に Button コントロールを移動し、どこでスナップ線が表示されるかに注目してください。 終わったら、フォームの中央付近に Button コントロールを移動します。

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

  5. 2 番目の Button コントロールを、最初のものとほぼ同じ高さになるまで移動します。 両方のボタンのテキスト ベースラインに表示されるスナップ線に注目し、移動しているコントロールが他のコントロールと正確に同じ高さにスナップされることに注意してください。

  6. 2 番目の Button コントロールを、1 番目のすぐ上の位置まで移動します。 両方のボタンの左端と右端に沿って表示されるスナップ線に注目し、移動しているコントロールが他のコントロールと正確に揃った位置にスナップされることに注意してください。

  7. Button コントロールの 1 つを選択し、他の近くに、ほぼ接触するまで移動します。 それらの間に表示されるスナップ線に注意してください。 この距離は、コントロールの境界線の間の推奨される距離です。 また、移動しているコントロールがこの位置にスナップされることにも注目してください。

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

  9. Panel コントロールの 1 つを、最初のものとほぼ同じ高さになるまで移動します。 両方のコントロールの上端と下端に沿って表示されるスナップ線に注目し、移動しているコントロールが他のコントロールと正確に同じ高さにスナップされることに注意してください。

フォームとコンテナーの余白に揃える

スナップ線は、一貫した方法でコントロールをフォームとコンテナーの余白に揃えるのに役立ちます。

  1. Button コントロールの 1 つを選択し、スナップ線が表示されるまで、フォームの右の境界線の近くに移動します。 右の境界線からスナップ線までの距離は、コントロールの Margin プロパティとフォームの Padding プロパティの値の合計です。

    注意

    フォームの Padding プロパティが 0,0,0,0 に設定されている場合は、Windows フォーム デザイナーによって、影付きの Padding の値である 9,9,9,9 がフォームに設定されます。 この動作をオーバーライドするには、0,0,0,0 以外の値を割り当てます。

  2. Button コントロールの Margin プロパティの値を変更します。これを行うには、 [プロパティ] ウィンドウで Margin のエントリを展開し、All プロパティを 0 に設定します。 詳細については、「チュートリアル: Padding、Margin、AutoSize プロパティを使用した Windows フォーム コントロールのレイアウト」を参照してください。

  3. Button コントロールを、スナップ線が表示されるまで、フォームの右の境界線の近くに移動します。 この距離は、フォームの Padding プロパティの値によって指定されるようになりました。

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

  5. GroupBox コントロールの Padding プロパティの値を変更します。これを行うには、 [プロパティ] ウィンドウで Padding のエントリを展開し、All プロパティを 10 に設定します。

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

  7. Button コントロールを、スナップ線が表示されるまで、GroupBox コントロールの右の境界線の近くに移動します。 GroupBox コントロール内の Button コントロールを移動し、どこでスナップ線が表示されるかに注目します。

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

スナップ線を使用すると、グループ化されたコントロールだけでなく、GroupBox コントロール内のコントロールも配置できます。

  1. フォーム上の 2 つのコントロールを選択します。 選択したものをあちこち移動して、選択したものと他のコントロールの間に表示されるスナップ線に注目します。

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

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

  4. Button コントロールの 1 つを選択し、GroupBox コントロールの周囲に移動します。 GroupBox コントロールの端に表示されるスナップ線に注意してください。 また、GroupBox コントロールに含まれる Button コントロールの端に表示されるスナップ線にも注意してください。 コンテナー コントロールの子であるコントロールでも、スナップ線がサポートされます。

スナップ線を使用し、サイズのアウトラインを表示することでコントロールを配置する

  1. ツールボックスで Button コントロール アイコンをクリックします。 フォームにドラッグしないでください。

  2. フォームのデザイン画面上にマウス ポインターを移動します。 ポインターが Button コントロール アイコンが付いた十字カーソルに変わることにご注意ください。 また、Button コントロールの整列された位置を示すスナップ線が表示されることにも注意してください。

  3. マウス ボタンを押したままにします。

  4. フォームの周りにマウス ポインターをドラッグします。 コントロールの位置とサイズを示すアウトラインが描画されることに注意してください。

  5. フォーム上の別のコントロールと揃うまでポインターをドラッグします。 配置を示すスナップ線が表示されることに注意してください。

  6. マウスのボタンを離します。 アウトラインによって示される位置とサイズで、コントロールが作成されます。

ツールボックスからコントロールをドラッグするときにスナップ線を使用する

  1. Button コントロールをツールボックスからフォームにドラッグしますが、マウス ボタンを離さないでください。

  2. フォームのデザイン画面上にマウス ポインターを移動します。 ポインターが変化し、新しい Button コントロールが作成される位置が示されることに注意してください。

  3. フォームの周りにマウス ポインターをドラッグします。 Button コントロールの整列された位置を示すスナップ線が表示されることに注意してください。 他のコントロールと揃う位置を見つけます。

  4. マウスのボタンを離します。 スナップ線によって示される位置にコントロールが作成されます。

スナップ線を使用してコントロールのサイズを変更する

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

  2. いずれかの角のサイズ変更ハンドルをグラブしてドラッグし、Button コントロールのサイズを変更します。 詳細については、「方法: Windows フォーム上のコントロールのサイズを変更する」を参照してください。

  3. Button コントロールのいずれかの境界線が別のコントロールと揃うまで、サイズ変更ハンドルをドラッグします。 スナップ線が表示されることに注意してください。 また、サイズ変更ハンドルがスナップ線によって示される位置にスナップされることにも注意してください。

  4. 異なる方向に Button コントロールのサイズを変更し、サイズ変更ハンドルを別のコントロールに揃えます。 さまざまな方向にスナップ線が表示されて整列が示されることに注目してください。

コントロールのテキストにラベルを揃える

  1. TextBox ツールボックス から コントロールをフォームにドラッグします。 フォームに TextBox コントロールをドロップするときに、スマート タグのグリフをクリックし、 [Set text to textBox1](テキストを textBox1 に設定する) オプションを選択します。 詳細については、「チュートリアル: デザイン アクションを使って一般的なタスクを実行する」を参照してください。

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

  3. Label コントロールの AutoSize プロパティの値を trueに変更します。 コントロールの境界線が、表示テキストに合わせて調整されることに注意してください。

  4. Label コントロールを TextBox コントロールの左に移動し、TextBox コントロールの下端と揃うようにします。 2 つのコントロールの下端に沿って表示されるスナップ線に注意してください。

  5. Label のテキストと TextBox のテキストが揃うまで、Label コントロールを少し上に移動します。 異なるスタイルのスナップ線が表示され、両方のコントロールのテキスト フィールドが揃ったことが示されることに注意してください。

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

  1. Button ツールボックス から コントロールをフォームにドラッグします。 それをフォームの左上隅に配置します。

  2. Ctrl+↓ キーを押します。 コントロールが、フォームを下向きに、最初に使用可能な水平方向の整列位置まで移動することに注意してください。

  3. コントロールがフォームの下端に達するまで、Ctrl+↓ キーを押します。 フォームを下に移動するときにそれが占める位置に注意してください。

  4. Ctrl+→ キーを押します。 コントロールが、フォーム上を横に、最初に使用可能な垂直方向の整列位置まで移動することに注意してください。

  5. コントロールがフォームの側面に達するまで、Ctrl+→ キーを押します。 フォームを横に移動するときにそれが占める位置に注意してください。

  6. 方向キーの組み合わせを使用して、コントロールをフォーム上であちこち移動します。 コントロールが占める位置と、コントロールに付随するスナップ線に注意してください。

  7. Shift+方向キーを押して、Button コントロールのサイズを 1 ピクセルずつ変更します。

  8. Ctrl+Shift+方向キーを押して、スナップ線単位で Button コントロールのサイズを変更します。

スナップ線を選択的に無効にする

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

  2. Button ツールボックス のコントロール アイコンをダブルクリックします。 TableLayoutPanel コントロールの最初のセルに新しいボタン コントロールが表示されることに注意してください。

  3. ツールボックスの Button コントロール アイコンをさらに 2 回ダブルクリックします。 これにより、TableLayoutPanel コントロールに空のセルが 1 つ残ります。

  4. ツールボックスから TableLayoutPanel コントロールの空のセルに、Button コントロールをドラッグします。 スナップ線は表示されないことに注意してください。

  5. Button コントロールを TableLayoutPanel コントロールの外にドラッグし、TableLayoutPanel コントロールの周囲を移動させます。 スナップ線が再び表示されることに注意してください。

スナップ線を無効にする

Alt キーを押しながら、フォーム上でコントロールをあちこち移動します。

スナップ線は表示されず、コントロールは潜在的な整列位置にスナップされません。

デザイン環境でスナップ線を無効にするには

  1. [ツール] メニューから [オプション] ダイアログ ボックスを開きます。 [Windows フォーム デザイナー] を選択します。

  2. [全般] ノードを選択します。 [レイアウト モード] セクションで、選択を SnapLines から SnapToGrid に変更します。

  3. [OK] を選択して、設定を適用します。

  4. フォーム上のコントロールを選択し、他のコントロールの周囲に移動します。 スナップ線が表示されないことに注意してください。

次のステップ

スナップ線を使用すると、フォーム上のコントロールを直感的に配置できます。 さらに理解を深めるには、次の操作を行うことをお勧めします。

  • GroupBox コントロールを別の GroupBox コントロール内に入れ子にしてみてください。 Button コントロールを子の GroupBox コントロールの内部に配置し、親の GroupBox コントロール内にもう 1 つ配置します。 Button コントロールをあちこち移動して、スナップ線がコンテナーの境界とどのように交差するかを確認します。

  • TextBox コントロールの列と、Label コントロールの対応する列を作成します。 Label コントロールの AutoSize プロパティの値を true に設定します。 スナップ線を使用して Label コントロールを移動し、表示されているテキストが TextBox コントロール内のテキストと揃うようにします。

関連項目