透過 Tim Corey 引導探索 C# 表單設計

表單構建介紹

Tim 首先歡迎我們來到第七課，並清楚陳述目的：我們正在構建表單。 他提醒我們，這與類別庫工作相似，但現在我們要根據早期的計劃草圖實作實際的用戶界面。 Tim 指出，我們可能會想在這個階段添加程式碼，但他敦促我們只專注於構建表單。

他還解釋我們之前的設計只是粗略的草圖，現在我們要讓表單看起來更好。 Tim 表示設計指南很重要，雖然不會展示他的實驗過程，但他會引導我們了解最終結果。 他還指出，計劃步驟四中的設計是本課的基礎，並建議如果需要，可以回頭查看這些設計。

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

Tim 示範如何將一個新專案新增到解決方案中。 在解決方案總管中，他右擊解決方案，選擇添加新專案，然後選擇 Windows Form Application。 這會創建一個專門用於建立 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 灰色背景顏色更改為白色，並解釋白色更現代，不會干擾表單內容。 這是為用戶界面建立設計指南的一部分。

然後他將字體更改為16點的現代字體，並解釋為什麼應該儘早完成這項工作：之後添加的控制項會自動繼承新字體。 Tim 解釋說，這是有效構建表單的重要提示。

更改圖示和資源

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

將控制項添加到表單

Tim 通過從工具箱中將控制項拖到表單上來開始構建用戶界面。 他添加了一個標題標籤並更改其屬性：

• 字體顏色 → RGB (51, 153, 255)

• 字體 → Light, 28

• 文字 → "Tournament:"

• 名稱 → "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 → 平面

• BorderColor → 銀色

• MouseDownBackColor → (102, 102, 102)

• MouseOverBackColor → (242, 242, 242)

• 字體 → Semi-bold, 16

• 字體顏色 → (51, 153, 255)

• 文字 → "分數"

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

運行表單

Tim 解釋說，專案當前的啟動專案錯誤。 解決方案總管中的類別庫是加粗的，這意味著它被設置為啟動專案，但類別庫不能獨自運行。 他將 Tracker UI 設置為啟動專案。

當他運行應用程式時，表單以 Windows 10 樣式顯示。 Tim 指出了按鈕的懸停和點擊行為，顯示出用戶界面是回應性且現代的。

創建比賽表單

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());

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

為什麼主體很重要

Tim 比較了 Windows Forms 與控制台應用程式：兩者都有靜態的 void Main。 他澄清了當主體完成後，應用程式會關閉。 這就是為什麼表單必須保持開放以保持應用程式運行。

他還指出 Visual Studio 包含 XML 註解，並鼓勵為方法添加 XML 文件。

接下來的計劃

Tim 在 課堂 結束時表示，下一步是用邏輯將表單連接起來。 他向觀眾保證，可能會讓人望而卻步的部分即將到來，但在表單構建之後這會變得可以管理。 他說，邏輯將像組裝樂高玩具一樣，隨著我們的進展，困難的部分將逐漸消失。