C# Windows Forms 筆記 - Bunifu 插件 - 漸變側面菜單 製作流程
做做筆記，方便自己日後查看，做一下整合消化，去除一些無謂的操作。
以下是利用 Bunifu 插件，進行 漸變側面菜單 開發的製作流程。
如果你不想看吐槽、抱怨和廢話的話，可以看最底下的總結。
相關視頻：
C#, vb.Net PROGRAMMING - Modern Flat Gradient side menu | Tabs with Bunifu UI 1.5 現代設計用戶界面
一開始，建立 Windows Form。
ToolBox 搜尋 eli ，找到 BunifuElipse 元件。
拖到 Windows Form 上，或者先點一下 BunifuElipse ，再點一下 Form。
ToolBox 搜尋 pan，找到 Panel 元件，拖出一個。
把 Dock 改為 Left。
ToolBox 搜尋 gra，找到 BunifuGradientPanel 元件，拖出一個。
把 Dock 改為 Left。
注意修改屬性時，左上角定點需要在 Panel 之內。
不然會變成下圖這樣：
在 1:04 到 1:45 的這段時間，作者一直在調整參數。
在 1:46 那一瞬間，一下閃爍，調整完成，連調整了什麼參數也看不到。
所以 1:04 到 1:45 這段時間有什麼意義。 = —— = "
如果不是 1:51 放 Buttom 時按到，我也不知道調整了什麼。
很開心吶。
把 BunifuGradientPanel 的
GradientBottomLeft 改為 40, 177, 231
GradientBottomRight 改為 184, 31, 141GradientTopLeft 改為 31, 65, 154GradientTopRight 改為 BlackToolBox 搜尋 fla，找到 BunifuFlatButton 元件，拖出一個。
調整橫向闊度，使其貼合容器。
把 Normalcolor 改為 Transparent
// 在影片的 2:33 ，他把 OnHovercolor 改為 10, 36, 129, 77（請先看下去，不要改成這個
2:36 按下運行調試，如果不是 2:42 看著滑鼠跳了一下。
我都不知道他偷偷把 OnHovercolor 改為 50, 80, 36, 95
然後，在影片的最後，再把 OnHovercolor 改成 100, 80, 36, 95 （請改成這個
很開心吶。
後來發現有一點點怪錯了他，
他在 2:58 點了一下 OnHovercolor 示意改了這個。
不過你反正都剪接了，為什麼不剪去錯誤的部分呢.. 。ヾ( ′?ω?｀)ノ 很影響觀看呢..。
整段影片中類似的問題還有很多，我就不再抱怨了。繼續修改 BunifuFlatButton ，
isTab 改為 True
Activecolor 改為 50, 80, 36, 95TextFont 改為 Century Gothic, 11ptIconVisible 改為 FalseIconRightVisible 改為 False （不知道改這個有什麼用Text 改為 Home，然後在前面加入空格，強行調整位置。完成後，複製五個放在下面。
把排在第一的那個，selected 改為 True
依次序把二、三、四、五、六的 Text 改為：
Profile
MessagesFriendsNotificationsExit排版如下：
對於元件的位置，可以使用工作列上的按鈕進行操作。
影片中使用了最左邊那個按鈕（靠左對齊）和最右邊的那個按鈕（將垂直間距設為相等）
事實上人手直接調整已經可以。
選取所有 BunifuFlatButton ，把 Textcolor 改為 224, 224, 224
如果你想用圖像化選取的話
左上向下數第二個，灰色那個。
ToolBox 搜尋 pan，找到 Panel 元件，拖出一個，放在右邊。
Dock 改為 Fill
BackColor 改為 224, 224, 224 （跟上面那個灰色一樣ToolBox 搜尋 pict，找到 PictureBox 元件，拖出一個。
選擇影像，影片中準備了圖像，我沒有。圖像是下面這樣的：
ToolBox 搜尋 cust，找到 BunifuCustomLabel 元件，拖出一個，放在圖像下方。
Text 改為 Bunifu UI Locked
ForeColor 改為 64, 64, 64Font 改為 Century Gothic, 16ptToolBox 搜尋 thi，找到 BunifuThinButton2 元件，拖出一個，放在圖像和文字下方。
ButtonText 改為 Buy
IdleForecolor 改為 65, 52, 105
IdleLineColor 改為 65, 52, 105IdleFillColor 改為 224, 224, 224IdleCornerRadius 改為 30Font 改為 Century Gothic, 10ptActiveFillColor 改為 65, 52, 105ActiveLineColor 改為 65, 52, 105我到這裡就停下了，後面似乎只是左上角加一個圖像。
並加入 BunifuDragControl 元件使它可拖放 ，不過不知道為什麼在我的電腦上不生效。
所以我還是自己解決：
C# Window Form 筆記 - Bunifu 元件開發用戶界面，幾個問題，無框架拖放移動 - 知乎
這篇文章的最後部分有提到解決方法 —— 如何無框架時進行拖放移動。
最後，看看他的成品：
以及我做出來的樣子：
完結。
沒有吐槽、抱怨和廢話的總結部分：
- 拖出 BunifuElipse 元件
- 拖出 Panel 元件
- Dock 改為 Left
- 拖出 BunifuGradientPanel 元件
- Dock 改為 Left
- GradientBottomLeft 改為 40, 177, 231
- GradientBottomRight 改為 184, 31, 141
- GradientTopLeft 改為 31, 65, 154
- GradientTopRight 改為 Black
- 拖出 BunifuFlatButton 元件
- 調整橫向闊度，使其貼合容器
- Normalcolor 改為 Transparent
- OnHovercolor 改成 100, 80, 36, 95
- isTab 改為 True
- Activecolor 改為 50, 80, 36, 95
- TextFont 改為 Century Gothic, 11pt
- IconVisible 改為 False
- IconRightVisible 改為 False （不知道改這個有什麼用
- Text 改為 Home，然後在前面加入空格，強行調整位置
- Textcolor 改為 224, 224, 224
- 完成後，複製五個放在下面
- 把排在第一的那個，selected 改為 True
- 依次序把二、三、四、五、六的 Text 改為：
- Profile
- Messages
- Friends
- Notifications
- Exit
- 排版如下：
9. 拖出 Panel 元件，放在右邊
___1. Dock 改為 Fill___2. BackColor 改為 224, 224, 22410. 拖出 PictureBox 元件___1. 選擇影像，影片準備了圖像，我沒有，跳過11. 拖出 BunifuCustomLabel 元件，放在圖像下方___1. Text 改為 Bunifu UI Locked___2. ForeColor 改為 64, 64, 64___3. Font 改為 Century Gothic, 16pt12. 拖出 BunifuThinButton2 元件，放在圖像和文字下方。___1. ButtonText 改為 Buy___2. IdleForecolor 改為 65, 52, 105___3. IdleLineColor 改為 65, 52, 105___4. IdleFillColor 改為 224, 224, 224___5. IdleCornerRadius 改為 30___6. Font 改為 Century Gothic, 10pt___7. ActiveFillColor 改為 65, 52, 105___8. ActiveLineColor 改為 65, 52, 10513. 我到這裡就停下了，後面似乎只是左上角加一個圖像。14. 並且加入 BunifuDragControl 元件使它可拖放15. 不過不知道為什麼在我的電腦上不生效16. 所以我還是自己解決：____C# Window Form 筆記 - Bunifu 元件開發用戶界面，幾個問題，無框架拖放移動 - 知乎____這篇文章的最後部分有提到解決方法 —— 如何無框架時進行拖放移動。到這裡也是差不多了。
如果幫到你的話，點個贊。
如果你發現有錯漏的地方，請通知我，或者留言矯正。
謝謝。OW<
推薦閱讀：
