手順 1: プロジェクトの作成とフォームへのテーブルの追加

絵合わせゲームの作成における最初の手順は、プロジェクトの作成とフォームへのテーブルの追加です。

プロジェクトを作成し、フォームにテーブルを追加するには

1. [ファイル] メニューの [新しいプロジェクト] をクリックします。

2. Visual Studio Express を使用していない場合は、最初に言語を選択する必要があります。[インストールされたテンプレート] で [C#] または [Visual Basic] を選択します。

3. [Windows フォーム アプリケーション] アイコンをクリックし、名前として「MatchingGame」と入力します。

4. フォームのプロパティを設定します。

   1. フォームの [Text] プロパティを Matching Game に変更します。

   2. [Size] プロパティを使用するか、統合開発環境 (IDE: Integrated Development Environment) の左下隅に適切なサイズで表示されるようになるまでドラッグして、サイズを幅 550 ピクセル、高さ 550 ピクセルに変更します。

5. TableLayoutPanel コントロールをツールボックスからドラッグし、そのプロパティを設定します。

   1. [BackColor] プロパティを [CornflowerBlue] に設定します。(カラー ピッカーで [Web] タブを選択すると、色の名前が表示されます)。

   2. プロパティの横のドロップダウン ボタンをクリックし、大きな中央ボタンをクリックして、[Dock] プロパティを [Fill] に設定します。

   3. TableLayoutPanel の右上隅の三角形のボタンをクリックして、タスク メニューを表示します。

   4. [行の追加] を 2 回クリックして行を 2 つ追加し、[列の追加] を 2 回クリックして列を 2 つ追加します。

   5. [行および列の編集] をクリックして [列と行のスタイル] ウィンドウを開きます。各列を選択し、[パーセント] ボタンをクリックして、各列の幅を全体の幅の 25% に設定します。ウィンドウの上部にあるドロップダウン ボックスから [行] を選択し、各行の高さを 25% に設定します。[OK] をクリックします。

   これで、TableLayoutPanel に 16 個の同じサイズの四角形のセルができました。

6. フォーム エディターで TableLayoutPanel が選択されていることを確認します。選択された状態で、ツールボックスを開いて、[Label] をダブルクリックし、左上の四角形に Label コントロールを追加します。これで、IDE で Label コントロールが選択されました。そのプロパティを設定します。

   1. [BackColor] プロパティを [CornflowerBlue] に設定します。

   2. [AutoSize] プロパティを [False] に設定します。

   3. [Dock] プロパティを [Fill] に設定します。

   4. プロパティの横のドロップダウン ボタンをクリックし、中央ボタンをクリックして、[TextAlign] プロパティを [MiddleCenter] に設定します。

   5. [Font] プロパティをクリックします。省略記号ボタンが表示されます。

   6. 省略記号ボタンをクリックし、フォントを [Webdings 72 point Bold] に設定します。

   7. [Text] プロパティを文字 c に設定します。

      これで、TableLayoutPanel の左上のセルに、青色の背景の中央に大きな黒いボックスが配置されました。

      [!メモ]

      Webdings フォントはアイコンのフォントであり、Microsoft Windows オペレーティング システムに付属しています。この絵合わせゲームでは、プレーヤーはアイコンのペアを一致させる必要があるため、このフォントを使用して、一致するアイコンを表示します。[Text] プロパティに c を設定する代わりに、さまざまな文字を入力してどのようなアイコンが表示されるのか確認してみてください。感嘆符はクモ、大文字の N は目、コンマはトウガラシです。

7. Label コントロールを選択してコピーします (Ctrl キーを押しながら C キーを押すか、[編集] メニューの [コピー] をクリックします)。次に、これを貼り付けます (Ctrl キーを押しながら V キーを押すか、[編集] メニューの [貼り付け] をクリックします)。TableLayoutPanel の 2 つ目のセルに別のラベルが表示されます。再度貼り付けると、3 つ目のセルにまた別のラベルが表示されます。すべてのセルが埋まるまで、Label コントロールの貼り付け操作を続けます。

   [!メモ]

   多く貼り付けすぎた場合は、IDE によって TableLayoutPanel に新しい行が追加され、新しい Label コントロールを追加する場所が作成されます。これは、元に戻すことができます。新しいセルを削除するには、Ctrl キーを押しながら Z キーを押すか、[編集] メニューの [元に戻す] をクリックします。

   これで、フォームがレイアウトされました。結果は次の図のようになります。

   絵合わせゲームの初期のフォーム

   

続行または確認するには

• チュートリアルの次の手順に進むには、「手順 2: Random オブジェクトおよびアイコンのリストの追加」を参照してください。

• 概要のトピックに戻るには、「チュートリアル 4: 絵合わせゲームの作成」を参照してください。