次の方法で共有

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

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

スナップ線は、コントロールを他のコントロールと並べる場所を正確に示します。 また、 Windows ユーザー インターフェイスのガイドラインで指定されているように、コントロール間の余白の推奨距離も表示されます。

スナップ線を使用すると、鮮明でプロフェッショナルな外観と動作 (ルック アンド フィール) のために、コントロールを簡単に揃えることができます。

プロジェクトを作成する

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

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

スペースコントロールとアラインコントロール

スナップ線を使用すると、フォーム上のコントロールを正確かつ直感的に配置できます。 選択したコントロールまたはコントロールを、別のコントロールまたはコントロールのセットと一致する位置の近くに移動すると表示されます。 他のコントロールを越えて移動すると、選択した位置が推奨位置に "スナップ" されます。

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

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

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

  3. Button コントロールをフォームの境界線の周囲に移動し、スナップ線が表示される場所をメモします。 完了したら、 Button コントロールをフォームの中央付近に移動します。

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

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

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

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

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

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

フォームとコンテナーの余白に合わせる

スナップ線を使用すると、コントロールをフォームとコンテナーの余白に一貫した方法で揃えることができます。

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

    注

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

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

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

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

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

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

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

グループ化されたコントロールに合わせる

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

  1. フォーム上の 2 つのコントロールを選択します。 選択範囲を移動し、選択範囲と他のコントロールの間に表示されるスナップ線をメモします。

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

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

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

スナップ線を使用して、サイズを示しながらコントロールを配置する

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

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

  3. マウス ボタンをクリックしたままにします。

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

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

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

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

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

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

  3. マウス ポインターをフォームの周囲にドラッグします。 Button コントロールの整列位置を提案するように表示されるスナップ線に注意してください。 他のコントロールと一致する位置を検索します。

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

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

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

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

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

  4. Button コントロールのサイズを異なる方向に変更し、サイズ変更ハンドルをさまざまなコントロールに合わせます。 スナップ線がさまざまな向きで表示され、配置を示す点に注意してください。

コントロールのテキストにラベルを配置する

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

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

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

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

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

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

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

  2. Ctrl キー+下方向キーを押します。 コントロールはフォームを下方向に移動し、最初に使用可能な水平方向の配置位置に移動します。

  3. Ctrl キー+下方向キーを押して、コントロールがフォームの下部に到達します。 フォームの下に移動するときに占有する位置に注意してください。

  4. Ctrl キー+右方向キーを押します。 コントロールはフォーム内を移動して、最初に使用可能な垂直方向の配置位置に設定されます。

  5. Ctrl キー+右方向キーを同時に押し続けて、コントロールがフォームの端に到達するまで押してください。 フォーム間を移動するときに占有する位置に注意してください。

  6. 方向キーを組み合わせてフォームの周囲にコントロールを移動します。 コントロールが位置する場所と、そこに付随するスナップ線に注意してください。

  7. Shift+arrow キーを押して、Button コントロールのサイズを 1 ピクセル単位で変更します。

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

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

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

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

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

  4. Button コントロールをツールボックスからTableLayoutPanel コントロールの空のセルにドラッグします。 スナップ線は表示されません。

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

スナップ線を無効にする

Alt キーを押しながら、フォームの周囲でコントロールを移動します。

スナップ線は表示されず、コントロールは潜在的な配置位置に合わせて揃うことがありません。

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

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

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

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

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

次のステップ

スナップ線は、フォーム上でコントロールを整列する直感的な手段を提供します。 その他の探索に関する推奨事項は次のとおりです。

  • 別のGroupBox コントロール内でGroupBox コントロールを入れ子にしてみてください。 Button コントロールを子GroupBox コントロール内に配置し、もう 1 つを親GroupBox コントロール内に配置します。 Button コントロールを移動して、スナップ線がコンテナーの境界を越える方法を確認します。

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

こちらも参照ください