手順 5: フォームへのコントロールの追加

この手順では、PictureBox コントロールや CheckBox コントロールなどのコントロールをフォームに追加します。また、ボタンも追加します。

このトピックのビデオ版については " " を参照してください。

フォームにコントロールを追加するには

1. ツールボックスに移動し、[コモン コントロール] グループを展開します。フォームで使用する最も一般的なコントロールが表示されます。

2. PictureBox コントロールをダブルクリックします。PictureBox コントロールがフォームに追加されます。TableLayoutPanel がフォーム全体にドッキングされているため、PictureBox コントロールは最初の空のセルに追加されます。

3. 新しい PictureBox コントロールの黒い三角形をクリックします。次の図に示すように、タスク一覧が表示されます。

   PictureBox のタスク

   

   [!メモ]

   TableLayoutPanel に誤って違う種類のコントロールを追加した場合は、削除することができます。そのコントロールを右クリックし、メニューの [削除] をクリックします。また、[編集] メニューの [元に戻す] をクリックしてフォームからコントロールを削除することもできます。

4. [親コンテナーにドッキングする] リンクをクリックします。これにより、PictureBox の Dock プロパティが自動的に Fill に設定されます。これを確認するには、PictureBox コントロールをクリックして選択し、[プロパティ] ウィンドウに移動して、Dock プロパティが Fill に設定されていることを確認します。

5. PictureBox の ColumnSpan プロパティを変更して、PictureBox が両方のセルにまたがるようにします。PictureBox コントロールを選択し、ColumnSpan プロパティを 2 に設定します。さらに、PictureBox が空の場合は空のフレームが表示されるようにします。BorderStyle プロパティを Fixed3D に設定します。

6. フォームに CheckBox コントロールを追加します。ツールボックスの CheckBox 項目をダブルクリックすると、新しい CheckBox コントロールがテーブル内の次の空いているセルに追加されます。PictureBox で最初の 2 つのセルを使用しているため、CheckBox コントロールは左下のセルに追加されます。新しい CheckBox コントロールを選択し、次の図に示すように、Text プロパティを Stretch に設定します。

   プロパティが Stretch に設定された CheckBox コントロール

   

7. ツールボックスの [コンテナー] グループ (前の手順で TableLayoutPanel コントロールを取得したグループ) に移動し、FlowLayoutPanel 項目をダブルクリックして、新しいコントロールを PictureBox の最後のセルに追加します。次に、そのコントロールを親コンテナーにドッキングします (タスク一覧から [親コンテナーにドッキングする] を選択するか、Dock プロパティを Fill に設定します)。

   [!メモ]

   FlowLayoutPanel は、他のコントロールを直線状に順番に配置するコンテナーです。FlowLayoutPanel のサイズを変更する際、すべてのコントロールが 1 行に収まる場合は 1 行にレイアウトされます。1 行に収まらない場合は、上下に重なった複数の行に配置されます。ここでは、4 つのボタンを保持するために FlowLayoutPanel を使用します。

ボタンを追加するには

1. 追加した FlowLayoutPanel を選択します。ツールボックスの [コモン コントロール] に移動し、[Button] アイコンをダブルクリックします。button1 というボタンが FlowLayoutPanel に追加されます。この手順を繰り返して次のボタンを追加します。既に button1 というボタンがあることが IDE で認識され、次のボタンには button2 という名前が付けられます。

   [!メモ]

   Visual Basic の場合は、ボタンの名前の先頭文字が大文字になるため、button1 は Button1、button2 は Button2 のように名前が付けられます。

2. 通常は他のボタンもツールボックスを使用して追加しますが、ここでは、button2 をクリックし、[編集] メニューの [コピー] をクリックします (または Ctrl キーを押しながら C キーを押します)。[編集] メニューの [貼り付け] をクリックして (または Ctrl キーを押しながら V キーを押して)、コピーしたボタンを貼り付けます。続けてもう一度貼り付けます。これで、button3 と button4 が追加されます。

   [!メモ]

   コピーと貼り付けは、どのコントロールにも使用できます。IDE では、論理的な方法で新しいコントロールに名前を付けて配置します。コントロールをコンテナーに貼り付けると、IDE によって、配置できる次の論理的なスペースが選択されます。

3. 最初のボタンを選択し、Text プロパティを Show a picture に設定します。次に、残りの 3 つのボタンの Text プロパティを、Clear the picture、Set the background color、および Close に設定します。

4. 次に、ボタンのサイズを設定し、パネルの左端に揃えて配置します。FlowLayoutPanel を選択し、FlowDirection プロパティを変更して、RightToLeft に設定します。これにより、ボタンがセルの右端に揃い、順序が逆になって [Show a picture] ボタンが右端になります。

   [!メモ]

   ボタンの順序がまだ正しくない場合は、ボタンを FlowLayoutPanel 内でドラッグして、任意の順序で並べ替えることができます。いずれかのボタンをクリックし、左右にドラッグします。

5. [Close] ボタンをクリックして選択します。Ctrl キーを押しながら他の 3 つのボタンをクリックして、すべてのボタンを選択します。すべてのボタンが選択された状態で、[プロパティ] ウィンドウに移動し、AutoSize プロパティが表示されるまで上にスクロールします。このプロパティを使用すると、テキスト全体が収まるようにボタンのサイズが自動的に変更されます。このプロパティを true に設定します。これで、ボタンのサイズと順序が適切に設定されました (4 つすべてのボタンを選択していれば、4 つすべての AutoSize プロパティを同時に変更することができます)。4 つのボタンは次の図のようになります。

   4 つのボタンがあるピクチャ ビューアー

   

6. ここで、プログラムをもう一度実行して、フォームの新しいレイアウトを確認します。ボタンおよびチェック ボックスをクリックしてもまだ何も実行されません。この後の手順で機能を設定していきます。

続行または確認するには

• チュートリアルの次の手順に進むには、「手順 6: ボタン コントロールの名前の設定」を参照してください。

• チュートリアルの前の手順に戻るには、「手順 4: TableLayoutPanel コントロールを使用したフォームのレイアウトの設定」を参照してください。