Tim Corey と共に C# フォームデザインを探る — ガイド付きウォークスルー

フォーム構築の導入

Tim は第7レッスンへようこそと言って始め、その目的を明確に述べます：フォームを構築することです。 彼は、これはクラスライブラリの作業に似ているが、今では計画スケッチに基づく実際のユーザーインターフェースを実装していることを思い出させます。 Tim は、この段階でコードを追加したい欲望に駆られるかもしれないが、フォームの構築だけに専念するように促します。

また、以前の設計が粗いスケッチであったことを説明し、現在はフォームを良く見せるようにしています。 Tim は、デザインガイドが重要であり、彼が経験した実験を見せないものの、最終結果を案内すると述べています。 また、設計のステップ4からのデザインがこのレッスンの基礎であることを指摘し、必要に応じてそれらの設計を参照することを提案します。

新しいプロジェクトを追加して Windows Forms アプリケーションを開始する

Tim はソリューションに新しいプロジェクトを追加する方法を示します。 ソリューションエクスプローラーでソリューションを右クリックし、"新しいプロジェクトの追加"を選択し、Windows フォームアプリケーションを選択します。 これにより、Windows デスクトップアプリケーションを構築するための新しいプロジェクトタイプが作成されます。 プロジェクトに Tournament Tracker UI という名前を付けます。

彼は、Windows Forms アプリを作成すると自動的にデフォルトの Form1.cs ファイルが生成されることを説明します。アプリにはスタートフォームが必要であるため、Tim はそれを削除しないことに決めました。 代わりに、ファイルとクラスの名前を TournamentViewerForm に変更し、すべての参照をリネームするプロンプトを受け入れます。 これにより、アプリケーションのメインウィンドウが正しく実行されることが保証されます。

フォームクラスの名前を変更する

Tim は、Windows Forms アプリケーションで実行されるフォームを持つ必要があることを強調します。 デフォルトの Form1.cs を削除すると、Program.cs のエントリポイントを手動で更新する必要があることを説明します。 その複雑さを回避するために、Tim は単にフォームの名前を変更します。 これは Windows Forms アプリを開始する際の典型的なステップです: プロジェクトの目的に合わせてクラスとファイルの名前を変更します。

プロパティウィンドウの使用

Tim はプロパティウィンドウを引き出し、フォームのプロパティを変更し始めます。 タイトルバーに適切な名前が表示されるように、Text プロパティを"トーナメントビューアー"に変更します。

次に、デフォルトの Visual Studio のグレーから白に BackColor を変更し、白がよりモダンでフォームの内容に気を取られないと説明します。 これは UI のデザインガイドを確立する一部です。

次に、フォントを 16 ポイントのモダンなフォントに変更し、これを初期段階で行うべき理由を説明します: 後で追加されるコントロールが自動的に新しいフォントを継承するためです。 Tim は、これは効率的にフォームを構築するための重要なヒントであると説明しています。

アイコンとリソースの変更

Tim はカスタムアイコンファイルをインポートしてフォームのアイコンを変更します。彼は、Metro Studio という無料ツールを使用してアイコンを作成したと説明します。 これにより、アイコンを最初からデザインする必要がなくなります。 また、すべてのフォームに同じアイコンを使用してアプリケーションの一貫性のある外観を作り出すことを説明します。

フォームにコントロールを追加する

Tim は Toolbox からコントロールをフォームへドラッグして UI を構築し始めます。 彼はヘッダーラベルを追加し、そのプロパティを変更します：

• ForeColor → RGB (51, 153, 255)

• Font → Light, 28

• Text → "トーナメント:"

• Name → "headerLabel"

次に、ヘッダーラベルをコピーして貼り付け、トーナメント名ラベルを作成し、そのテキストを一時的に"なし"に設定し、tournamentNameLabel と名前を付けます。 Tim は、コントロールをコピーして貼り付けることは、スタイルの一貫性を保ち、時間を節約するためのクイックな方法であると説明しています。

ラウンド選択コントロールの追加

Tim はラウンドラベルと ComboBox ドロップダウンを追加します。 ラベルのフォントを20に変更し、同じ青のアクセントカラーに設定します。 彼は Visual Studio の整列ガイドを使用して、コントロールが適切に並ぶようにします。

次に、"未プレイに限る"ラベルを付けた CheckBox を追加します。スタイルをフラットにし、チェックマークの色を青に変更します。 Tim は、自分の命名規則も説明し、ラウンドドロップダウン、未プレイに限るチェックボックスなど、検索とコードナビゲーションを容易にするためにコントロールタイプを末尾に追加します。

試合リストとスコアコントロールの追加

Tim は matchupListBox という名前の ListBox を追加し、そのボーダースタイルを固定シングルに設定します。 彼は、ListBox が ComboBox に似た動作をし、後でのコーディングを簡単にすることを説明します。

その後、チーム名とスコア用のラベルとテキストボックスを追加します。 複数のコントロールを選択してコピーし、まとめて貼り付ける強力なテクニックを実演します。 これにより、スペースとレイアウトが保持され、設計プロセスが迅速になります。

Tim は、すべてのコントロールの名前を正しく変更する必要があり、label1 や textBox2 のようなデフォルトの名前を避け、それが後々誤解を招く可能性があることも説明しています。

VSラベルとスコアボタンの追加

Tim は2つのチームセクションの間に"VS"ラベルを追加します。 次に、スコアボタンを追加し、そのスタイルをカスタマイズします：

• FlatStyle → Flat

• BorderColor → シルバー

• MouseDownBackColor → (102, 102, 102)

• MouseOverBackColor → (242, 242, 242)

• Font → Semi-bold, 16

• ForeColor → (51, 153, 255)

• Text → "スコア"

彼は、これらの設定がボタンをモダンでレスポンシブに見せ、特にユーザーがホバーまたはクリックしたときによく反応することを説明します。

フォームの実行

Tim は現在プロジェクトが誤ったスタートアッププロジェクトになっていることを説明します。 クラスライブラリがソリューションエクスプローラーで太字です。これはスタートアッププロジェクトとして設定されていることを意味しますが、クラスライブラリは単独で実行することはできません。 彼は Tracker UI をスタートアッププロジェクトとして設定します。

アプリケーションを実行すると、Windows 10 スタイリングのフォームが表示されます。 Tim はボタンのホバーとクリックの動作を指摘し、UI がレスポンシブでモダンであることを示します。

トーナメント作成フォーム

Tim は新しいフォームを追加し、CreateTournamentForm という名前を付け、プロパティ（フォント、色、アイコン）を設定します。 彼は開発を効率化するために、Tournament Viewer フォームからコントロールをコピーします。

彼は次を追加します：

• トーナメント名入力

• エントリー料入力（デフォルト値0）

• チーム追加ドロップダウン

• チーム作成リンクラベル

• チーム追加ボタン

• 賞金作成ボタン

• トーナメント参加者リストボックス

• 削除ボタン

• トーナメント作成ボタン

Tim は、リンクラベルを青く保つデザイン選択を説明します。ユーザーは青の下線付きテキストをリンクとして認識する訓練を受けているためです。

チーム作成フォーム

Tim は CreateTeamForm を作成し、以下を追加します：

• チーム名入力

• チームメンバー選択ドロップダウン

• メンバー追加ボタン

• 新メンバー追加用のグループボックス

• 名前、姓、メール、携帯電話のフィールド

• メンバー作成ボタン

• チームメンバーリストボックス

• 選択されたメンバー削除ボタン

• チーム作成ボタン

彼は、グループボックスが視覚的な境界を提供し、グループ化されたコントロールの管理を容易にすることを説明します。 また、グループ全体を移動する際にも役立ちます。

賞作成フォーム

Tim は次の要素を使って CreatePrizeForm を構築します：

• 順位番号入力

• 順位名入力

• 賞金額入力

• 賞金割合入力

• "または"ラベル

• 賞金作成ボタン

レイアウトが清潔でプロフェッショナルに見えるように、整列ツールを使用します。

トーナメントダッシュボードフォーム

Tim は最終フォームである TournamentDashboardForm を構築します。 彼は次を追加します：

• 既存のトーナメントをロードするドロップダウン

• トーナメントをロードするボタン

• トーナメント作成ボタン

彼は整列とスペーシングツールを使用して、レイアウトが視覚的にバランスを保つようにします。

名称と組織化のヒント

Tim は適切な名前付けの重要性を強調します。 彼は、プロパティドロップダウンが label1 や textBox2 のような名前が付いていないコントロールを特定するのに役立つ方法を示します。 彼は addNewMemberGroupBox という名前を付けてグループボックスの名前を変更するデモを行います。

スタートアップフォームの設定

Tim は Program.cs でスタートアップフォームを変更する方法を説明します。 彼は変更します：

Application.Run(new TournamentViewerForm());

から：

Application.Run(new TournamentDashboardForm());

この行がフォームインスタンスを作成し、フォームが閉じるまでアプリケーションを停止することを説明します。

なぜ Main が重要であるか

Tim は Windows Forms をコンソールアプリケーションと比較します: 両方とも静的 void Main を持ちます。 彼は、Main が完了するとアプリケーションが閉じることを明確にします。 それが、アプリケーションを動作させ続けるためにフォームが開いている必要がある理由です。

また、Visual Studio が XML コメントを含むことを述べ、後でメソッド用に XML ドキュメンテーションを追加することを奨励します。

次に来るもの

Tim は レッスンを締めくくり、次のステップはロジックを使ってフォームを結合することであると述べています。 彼は、見た目が intimidating であるが、フォームが構築されると管理可能になることを視聴者に安心させます。 彼は、それがレゴブロックを組み立てるように感じられ、進行するにつれて困難な部分が徐々に消えていくと言っています。