次の方法で共有

チュートリアル: 計算クイズの WinForms アプリを作成する

  • [アーティクル]

この 4 つのチュートリアル シリーズでは、計算クイズを作成します。 クイズには、クイズの回答者が指定した時間内に回答する 4 つのランダムな計算問題が含まれています。

Visual Studio の統合開発環境 (IDE) には、アプリを作成するために必要なツールが含まれています。 IDE の詳細については、「Visual Studio IDE へようこそ」を参照してください。

このチュートリアルでは、次の方法について説明します。

  • Windows フォームを使用する Visual Studio プロジェクトを作成する。
  • ラベル、ボタン、その他のコントロールをフォームに追加する。
  • コントロールのプロパティを設定する。
  • プロジェクトを保存し、実行する。

前提条件

このチュートリアルを完了するには Visual Studio が必要です。 無料バージョンについては、Visual Studio ダウンロード ページを参照してください。

Windows フォーム プロジェクトを作成する

計算クイズを作成する場合、最初の手順は、Windows フォーム アプリ プロジェクトを作成することです。

  1. Visual Studio を開きます。

  2. [スタート ウィンドウ] で、 [新しいプロジェクトの作成] を選択します。

    Screenshot that shows the Create a new project option in the Visual Studio start window.

  3. [新しいプロジェクトの作成] ウィンドウで Windows フォーム を検索します。 次に、 [プロジェクトの種類] 一覧から [デスクトップ] を選択します。

  4. C# または Visual Basic に対して [Windows フォーム アプリ (.NET Framework)] テンプレートを選択し、 [次へ] を選択します。

    Screenshot that shows the Create a new project dialog box. The search box, the Project type list, and two templates are called out.

    Note

    [Windows フォーム アプリ (.NET Framework)] テンプレートが表示されない場合は、[新しいプロジェクトの作成] ウィンドウからインストールできます。 [お探しの情報が見つかりませんでしたか?] メッセージで、 [さらにツールと機能をインストールする] を選択します。

    Screenshot that shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    次に、Visual Studio インストーラーで、 [.NET デスクトップ開発] を選択します。

    Screenshot that shows the dot NET desktop development workload in Visual Studio Installer.

    Visual Studio インストーラーで、 [変更] を選択します。 作業内容を保存するよう求められることがあります。 次に、 [続行] を選択してワークロードをインストールします。

  5. [新しいプロジェクトの構成] ウィンドウで、プロジェクトに MathQuiz という名前を付けて、 [作成] を選択します。

  1. Visual Studio を開きます。

  2. [スタート ウィンドウ] で、 [新しいプロジェクトの作成] を選択します。

    Screenshot that shows the Create a new project option in the Visual Studio start window.

  3. [新しいプロジェクトの作成] ウィンドウで Windows フォーム を検索します。 次に、 [プロジェクトの種類] 一覧から [デスクトップ] を選択します。

  4. C# または Visual Basic に対して [Windows フォーム アプリ (.NET Framework)] テンプレートを選択し、 [次へ] を選択します。

    Screenshot that shows the Create a new project dialog box. The search box, the Project type list, and two templates are called out.

    Note

    [Windows フォーム アプリ (.NET Framework)] テンプレートが表示されない場合は、[新しいプロジェクトの作成] ウィンドウからインストールできます。 [お探しの情報が見つかりませんでしたか?] メッセージで、 [さらにツールと機能をインストールする] を選択します。

    Screenshot that shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    次に、Visual Studio インストーラーで、 [.NET デスクトップ開発] を選択します。

    Screenshot that shows the dot NET desktop development workload in Visual Studio Installer.

    Visual Studio インストーラーで、 [変更] を選択します。 作業内容を保存するよう求められることがあります。 次に、 [続行] を選択してワークロードをインストールします。

  5. [新しいプロジェクトの構成] ウィンドウで、プロジェクトに MathQuiz という名前を付けて、 [作成] を選択します。

Visual Studio により、アプリのソリューションが作成されます。 ソリューションは、アプリに必要なすべてのプロジェクトとファイルのコンテナーです。

フォームのプロパティを設定する

テンプレートを選択し、ファイルに名前を付けると、Visual Studio によってフォームが自動的に開かれます。 このセクションでは、一部のフォーム プロパティを変更する方法について説明します。

  1. プロジェクトで、 [Windows フォーム デザイナー] を選択します。 デザイナーのタブには、C# の場合は [Form1.cs [Design]] 、Visual Basic の場合は [Form1.vb [Design]] の名前が付けられます。

  2. フォーム [Form1] を選択します。

  3. [プロパティ] ウィンドウに、フォームのプロパティが表示されるようになりました。 通常、このウィンドウは Visual Studio の右下隅にあります。 [プロパティ] が表示されない場合は、 [表示]>[プロパティ ウィンドウ] を選択します。

  4. [プロパティ] ウィンドウで [Text] プロパティを見つけます。 一覧の並べ替え方法によっては、下へのスクロールが必要になる場合があります。 [テキスト] の値に「計算クイズ」の値を入力して、Enter キーを選択します。

    これで、タイトル バーに "計算クイズ" というテキストが表示されます。

    注意

    プロパティは、カテゴリまたはアルファベット順に表示できます。 [プロパティ] ウィンドウのボタンを使用して切り替えることができます。

  5. フォームのサイズを幅が 500 ピクセル、高さが 400 ピクセルに変更します。

    フォームの端、またはドラッグ ハンドルを動かして、 [プロパティ] ウィンドウの [Size] の値に正しいサイズが表示されるまで、サイズを変更できます。 ドラッグ ハンドルは、フォームの右下隅にある小さな白い四角形です。 [Size] プロパティの値を変更して、フォームのサイズを変更することもできます。

  6. FormBorderStyle プロパティの値を Fixed3D に変更し、MaximizeBox プロパティを False に設定します。

    これらの値によって、クイズの受け手はフォームのサイズを変更できなくなります。

残り時間ボックスを作成する

計算クイズの右上隅には、ボックスがあります。 このボックスには、クイズの残り時間 (秒) が表示されます。 このセクションでは、そのボックスのラベルを使用する方法について説明します。 このシリーズの後半のチュートリアルでは、カウントダウン タイマーのコードを追加します。

  1. Visual Studio IDE の左側で、 [ツールボックス] タブを選択します。ツールボックスが表示されない場合は、メニュー バーから [表示]>[ツールボックス] を選択するか、Ctrl+Alt+X キーを押します。

  2. [ツールボックス] で、Label コントロールを選択して、フォームにドラッグします。

  3. [プロパティ] ボックスで、ラベルに対して次のプロパティを設定します。

    • (Name) を [timeLabel] に設定します。
    • [AutoSize] を [False] に変更して、ボックスのサイズを変更できるようにします。
    • [BorderStyle] を [FixedSingle] に変更して、ボックスの枠線を描画します。
    • [Size] を 200, 30 に設定します。
    • [Text] プロパティを選択し、Backspace キーを選択して、 [Text] の値をクリアします。
    • [Font] プロパティの横にあるプラス記号 ( + ) を選択し、 [Size] を 15.75 に設定します。

  4. ラベルをフォームの右上隅に移動します。 青い枠線が表示されたら、それを使用してフォーム上にコントロールを配置します。

  5. ツールボックスから別の Label コントロールを追加し、フォント サイズを 15.75 に設定します。

  6. ラベルの [Text] プロパティを [Time Left] に設定します。

  7. [timeLabel] ラベルの左側に並ぶようにラベルを移動します。

    Screenshot that shows the Time Left label and the remaining time label. The controls are lined up next to each other in the upper-right corner of the form.

加算の問題にコントロールを追加する

クイズの最初の部分は、加算の問題です。 このセクションでは、ラベルを使用してその問題を表示する方法について説明します。

  1. Label コントロールをツールボックスからフォームに追加します。

  2. [プロパティ] ボックスで、ラベルに対して次のプロパティを設定します。

    • [Text] を ? (疑問符) に設定します。
    • [AutoSize] を [False] に設定します。
    • [Size] を 60, 50 に設定します。
    • フォント サイズを 18 に設定します。
    • [TextAlign] を [MiddleCenter] に設定します。
    • [Location] を 50, 75 に設定して、コントロールをフォーム上に配置します。
    • (Name) を [plusLeftLabel] に設定します。

  3. フォームで、作成した [plusLeftLabel] ラベルを選択します。 [編集]>[コピー] または Ctrl+C キーを選択して、ラベルをコピーします。

  4. [編集]>[貼り付け] または Ctrl+V キーを 3 回選択して、ラベルをフォームに 3 回貼り付けます。

  5. [plusLeftLabel] ラベルの右側に並ぶように、3 つの新しいラベルを配置します。

  6. 2 番目のラベルの [Text] プロパティを + (プラス記号) に設定します。

  7. 3 番目のラベルの (Name) プロパティを [plusRightLabel] に設定します。

  8. 4 番目のラベルの [Text] プロパティを = (等号) に設定します。

  9. NumericUpDown コントロールをツールボックスからフォームに追加します。 この種類のコントロールについては、後ほど詳しく説明します。

  10. [プロパティ] ボックスで、NumericUpDown コントロールに対して次のプロパティを設定します。

    • フォント サイズを 18 に設定します。
    • 幅を 100 に設定します。
    • (Name) を sum に設定します。

  11. 加算問題のラベル コントロールに合わせて、NumericUpDown コントロールを並べます。

    Screenshot that shows the first row of the math quiz. Labels are visible, and a control with arrow keys displays a zero.

減算、乗算、除算問題のコントロールを追加する

次に、残りの計算問題のラベルをフォームに追加します。

  1. 4 つの Label コントロールと、加算問題に対して作成した NumericUpDown コントロールをコピーします。 フォームに貼り付けます。

  2. 新しいコントロールを加算コントロールの下に移動します。

  3. [プロパティ] ボックスで、新しいコントロールに対して次のプロパティを設定します。

    • 最初の疑問符のラベルの (Name) を [minusLeftLabel] に設定します。
    • 2 番目のラベルの [Text] を - (マイナス記号) に設定します。
    • 2 番目の疑問符のラベルの (Name) を [minusRightLabel] に設定します。
    • NumericUpDown コントロールの (Name) を [difference] に設定します。

  4. 加算コントロールをコピーして、フォームにあと 2 回貼り付けます。

  5. 3 番目の行の場合:

    • 最初の疑問符のラベルの (Name) を [timesLeftLabel] に設定します。
    • 2 番目のラベルの [Text] を [x] (乗算記号) に設定します。 このチュートリアルから乗算記号をコピーし、フォームに貼り付けることができます。
    • 2 番目の疑問符のラベルの (Name) を [timesRightLabel] に設定します。
    • NumericUpDown コントロールの (Name) を [product] に設定します。

  6. 4 番目の行の場合:

    • 最初の疑問符のラベルの (Name) を [dividedLeftLabel] に設定します。
    • 2 番目のラベルの [Text] を [÷] (除算記号) に設定します。 このチュートリアルから除算記号をコピーし、フォームに貼り付けることができます。
    • 2 番目の疑問符のラベルの (Name) を [dividedRightLabel] に設定します。
    • NumericUpDown コントロールの (Name) を [quotient] に設定します。

Screenshot that shows a math quiz with four rows of problems. Labels and controls with arrow keys are visible.

スタート ボタンを追加し、タブ インデックスの順序を設定する

このセクションでは、スタート ボタンを追加する方法について説明します。 また、コントロールのタブ オーダーも指定します。 この順序により、クイズの回答者が Tab キーを使用してコントロール間を移動する方法が決まります。

  1. Button コントロールをツールボックスからフォームに追加します。

  2. [プロパティ] ボックスで、ボタンの次のプロパティを設定します。

    • (Name) プロパティを [startButton] に設定します。
    • [Text] プロパティを [Start the quiz] に設定します。
    • フォント サイズを 14 に設定します。
    • [AutoSize] を [True] に設定します。ボタンのサイズがテキストに合わせて自動的に変更されます。
    • [TabIndex] を 0 に設定します。 この値により、スタート ボタンがフォーカスを受け取るための最初のコントロールになります。

  3. フォームの下部付近にボタンを中央揃えで配置します。

    Screenshot that shows a math quiz with four rows of problems and a start button.

  4. [プロパティ] ボックスで、各 NumericUpDown コントロールの [TabIndex] プロパティを設定します。

    • sum の NumericUpDown コントロールの [TabIndex] を 1 に設定します。
    • difference の NumericUpDown コントロールの [TabIndex] を 2 に設定します。
    • product の NumericUpDown コントロールの [TabIndex] を 3 に設定します。
    • quotient の NumericUpDown コントロールの [TabIndex] を 4 に設定します。

アプリを実行する

クイズの計算問題は、まだ機能しません。 ただし、アプリを実行して、 [TabIndex] 値が期待どおりに機能するかどうかを確認することもできます。

  1. アプリを保存するには、次のいずれかの方法を使用します。

    • Ctrl+Shift+S キーを選択します。
    • メニュー バーで、 [ファイル]>[すべてを保存] の順に選択します。
    • ツール バーの [すべて保存] ボタンを選択します。

  2. アプリを実行するには、次のいずれかの方法を使用します。

    • F5 キーを選択します。
    • メニュー バーで、 [デバッグ]>[デバッグ開始] の順に選択します。
    • ツール バーの [開始] ボタンを選択します。

  3. Tab キーを数回選択して、フォーカスがコントロール間でどのように移動するかを確認します。

次のステップ

次のチュートリアルに進み、ランダムな計算問題とイベント ハンドラーを計算クイズに追加します。

チュートリアル パート 2: 計算クイズの WinForms アプリに計算問題を追加する