チュートリアル: 数学クイズ WinForms アプリを作成する

この 4 つのチュートリアルシリーズでは、数学クイズを作成します。 クイズには、クイズの受験者が指定された時間内に答えようとする 4 つのランダムな数学問題が含まれています。

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

この最初のチュートリアルでは、次の方法を学習します。

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

[前提条件]

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

注

このチュートリアルでは、 Windows フォーム アプリ (.NET Framework) プロジェクト テンプレートが必要です。 インストール中に、 .NET デスクトップ開発 ワークロードを選択します。

Visual Studio が既にインストールされていて、追加する必要がある場合は、メニューから [ツール>Get Tools and Features] を選択するか、[ 新しいプロジェクトの作成 ] ウィンドウで [ その他のツールと機能のインストール ] リンクを選択します。

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

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

1. Visual Studio を開きます。

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

   

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

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

   

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

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

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

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

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

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

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

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

   これで、フォームのタイトル バーに "Math Quiz" というテキストが表示されます。

   注

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

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

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

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

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

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

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

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

2. Labelで コントロールを選択し、フォームにドラッグします。

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

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

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

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

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

7. ラベルを移動して、 timeLabel ラベルの左側に並びます。

   

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

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

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

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

   • テキストを ? (疑問符) に設定します。
   • AutoSize を False に設定します。
   • [サイズ] を 60、50 に設定します。
   • フォント サイズを 18 に設定します。
   • TextAlign を MiddleCenter に設定します。
   • フォームにコントロールを配置するには、[ 場所 ] を 50、75 に設定します。
   • (名前) を plusLeftLabel に設定します。

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

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

5. 3 つの新しいラベルを 、plusLeftLabel ラベルの右側の行に配置します。

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

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

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

9. NumericUpDownからフォームに コントロールを追加します。 この種のコントロールの詳細については、後で学習します。

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

    • フォント サイズを 18 に設定します。
    • [ MaximumSize] で、幅を 100 に設定します。
    • (名前) を合計に設定します。

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

    

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

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

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

2. 新しいコントロールを追加コントロールの下に整列するように移動します。

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

   • 最初の疑問符ラベルの (名前) を minusLeftLabel に設定します。
   • 2 番目のラベルの テキスト を - (負符号) に設定します。
   • 2 番目の疑問符ラベルの (名前) を minusRightLabel に設定します。
   • NumericUpDown コントロールの (名前) を差分に設定します。

4. 追加コントロールをコピーし、さらに 2 回フォームに貼り付けます。

5. 3 番目の行の場合:

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

6. 4 番目の行の場合:

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

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

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

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

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

   • (名前) を startButton に設定します。
   • [テキスト] を [クイズの開始] に設定します。
   • フォント サイズを 14 に設定します。
   • AutoSize を True に設定すると、ボタンのサイズがテキストに合わせて自動的に変更されます。
   • TabIndex を 0 に設定します。 この値により、フォーカスを受け取る最初のコントロールがスタート ボタンになります。

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

   

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

   • sum コントロールの TabIndex を 1 に設定します。
   • 差分コントロールの TabIndex を 2 に設定します。
   • 製品コントロールの TabIndex を 3 に設定します。
   • quotient コントロールの TabIndex を 4 に設定します。

アプリを実行する

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

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

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

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

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

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

次のステップ

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

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