C# Windows Forms 筆記 - Bunifu 插件 - Login Form 製作流程
做做筆記，方便自己日後查看，做一個整合消化，去除了一些無謂的操作。
以下是利用 Bunifu 插件，進行 Login 界面 的開發的製作流程。
如果你不想看吐槽、抱怨和廢話的話，可以看最底下的總結。
相關視頻：
Modern Flat Design Form Login - VB.NET and C# Bunifu Ui 1.5 現代設計用戶界面 для начинающих - YouTube
一開始，建立 Windows Form。
ToolBox 搜尋 elip ，找到 BunifuElipse 元件。
拖到 Windows Form 上，或者先點一下 BunifuElipse ，再點一下 Form。
視頻中突然拿出了一個 Color Picker，除紀錄了 rgb 外，並沒有用途。
上面記錄了三種顏色的 rgb.
灰色：67, 81, 89
鮮綠：26, 177, 136深綠：36, 49, 60修改 Form 的屬性，BackColor 改為 36, 49, 60 (深綠)。
// 接下來在 ToolBox 搜尋 flat，找到 BunifuFlatButton 元件。
這部分的操作完全可以不用理會。
視頻從 1:30 開始使用 BunifuFlatButton 元件，
到 2:10 時候突然把 BunifuFlatButton 元件刪除了，並且其後也沒有使用/出現。
很開心的。
從 2:10 起，在 ToolBox 搜尋 thi，找到 BunifuThinButton2 元件。
把 ActiveCornerRadius 改為 1
把 IdleCornerRadius 改為 1把 ActiveFillColor 改為 26, 177, 136 (鮮綠)把 IdleForecolor 改為 White把 IdleLineColor 改為 26, 177, 136 (鮮綠)
把 BorderStyle 改為 None把 ButtonText 改為 Sign Up完成後複製一個放在旁邊，ButtonText 改為 Sign In
再複製一個放在底下，橫向拉長。
目前是 3:33 。
在 ToolBox 搜尋 pan，找到 Panel 元件，拖出一個。
在 ToolBox 搜尋 cust，找到 BunifuCustomLabel 元件，拖出一個。
把 BunifuCustomLabel 的
Text 改為 Sign Up For Free
ForeColor 改為 Gainsboro
Font 改為 Century Gothic, Regular, 20pt目前是 5:05 。
排版是這樣的：
在 ToolBox 搜尋 metr，找到 BunifuMetroTextBox 元件，拖出一個。
把 BorderColor 改為 Gray
把 BorderFocusColor 改為 26, 177, 136 (鮮綠)把 BorderThickness 改為 2把 ForeColor 改為 Silver目前是 6:14 。
複製 BunifuCustomLabel 元件，即 text 為 Sign Up For Free 的那個。
放在 BunifuMetroTextBox 元件的左上角，即文字輸入框的左上角。
縮小 Font 大小，改為 10pt
ForeColor 改為 DarkGrayText 改為 First Name調整 BunifuMetroTextBox 的橫向闊度。
連帶輸入框(BunifuMetroTextBox)和文字(BunifuCustomLabel )，
複製三個放在適當的位置。排版如下：
對應文字的 Text 改為 Last Name, Email, Password。
Password 下的輸入框，isPassword 改為 True。
如果碰到文字輸入框位置偏離的問題，可參看：
C# Window Form 筆記 - Bunifu 元件開發用戶界面，幾個問題，無框架拖放移動 - 知乎把底下的 Sign Up 按鈕納入 Panel 範圍。
目前是 7:44。
橫向拉長整個 Form，複製整個 Panel，放在右側。
修改 Sign Up For Free 的 Text 為 Sign In。
刪去 First Name 和 Last Name 及其對應的輸入框。
修改底下的 Sign Up 按鈕的 ButtonText 為 Sign In。
左邊 Panel 的 Name 改為 slideA ，
右邊 Panel 的 Name 改為 slideB ，方便代碼處理。
排版：
他順便改了 Form 的 Name，改為 login，但不影響代碼運作。
縮短 Form 的橫向闊度，拉回原狀。
在 ToolBox 搜尋 anima，找到 Animator 元件，拉到 Form。
（我並不知道這個有什麼用。）
目前是 9:08，接下來是寫代碼的時間。
雙點擊上面的兩個按鈕 (Sign Up 和 Sign In)，生成對應的代碼框。
具體的代碼我有打了一次在這篇文章：
C# Window Form 筆記 - Bunifu 元件開發用戶界面，幾個問題，無框架拖放移動 - 知乎順便做了一下優化。
目前是 9:39，代碼部分完結。
接下來的部分我並沒有看，所以沒有詳細的流程。
似乎是利用 BunifuSeparator 畫一條底線放 Sign Up 按鈕下。
兩個按鈕改為 36, 49, 60 (深綠)。
改一下代碼，使按鈕按下時 BunifuSeparator 會移動到對應的位置。
最後，我發現它是不能拖放移動的，同樣的：
C# Window Form 筆記 - Bunifu 元件開發用戶界面，幾個問題，無框架拖放移動 - 知乎
這篇文章的最後部分有提到解決方法 —— 如何無框架時進行拖放移動。
沒有吐槽、抱怨和廢話的總結部分：
- 拖出 BunifuElipse 元件
- Form 的 BackColor 改為 36, 49, 60
- 拖出 BunifuThinButton2 元件
- ActiveCornerRadius 改為 1
- IdleCornerRadius 改為 1
- ActiveFillColor 改為 26, 177, 136
- IdleForecolor 改為 White
- IdleLineColor 改為 26, 177, 136
- BorderStyle 改為 None
- ButtonText 改為 Sign Up
- 完成後複製一個放在旁邊，ButtonText 改為 Sign In
- 再複製一個放在底下，橫向拉長
- 拖出 Panel 元件
- 拖出 BunifuCustomLabel 元件
- Text 改為 Sign Up For Free
- ForeColor 改為 Gainsboro
- Font 改為 Century Gothic, Regular, 20pt
- 排版：
9. 拖出 BunifuMetroTextBox 元件
___1. BorderColor 改為 Gray___2. BorderFocusColor 改為 26, 177, 136___3. BorderThickness 改為 2___4. ForeColor 改為 Silver10. 複製 BunifuCustomLabel 元件，即 text 為 Sign Up For Free 的那個11. 放在 BunifuMetroTextBox 元件的左上角，即文字輸入框的左上角___1. 縮小 Font 大小，改為 10pt___2. ForeColor 改為 DarkGray___3. Text 改為 First Name12. 調整 BunifuMetroTextBox 的橫向闊度13. 連帶輸入框(BunifuMetroTextBox)和文字(BunifuCustomLabel )____複製三個放在適當的位置14. 排版：15. 對應文字的 Text 改為 Last Name, Email, Password
16. Password 下的輸入框，isPassword 改為 True17. 如果碰到文字輸入框位置偏離的問題，可參看：____C# Window Form 筆記 - Bunifu 元件開發用戶界面，幾個問題，無框架拖放移動 - 知乎18. 把底下的 Sign Up 按鈕納入 Panel 範圍19. 橫向拉長整個 Form，複製整個 Panel，放在右側20. 修改 Sign Up For Free 的 Text 為 Sign In21. 刪去 First Name 和 Last Name 及其對應的輸入框22. 修改底下的 Sign Up 按鈕的 ButtonText 為 Sign In23. 左邊 Panel 的 Name 改為 slideA 24. 右邊 Panel 的 Name 改為 slideB 25. 縮短 Form 的橫向闊度，拉回原狀26. 雙點擊上面的兩個按鈕 (Sign Up 和 Sign In)，生成對應的代碼框。27. 具體的代碼我有打了一次在這篇文章：____C# Window Form 筆記 - Bunifu 元件開發用戶界面，幾個問題，無框架拖放移動 - 知乎28. 剩下的部分我沒有看。29. 不能拖放移動的解決方法：____C# Window Form 筆記 - Bunifu 元件開發用戶界面，幾個問題，無框架拖放移動 - 知乎到這裡也是差不多了。
文章寫了蠻久。
如果幫到你的話，點個贊。
如果你發現有錯漏的地方，請通知我，或者留言矯正。
謝謝。OW<
推薦閱讀：
