チュートリアル : スナップ線を使用した Windows フォーム上のコントロールの配置
フォーム上にコントロールを正確に配置することは、多くのアプリケーションで重要度の高い処理です。 Windows フォーム デザイナーには、そのためのさまざまなレイアウト ツールが用意されています。 その中で最も重要なツールの 1 つが SnapLine 機能です。
スナップ線は、コントロールを他のコントロールと整列させる位置を正確に示します。 また、Windows ユーザー インターフェイスのガイドラインで指定されている、コントロール間のマージンの推奨距離も示します。 詳細については、「User Interface Design and Development (ユーザー インターフェイスのデザインと開発)」を参照してください。
スナップ線を使用すると、簡単にコントロールを整列させることができ、鮮明でプロフェッショナルな外観と動作を実現できます。
このチュートリアルでは、以下のタスクを行います。
Windows フォーム プロジェクトの作成
スナップ線を使用したコントロールのスペーシングと配置
フォームまたはコンテナーのマージンを使用した整列
グループ化されたコントロールとの整列
スナップ線を使用した、サイズのアウトラインによるコントロールの配置
ツールボックスからコントロールをドラッグするときのスナップ線の使用
スナップ線を使用したコントロールのサイズ変更
コントロールのテキストとラベルの整列
キーボードによる移動時のスナップ線の使用
スナップ線とレイアウト パネル
スナップ線の無効化
ここでは、スナップ線機能がレイアウトに果たす役割について理解します。
注意
実際に画面に表示されるダイアログ ボックスとメニュー コマンドは、アクティブな設定またはエディションによっては、ヘルプの説明と異なる場合があります。 設定を変更するには、[ツール] メニューの [設定のインポートとエクスポート] をクリックします。 詳細については、「設定の操作」を参照してください。
プロジェクトの作成
最初にプロジェクトを作成し、フォームを設定します。
プロジェクトを作成するには
"SnaplineExample" という名前の Windows ベース アプリケーション プロジェクトを作成します。 詳細については、「方法: 新しい Windows フォーム アプリケーション プロジェクトを作成する」を参照してください。
フォーム デザイナーでフォームを選択します。
スナップ線を使用したコントロールのスペーシングと配置
スナップ線を使用すると、正確かつ直観的にコントロールをフォームに配置できます。 スナップ線は、選択した単数または複数のコントロールを、他のコントロールやコントロール セットと整列する位置の近くに移動すると表示されます。 選択したコントロールが他のコントロールを通過するとき、推奨位置に "スナップ" します。
スナップ線を使用してコントロールを配置するには
ツールボックスから Button コントロールをフォームにドラッグします。
Button コントロールをフォームの右下隅に移動します。 Button コントロールがフォームの下側と右側の境界線に近づくと、スナップ線が表示されます。 これらのスナップ線は、コントロールの境界線からフォームの境界線までの推奨距離を表します。
Button コントロールをフォームの境界線付近であちこちに移動し、スナップ線がどこで表示されるかを確認します。 この操作を終えたら、Button コントロールをフォームの中心付近に移動します。
ツールボックスから別の Button コントロールをフォームにドラッグします。
この 2 つ目の Button コントロールが、最初のコントロールとほぼ水平の位置関係になるように移動します。 両方のボタンのテキスト ベースラインにスナップ線が表示され、移動中のコントロールが、最初のコントロールの真横にスナップします。
2 つ目の Button コントロールを最初のコントロールのすぐ上に移動します。 両方のボタンの左端と右端に沿ってスナップ線が表示され、移動中のコントロールが、最初のコントロールの真上にスナップします。
Button コントロールのどちらかを選択し、もう 1 つのコントロールにほぼ接触するまで近づけます。 両方のコントロールの間にスナップ線が表示されます。 この距離が、これらのコントロールの境界間の推奨距離になります。 また、移動中のコントロールがこの位置にスナップすることも確認してください。
ツールボックスから 2 つの Panel コントロールをフォームにドラッグします。
1 つの Panel コントロールを、もう 1 つのコントロールとほぼ水平の位置関係になるように移動します。 両方のコントロールの上端と下端に沿ってスナップ線が表示され、移動中のコントロールが、もう 1 つのコントロールの真横にスナップします。
フォームまたはコンテナーのマージンを使用した整列
スナップ線を使用すると、一貫した方法でフォームやコンテナーのマージンを使用してコントロールを整列させることができます。
フォームやコンテナーのマージンを使用してコントロールを整列させるには
- Button コントロールを 1 つ選択し、スナップ線が表示されるまで、フォームの右側の境界線に近づけます。 右側の境界線とスナップ線の距離は、コントロールの Margin プロパティ値とフォームの Padding プロパティ値の合計です。
注意
フォームの Padding プロパティを 0,0,0,0 に設定すると、Windows フォーム デザイナーでは、フォームの Padding 値が暗黙的に 9,9,9,9 として解釈されます。 この動作をオーバーライドするには、0,0,0,0 以外の値を割り当てます。
Button コントロールの Margin プロパティの値を変更します。これを行うには、[プロパティ] ウィンドウで Margin エントリを展開し、All プロパティを 0 に設定します。 詳細については、「チュートリアル : Padding、Margin、および AutoSize プロパティを使用した Windows フォーム コントロールのレイアウト」を参照してください。
スナップ線が表示されるまで、Button コントロールをフォームの右側の境界線に近づけます。 この距離は、フォームの Padding プロパティの値によって決まります。
ツールボックスから GroupBox コントロールをフォームにドラッグします。
GroupBox コントロールの Padding プロパティの値を変更します。これを行うには、[プロパティ] ウィンドウで Padding エントリを展開し、All プロパティを 10 に設定します。
スナップ線が表示されるまで、Button コントロールを GroupBox コントロールの右側の境界線に近づけます。 GroupBox コントロール内で Button を移動し、スナップ線がどこで表示されるかを確認します。
グループ化されたコントロールとの整列
スナップ線を使用すると、GroupBox コントロール内の コントロールだけでなく、グループ化されたコントロールも整列させることができます。
グループ化されたコントロールと整列させるには
フォーム上のコントロールを 2 つ選択します。 選択したコントロールをあちこちに移動し、選択したコントロールと他のコントロールの間に表示されるスナップ線を確認します。
ツールボックスから GroupBox コントロールをフォームにドラッグします。
Button コントロールの 1 つを選択し、GroupBox コントロールの周囲であちこちに移動します。 GroupBox コントロールの各端にスナップ線が表示されます。 また、GroupBox コントロールに含まれている Button コントロールの各端にもスナップ線が表示されます。 コンテナー コントロール内の子コントロールもスナップ線をサポートします。
スナップ線を使用した、サイズのアウトラインによるコントロールの配置
スナップ線を使用すると、コントロールを初めてフォームに配置する際に簡単に整列させることができます。
スナップ線を使用し、サイズのアウトラインを描いてコントロールを配置するには
ツールボックスの Button コントロール アイコンをクリックします。 フォームにドラッグしないでください。
マウス ポインターをフォームのデザイン サーフェイスに置きます。 ポインターが Button コントロール アイコンが付いた十字カーソルに変わります。 また、Button コントロールの推奨整列位置を示すスナップ線も表示されます。
マウス ボタンを押したままにします。
マウス ポインターをフォーム上でドラッグします。 コントロールの位置とサイズを示すアウトラインが描画されます。
フォーム上の別のコントロールに整列する位置までポインターをドラッグします。 スナップ線が表示され、整列を示します。
マウスのボタンを離します。 アウトラインで示された位置とサイズでコントロールが作成されます。
ツールボックスからコントロールをドラッグするときのスナップ線の使用
スナップ線を使用すると、ツールボックスからフォームにドラッグしたコントロールを簡単に整列させることができます。
ツールボックスからコントロールをドラッグするときにスナップ線を使用するには
ツールボックスから Button コントロールをフォームにドラッグし、マウス ボタンを押したままにします。
マウス ポインターをフォームのデザイン サーフェイスに置きます。 ポインターの形が変わり、新しい Button コントロールが作成される位置を示します。
マウス ポインターをフォーム上でドラッグします。 Button コントロールの推奨整列位置を示すスナップ線が表示されます。 他のコントロールと整列する位置を見つけます。
マウスのボタンを離します。 スナップ線で示された位置にコントロールが作成されます。
スナップ線を使用したコントロールのサイズ変更
スナップ線を使用すると、コントロールのサイズを変更したときに簡単に整列させることができます。
スナップ線を使用してコントロールのサイズを変更するには
ツールボックスから Button コントロールをフォームにドラッグします。
Button コントロールの隅にあるサイズ変更ハンドルのいずれかをドラッグして、コントロールのサイズを変更します。 詳細については、「方法 : Windows フォーム上のコントロールのサイズを変更する」を参照してください。
Button コントロールの境界線のいずれかが他のコントロールと整列するまでサイズ変更ハンドルをドラッグします。 スナップ線が表示されるのを確認します。 また、サイズ変更ハンドルがスナップ線で示された位置にスナップすることも確認します。
さまざまな方向に Button コントロールのサイズを変更し、サイズ変更ハンドルを別のコントロールに整列させます。 スナップ線がさまざまな方向に表示されて、整列を示すことを確認してください。
コントロールのテキストとラベルの整列
一部のコントロールでは、スナップ線を利用して、他のコントロールを表示テキストに合わせて整列させることができます。
ラベルとコントロールのテキストを整列させるには
ツールボックスから TextBox コントロールをフォームにドラッグします。 TextBox コントロールをフォームにドロップしたら、スマート タグ グリフをクリックし、[textBox1 にテキストを設定] をクリックします。 詳細については、「チュートリアル : Windows フォーム コントロールのスマート タグを使用した共通タスクの実行」を参照してください。
ツールボックスから Label コントロールをフォームにドラッグします。
Label コントロールの AutoSize プロパティの値を true に変更します。 コントロールの境界線が表示テキストに合わせて調整されます。
Label コントロールを TextBox コントロールの左に移動し、TextBox コントロールの下端に合わせて配置します。 2 つのコントロールの下端に沿ってスナップ線が表示されます。
Label のテキストと TextBox のテキストが整列するまで、Label コントロールをわずかに上に移動します。 両方のコントロールのテキスト フィールドが整列すると、スタイルの異なるスナップ線が表示されます。
キーボードによる移動時のスナップ線の使用
スナップ線を使用すると、キーボードの方向キーを使用してコントロールを配置するときに、コントロールを簡単に整列させることができます。
キーボードによる移動時にスナップ線を使用するには
ツールボックスから Button コントロールをフォームにドラッグします。 このコントロールをフォームの左上隅に配置します。
Ctrl キーを押しながら↓キーを押します。 コントロールがフォーム内で下に移動し、使用できる最初の整列位置に置かれます。
コントロールがフォームの下端に到達するまで、Ctrl キーを押しながら↓キーを押し続けます。 コントロールがフォーム内を下に移動するときに占有する位置を確認します。
Ctrl キーを押しながら→キーを押します。 コントロールがフォーム上で右に移動し、使用できる最初の整列位置に置かれます。
コントロールがフォームの右端に到達するまで、Ctrl キーを押しながら→キーを押し続けます。 コントロールがフォーム内を右に移動するときに占有する位置を確認します。
方向キーを組み合わせて使用してコントロールをフォーム上で移動します。 コントロールが占有する位置と表示されるスナップ線を確認します。
Shift キーを押しながら任意の方向キーを押して、Button コントロールのサイズを 1 ピクセルずつ変更します。
Ctrl キーと Shift キーを押しながら任意の方向キーを押して、Button コントロールのサイズをスナップ線のインクリメントで変更します。
スナップ線とレイアウト パネル
スナップ線はレイアウト パネル内で無効にできます。
スナップ線を選択的に無効にするには
ツールボックスから TableLayoutPanel コントロールをフォームにドラッグします。
ツールボックスの Button コントロール アイコンをダブルクリックします。 TableLayoutPanel コントロールの最初のセルに新しいボタン コントロールが表示されます。
ツールボックスの Button コントロール アイコンをさらに 2 回ダブルクリックします。 これで、TableLayoutPanel コントロール内の空のセルは 1 つになります。
ツールボックスから Button コントロールを TableLayoutPanel コントロールの空のセルにドラッグします。 スナップ線が表示されないことを確認します。
TableLayoutPanel コントロールの外に Button コントロールをドラッグし、TableLayoutPanel コントロールの周囲を移動します。 スナップ線が再び表示されるのを確認します。
スナップ線の無効化
スナップ線は既定で有効です。 スナップ線は選択的に無効にすることも、デザイン環境で無効にすることもできます。
スナップ線を選択的に無効にするには
Alt キーを押しながらコントロールをフォーム上で移動します。
スナップ線が表示されず、コントロールが整列位置にスナップしないことを確認します。
スナップ線をデザイン環境で無効にするには
[ツール] メニューから [オプション] ダイアログ ボックスを開きます。 [Windows フォーム デザイナー] ダイアログ ボックスを開きます。 詳細については、「[全般] ([オプション] ダイアログ ボックス - [Windows フォーム デザイナー])」を参照してください。
[全般] ノードを選択します。 [Layout Mode] セクションの選択項目を [SnapLines] から [SnapToGrid] に変更します。
[OK] をクリックして設定を適用します。
フォームでコントロールを選択し、他のコントロールの周囲で移動します。 スナップ線が表示されないことを確認します。
次の手順
スナップ線を使用すると、フォーム上でコントロールを直観的に整列させることができます。 次に行う作業の例を示します。
GroupBox コントロールに別の GroupBox コントロールを入れ子にしてみます。 Button コントロールを子 GroupBox コントロールの中に配置し、別の Button コントロールを親 GroupBox コントロールの中に配置します。 Button コントロールをあちこちに移動して、スナップ線がコンテナーの境界線とどのように交差するかを確認します。
TextBox コントロールの列と、これに対応する Label コントロールの列を作成します。 Label コントロールの AutoSize プロパティの値を true に設定します。 Label コントロールの表示テキストと TextBox コントロールのテキストが整列するように、スナップ線を使用して Label コントロールを移動します。
Windows ユーザー インターフェイスのデザインについては、書籍『Microsoft Windows User Experience, Official Guidelines for User Interface Developers and Designers』(Redmond, WA: Microsoft Press, 1999. (USBN: 0-7356-0566-1)) を参照してください。
参照
処理手順
チュートリアル : FlowLayoutPanel を使用した Windows フォーム上のコントロールの配置
チュートリアル : TableLayoutPanel を使用した Windows フォーム上のコントロールの配置
チュートリアル : Padding、Margin、および AutoSize プロパティを使用した Windows フォーム コントロールのレイアウト