手順 5: フォームへのコントロールの追加Step 5: Add Controls to Your Form

この手順では、PictureBox コントロールや CheckBox コントロールなどのコントロールをフォームに追加します。In this step, you add controls, such as a PictureBox control and a CheckBox control, to your form. また、ボタンも追加します。You then add buttons to your form.

ビデオへのリンクこのトピックのビデオ版については、「チュートリアル 1: Visual Basic によるピクチャ ビューアーの作成 - ビデオ 2」または「チュートリアル 1: C# によるピクチャ ビューアーの作成 - ビデオ 2」を参照してください。link to videoFor a video version of this topic, see Tutorial 1: Create a Picture Viewer in Visual Basic - Video 2 or Tutorial 1: Create a Picture Viewer in C# - Video 2. これらのビデオでは、旧バージョンの Visual Studio を使用しているため、一部のメニュー コマンドやその他のユーザー インターフェイス要素が若干異なります。These videos use an earlier version of Visual Studio, so there are slight differences in some menu commands and other user interface elements. ただし、概念および手順は、現在のバージョンの Visual Studio でも同様です。However, the concepts and procedures work similarly in the current version of Visual Studio.

フォームにコントロールを追加するにはTo add controls to your form

  1. [ツールボックス] タブ (Visual Studio IDE の左側にある) に移動し、[コモン コントロール] グループを展開します。Go to the Toolbox tab (located on the left side of the Visual Studio IDE) and expand the Common Controls group. フォームで使用する最も一般的なコントロールが表示されます。This shows the most common controls that you see on forms.

  2. フォームの TableLayoutPanel コントロールを選択します。Choose the TableLayoutPanel control on the form. TableLayoutPanel が選択されていることを確認するには、その名前が [プロパティ] ウィンドウの上部にあるボックスに表示されることを確認します。To verify that the TableLayoutPanel is selected, make sure that its name appears in the dropdown list box at the top of the Properties window. また、[プロパティ] ウィンドウの上部にあるボックスを使用してフォーム コントロールを選択できます。You can also choose form controls by using the dropdown list box at the top of the Properties window. 多くの場合、この方法の方がマウスで小さいコントロールを選択するよりも簡単です。Choosing a control this way can often be easier than choosing a tiny control with a mouse.

  3. PictureBox 項目をダブルクリックして、フォームに PictureBox コントロールを追加します。Double-click the PictureBox item to add a PictureBox control to your form. TableLayoutPanel がフォーム全体にドッキングされているため、PictureBox コントロールは最初の空のセルに追加されます (左上隅)。Because the TableLayoutPanel is docked to fill your form, the IDE adds the PictureBox control to the first empty cell (the upper left corner).

  4. 新しい PictureBox コントロールを選択し、新しい PictureBox コントロール上の黒い三角形を選択して、次の図に示すように、タスク一覧を表示します。Choose the new PictureBox control to select it, and then choose the black triangle on the new PictureBox control to display its task list, as shown in the following picture.

    PictureBox タスクPictureBox tasks
    PictureBox タスクPictureBox tasks

    注意

    TableLayoutPanel に誤って違う種類のコントロールを追加した場合は、削除することができます。If you accidentally add the wrong type of control to your TableLayoutPanel, you can delete it. コントロールを右クリックし、コンテキスト メニューの [削除] をクリックします。Right-click the control, and then choose Delete on its context menu. また、メニュー バーを使用してフォームのコントロールを削除できます。You can also remove controls from the form by using the menu bar. メニュー バーで、[編集][元に戻す]、または [編集][削除] の順にクリックします。On the menu bar, choose Edit, Undo, or Edit, Delete.

  5. [親コンテナーにドッキングする] リンクをクリックします。Choose the Dock in parent container link. これにより、PictureBox の Dock プロパティが自動的に Fill に設定されます。This automatically sets the PictureBox Dock property to Fill. これを確認するには、PictureBox コントロールをクリックし、[プロパティ] ウィンドウに移動して、Dock プロパティが Fill に設定されていることを確認します。To see this, choose the PictureBox control to select it, go to the Properties window, and be sure that the Dock property is set to Fill.

  6. PictureBox の ColumnSpan プロパティを変更して、PictureBox が両方のセルにまたがるようにします。Make the PictureBox span both columns by changing its ColumnSpan property. PictureBox コントロールを選択し、ColumnSpan プロパティを 2 に設定します。Choose the PictureBox control and set its ColumnSpan property to 2. さらに、PictureBox が空の場合は空のフレームが表示されるようにします。Also, when the PictureBox is empty, you want to show an empty frame. BorderStyle プロパティを Fixed3D に設定します。Set its BorderStyle property to Fixed3D.

    注意

    PictureBox に ColumnSpan プロパティが表示されない場合は、PictureBox が TableLayoutPanel ではなくフォームに追加された可能性があります。If you don't see a ColumnSpan property for your PictureBox, then it's likely that the PictureBox was added to the form rather than the TableLayoutPanel. これを修正するには、PictureBox を選択して、削除し、TableLayoutPanel を選択して、新しい PictureBox を追加します。To fix this, choose the PictureBox, delete it, choose the TableLayoutPanel, and then add a new PictureBox.

  7. フォームで TableLayoutPanel を選択し、フォームに CheckBox コントロールを追加します。Choose the TableLayoutPanel on the form and then add a CheckBox control to the form. ツールボックスの CheckBox 項目をダブルクリックすると、新しい CheckBox コントロールがテーブル内の次の空いているセルに追加されます。Double-click the CheckBox item in the Toolbox to add a new CheckBox control to the next free cell in your table. PictureBox が TableLayoutPanel の最初の 2 つのセルを使用しているため、CheckBox コントロールは左下のセルに追加されます。Because a PictureBox takes up the first two cells in the TableLayoutPanel, the CheckBox control is added to the lower-left cell. Text プロパティを選択し、次の図に示すように、「Stretch」と入力します。Choose the Text property and type in the word Stretch, as shown in the following picture.

    Stretch プロパティのある TextBox コントロールTextBox control with Stretch property
    Stretch プロパティのある TextBox コントロールTextBox control with Stretch property

  8. フォームの TableLayoutPanel を選択し、ツールボックスの [コンテナー] グループ (TableLayoutPanel コントロールを取得したグループ) に移動し、FlowLayoutPanel 項目をダブルクリックして、新しいコントロールを PictureBox の最後のセル (右下) に追加します。Choose the TableLayoutPanel on the form, and then go to the Containers group in the Toolbox (where you got your TableLayoutPanel control) and double-click the FlowLayoutPanel item to add a new control to the last cell in the PictureBox (bottom right). その後、TableLayoutPanel の FlowLayoutPanel をドッキングします (FlowLayoutPanel の黒い三角形のタスク一覧の [親コンテナーにドッキングする] をクリックするか、または FlowLayoutPanel の Dock プロパティを Fill に設定します)。Then dock the FlowLayoutPanel in the TableLayoutPanel (either by choosing Dock in parent container on the FlowLayoutPanel's black triangle task list, or by setting the FlowLayoutPanel's Dock property to Fill).

    注意

    FlowLayoutPanel は、他のコントロールを直線状に順番に配置するコンテナーです。A FlowLayoutPanel is a container that arranges other controls in neat rows in order. FlowLayoutPanel のサイズを変更する際、すべてのコントロールが 1 行に収まる場合は 1 行にレイアウトされます。When you resize a FlowLayoutPanel, if it has room to lay out all of its controls in a single row, it does that. 1 行に収まらない場合は、上下に重なった複数の行に配置されます。Otherwise, it arranges them in lines, one on top of the other. ここでは、4 つのボタンを保持するために FlowLayoutPanel を使用します。You will use a FlowLayoutPanel to hold four buttons. 追加するときにボタンを整列する場合は、ボタンを追加する前に FlowLayoutPanel が選択されていること確認します。If the buttons arrange one on top another when added, be sure that the FlowLayoutPanel is selected before adding the buttons. 前に説明したように、各セルで保持できるコントロールは 1 つだけですが、TableLayoutPanel の右下のセルにはボタン コントロールが 4 つ含まれています。Although it was stated earlier that each cell can hold only one control, the lower-right cell of the TableLayoutPanel has four button controls. これが可能なのは、他のコントロールを保持するコントロールをセルに配置できるからです。This is because you can put a control in a cell that holds other controls. このようなコントロールをコンテナーと呼び、FlowLayoutPanel は 1 つのコンテナーです。That kind of control is called a container, and the FlowLayoutPanel is a container.

ボタンを追加するにはTo add buttons

  1. 追加した新しい FlowLayoutPanel を選択します。Choose the new FlowLayoutPanel that you added. ツールボックスの [コモン コントロール] に移動し、Button 項目をダブルクリックします。button1 というボタン コントロールが FlowLayoutPanel に追加されます。Go to Common Controls in the Toolbox and double-click the Button item to add a button control called button1 to your FlowLayoutPanel. この手順を繰り返して次のボタンを追加します。Repeat to add another button. 既に button1 というボタンがあることが IDE で認識され、次のボタンには button2 という名前が付けられます。The IDE determines that there's already a button called button1 and calls the next one button2.

  2. 通常は他のボタンもツールボックスを使用して追加しますが、Typically, you add the other buttons using the Toolbox. ここでは、button2 をクリックし、メニュー バーで、[編集][コピー] の順にクリックします (または Ctrl キーを押しながら C キーを押します)。This time, choose button2, and then on the menu bar, choose Edit, Copy (or press Ctrl+C). メニュー バーで、[編集][貼り付け] の順にクリックして (または Ctrl キーを押しながら V キーを押して)、コピーしたボタンを貼り付けます。On the menu bar, choose Edit, Paste (or press Ctrl+V) to paste a copy of your button. 続けてもう一度貼り付けます。Now paste it again. これで、IDE により button3button4 が FlowLayoutPanel に追加されます。The IDE has now added button3 and button4 to the FlowLayoutPanel.

    注意

    コピーと貼り付けは、どのコントロールにも使用できます。You can copy and paste any control. IDE では、論理的な方法で新しいコントロールに名前を付けて配置します。The IDE names and places the new controls in a logical manner. コントロールをコンテナーに貼り付けると、IDE によって、配置できる次の論理的なスペースが選択されます。If you paste a control into a container, the IDE chooses the next logical space for placement.

  3. 最初のボタンを選択し、Text プロパティを Show a picture に設定します。Choose the first button and set its Text property to Show a picture. 次に、残りの 3 つのボタンの Text プロパティを、Clear the pictureSet the background color、および Close に設定します。Then set the Text properties of the next three buttons to Clear the picture, Set the background color, and Close.

  4. 次に、ボタンのサイズを設定し、パネルの右端に揃えてアラインします。The next step is to size the buttons and arrange them so they align to the right side of the panel. FlowLayoutPanel を選択し、FlowDirection プロパティを参照します。Choose the FlowLayoutPanel and look at its FlowDirection property. 変更して、RightToLeft に設定します。Change it so it's set to RightToLeft. これにより、ボタンがセルの右端に揃い、順序が逆になって [Show a picture] ボタンが右端になります。As soon as you do, the buttons should align themselves to the right side of the cell, and reverse their order so that the Show a picture button is on the right.

    注意

    ボタンの順序がまだ正しくない場合は、ボタンを FlowLayoutPanel 内でドラッグして、任意の順序で並べ替えることができます。If the buttons are still in the wrong order, you can drag the buttons around the FlowLayoutPanel to rearrange them in any order. ボタンをクリックし、左または右にドラッグできます。You can choose a button and drag it left or right.

  5. [閉じる] ボタンをクリックして選択します。Choose the Close button to select it. Ctrl キーを押しながら他の 3 つのボタンをクリックして、すべてのボタンを選択します。Hold down the CTRL key and choose the other three buttons, so that they are all selected. すべてのボタンが選択された状態で、[プロパティ] ウィンドウに移動し、AutoSize プロパティが表示されるまで上にスクロールします。While all the buttons are selected, go to the Properties window and scroll up to the AutoSize property. このプロパティを使用すると、テキスト全体が収まるようにボタンのサイズが自動的に変更されます。This property tells the button to automatically resize itself to fit all of its text. このプロパティを true に設定します。Set it to true. これで、ボタンのサイズと順序が適切に設定されました Your buttons should now be sized properly and be in the right order. (4 つすべてのボタンを選択していれば、4 つすべての AutoSize プロパティを同時に変更することができます)。4 つのボタンは次の図のようになります。(As long as all four buttons are selected, you can change all four AutoSize properties at the same time.) The following picture shows the four buttons.

    4 つのボタンがある Picture ViewerPicture Viewer with four buttons
    4 つのボタンがある Picture ViewerPicture Viewer with four buttons

  6. ここで、プログラムをもう一度実行して、フォームの新しいレイアウトを確認します。Now run your program again to see your newly laid out form. ボタンおよびチェック ボックスをクリックしてもまだ何も実行されません。この後の手順で機能を設定していきます。Choosing the buttons and the check box doesn't do anything yet, but it will work soon.

続行または確認するにはTo continue or review