この章では、電卓の画面を作成する具体的な手順を説明します。ここでは、ボタンやテキストボックスといった部品を画面上に配置していきます

コントロールについて

コントロールとは、アプリケーションのユーザーインターフェース（UI）を構成する部品のことです。具体的には、ボタン、テキストボックス、ラベル、チェックボックスなど、画面上に配置してユーザーの操作を可能にする要素を指します。これらのコントロールを組み合わせて、アプリケーションの画面をデザインします

コントロールの種類の中で代表的なものを列挙します

• ボタン: クリックすることで、特定の処理を実行させます
• テキストボックス: ユーザーからの文字入力を受け付けたり、文字を表示したりします
• ラベル: 変更できない静的なテキストを表示します
• チェックボックス: オン／オフの状態を切り替える際に使用します
• コンボボックス: ドロップダウンリストから項目を選択できます

コントロールの配置

今回作成する電卓アプリでは、テキストボックスとボタンを配置します

• テキストボックス：計算結果を表示する場所として使います
• ボタン：数字（0-9）や演算子（+, -, *, /）、イコール（=）、クリア（C）といった機能に対応するボタンを配置します

Visual Studioでは、フォームデザイナーというツールを使ってこれらのコントロールを配置します。フォームデザイナーは、マウス操作でコントロールを自由に配置できる視覚的なエディタです。これにより、コーディングなしで簡単に画面デザインを行えます

以下の手順で、コントロールを配置していきます

1. リソースビューからダイアログを選択します

(1) ソリューションエクスプローラーのリソースファイルから、MyCalculator.rcをクリックします

(2) リソースビューから、Dialog「IDD_MYCALCULATOR_DIALOG」をダブルクリックします

(3) ダイアログ画面が表示します

上図のようにデザイン編集画面が表示されます。ツールボックスからテキストボックス、ボタンのコントロールを配置していきます

2. 計算結果を表示するための場所としてテキストボックスを配置します

(1) ツールボックスから「Edit Control」を選択します

(2) ダイアログ上の任意の場所をクリックして配置します

(3) ドラッグしながら表示場所へ移動し、ドラッグして大きさも変更します

(4) 配置したEdit Controlのプロパティを表示し、IDを確認します
デフォルトは「IDC_EDIT1」となっています
プログラムからこのコントロールにアクセスするための識別子となりますので、わかりやすいIDにします
今回は、変更せずにこのままの値を使用します

次にボタンを配置します
ツールボックスから、「Button」を選択し、ダイアログ画面に配置します
IDの値は、わかりやすい識別子とします
キャプションは「Button1」となっていますので、変更します
このボタンはクリアボタンとするため、キャプションは「AC」と変更します

見た目が電卓らしくなるように、他のボタンもグリッド上に配置していきましょう
配置できた画面は次の通りです

「OK」、「キャンセルボタン」は不要のため削除しています

ボタンの配置が完了したら、表示させてみましょう
(1) メニューの「ファイル」→「MyCalculator.rcの保存」を押して、変更を保存します
(2) メニューの「デバッグ」→「デバッグなしで開始」を押して実行します
(3) ビルドが開始し完了後、作成したダイアログが表示されます

この章の説明を参考に、電卓の画面を作成してみましょう

次回の3日目では、ボタンクリックで処理を呼び出す仕組みについて説明をします