通過Tim Corey指導的C#表單設計探索

表單建構簡介

Tim 首先歡迎我們來到第七課，並明確指出目的：我們正在建構表單。 他提醒我們這與類別程式庫工作類似，但現在我們正在基於之前的計畫草圖執行實際的 UI 實作。 Tim 指出我們可能會被誘惑在這個階段新增程式碼，但他敦促我們只專注於建構表單。

他也解釋說，我們之前的設計只是粗略的草圖，現在我們正在讓表單看起來更好。 Tim 表示設計指南是重要的，雖然他不會展示他經歷的試驗過程，但他會帶領我們了解最終結果。 他還指出，設計來自規劃步驟四，這也是這節課的基礎，如果需要，建議重溫那些設計。

新增新專案並開始 Windows Forms 應用程式

Tim 向我們展示如何在解決方案中新增新專案。 在解決方案總管中，他右鍵單擊解決方案，選擇新增新專案，然後選擇 Windows Form 應用程式。 這將建立一個專門用於建構 Windows 桌面應用程式的新專案型別。 他將專案命名為 Tournament Tracker UI。

他解釋說，當建立 Windows Forms 應用程式時，預設的 Form1.cs 檔案會被自動生成。由於應用程式需要一個起始表單，Tim 決定不刪除它。 相反，他將檔案和類別重新命名為 TournamentViewerForm，並接受提示以重新命名所有引用。 這確保應用程式的主視窗將正確運行。

重新命名表單類別

Tim 強調在 Windows Forms 應用程式中必須有一個運行的表單。 他解釋說，如果您刪除了預設的 Form1.cs，您必須手動更新 Program.cs 中的入口點。 為了避免這種複雜性，Tim 只是簡單地重新命名了表單。 這是在開始 Windows Forms 應用程式時的常規步驟：將類別和檔案重新命名以符合專案的目的。

使用屬性視窗

Tim 打開屬性視窗並開始修改表單的屬性。 他將文字屬性更改為"Tournament Viewer"，以便標題欄顯示正確的名稱。

接下來，他將背景顏色從 Visual Studio 的預設灰色改為白色，解釋說白色更現代，不會分散表單內容的注意力。 這是為 UI 建立設計指南的一部分。

然後，他將字型更改為 16 點的現代理念字體，並解釋為什麼要提前這麼做：稍後新增的控制項將會自動繼承新的字型。 Tim 解釋說，這是高效建構表單的重要提示。

更改圖示和資源

Tim 通過匯入自訂圖示檔案來更改表單的圖示。他解釋說，他使用了一個免費的工具叫做 Metro Studio 來建立這個圖示。 這幫助他避免從頭開始撰寫或設計圖示。 他還指出，他將在所有表單中使用相同的圖示，以建立一個統一的應用程式外觀。

將控制項新增到表單中

Tim 開始通過從工具箱中拖動控制項到表單來建構 UI。 他新增了一個標題標籤並更改其屬性：

• ForeColor → RGB (51, 153, 255)

• Font → Light, 28

• Text → "Tournament:"

• Name → "headerLabel"

然後，他複製並粘貼標題標籤以建立比賽名稱標籤，暫時將其文字設為"None"，並命名為 tournamentNameLabel。 Tim 解釋說，複製並粘貼控制項是一種快速維持一致風格並節省時間的方法。

新增回合選擇控件

Tim 新增了一個回合標籤和一個下拉式 ComboBox。 他將標籤的字體更改為 20，並將顏色設置為相同的藍色強調色。 他利用 Visual Studio 的對齊指導確保控制項正確對齊。

接下來，他新增一個標記為"僅未播放"的 CheckBox。他將其樣式更改為扁平，並更改勾選標記顏色為藍色。 Tim 還解釋了他的命名規則：他在控件型別的末尾新增控制項型別（例如，roundDropDown，unplayedOnlyCheckbox），以便於搜尋和程式碼導航。

新增比賽列表和比分控件

Tim 新增了一個名為 matchupListBox 的 ListBox，並將其邊框樣式設為固定單線。 他解釋說，ListBox 的行為與 ComboBox 相似，這讓稍後的程式碼編寫更加輕鬆。

然後他新增了團隊名稱和分數的標籤和文字方塊。 他展示了一個強大的技術：選擇多個控制項，複製它們，然後一起粘貼。 這保持了間距和佈局，加速了設計過程。

Tim 還解釋說，必須正確命名每個控制項，避免使用預設名稱如 label1 或 textBox2，因為這可能在後來引起混亂。

新增 VS 標籤和分數按鈕

Tim 在兩個團隊部分之間新增了一個"VS"標籤。 然後，他新增了一個分數按鈕並自訂其樣式：

• FlatStyle → Flat

• BorderColor → Silver

• MouseDownBackColor → (102, 102, 102)

• MouseOverBackColor → (242, 242, 242)

• Font → Semi-bold, 16

• ForeColor → (51, 153, 255)

• Text → "Score"

他解釋說，這些設置使按鈕看起來現代且響應特別，特別是當使用者懸停或點擊時。

運行表單

Tim 解釋說，目前專案設置了錯誤的啟動專案。 在解決方案總管中，類別庫突顯為粗體，這意味著它被設置為啟動專案，但類別庫不能單獨運行。 他將 Tracker UI 設置為啟動專案。

當他運行應用程式時，表單會顯示出 Windows 10 的樣式。 Tim 指出按鈕的懸停和點擊行為，顯示出 UI 現代且響應特別。

建立比賽表單

Tim 新增了一個新表單名為 CreateTournamentForm 並設置其屬性（字體、顏色、圖標）。 他從 Tournament Viewer 表單複製控件以加速開發。

他新增了：

• 比賽名稱輸入

• 設定費輸入(預設值0)

• 新增隊伍下拉選單

• 建立隊伍鏈結標籤

• 新增隊伍按鈕

• 建立獎賞按鈕

• 比賽玩家列表框

• 刪除按鈕

• 建立比賽按鈕

Tim 解釋說，他的設計選擇是保持連結標籤為藍色，因為使用者已被訓練識別藍色下劃線文字為連結。

建立隊伍表單

Tim 建立了 CreateTeamForm 並新增了：

• 團體名稱輸入

• 選擇團隊成員下拉選單

• 新增成員按鈕

• 新增新成員的羣組框

• 名字，姓氏，電子郵件，手機字段

• 建立成員按鈕

• 團隊成員列表框

• 刪除選定成員按鈕

• 建立團隊按鈕

他解釋說，羣組框提供了視覺邊界並使得管理羣組控件更加輕鬆。 它也有助於將羣組作爲單位移動時。

建立獎品表單

Tim 构建了 CreatePrizeForm，具有：

• 名次輸入

• 名次名稱輸入

• 獎勵金額輸入

• 獎勵百分比輸入

• "或"標籤

• 建立獎賞按鈕

他使用對齊工具確保佈局看起來整潔專業。

比賽儀表板表單

Tim 構建了最終表單：TournamentDashboardForm。 他新增了：

• 載入現有比賽下拉選單

• 加载比赛按钮

• 建立比賽按鈕

他使用對齊和間距工具使佈局視覺平衡。

命名和組織提示

Tim 強調了正確命名的重要性。 他展示瞭如何使用屬性下拉選單來識別如 label1 或 textBox2 這類未命名的控件，這些控件是意外遺留下來的。 他演示了將一個 groupBox 重命名爲 addNewMemberGroupBox 以增強清晰度。

設置啓動表單

Tim 解釋瞭如何在 Program.cs 中更改啓動表單。 他更改了：

Application.Run(new TournamentViewerForm());

到：

Application.Run(new TournamentDashboardForm());

他解釋說，這行程式碼建立表單實例並使應用程式在表單關閉前暫停。

為什麼 Main 很重要

Tim 比較了 Windows Forms 和控制檯應用程式：兩者都有靜態 void Main。 他澄清道，一旦 Main 完成，應用程式會關閉。 這就是為什麼表單必須保持開啟，以保持應用程式運行。

他還提到 Visual Studio 包含 XML 註釋，他鼓勵在稍後為方法新增 XML 文件。

接下來

Tim 在課程中結束時指出，下一步是將表單與邏輯連接起來。 他安撫觀眾，雖然恐懼的部分即將到來，但一旦建立了表單，它將是可以輕鬆管理的。 他說，邏輯將像裝配樂高積木一樣，困難的部分會隨著我們的進步逐漸消失。