马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
×
本项目标C#内容是本身跟做的，本身做的内容已经打包，可以通过本身跟做写的Dashboard界面，C#下的winform模式下载得到，但是须要淹灭3个积分
前言
这是篇跟练文章，重要是记录本身对视频中内容的复刻，旨在通过复刻实现对Winform中的界面布局的相识。
记录泉源：[C#][Winform]怎样创建一个炫酷的扁平化风格Dashboard
下载文件：本身跟做写的Dashboard界面，C#下的winform模式
一、左边设置和步调
界面
Form
- StartPosition：CenterScreen
- FormBorderStyle：None
- BackColor：46,51,73
- Size：951,577
Panel1
- BackColor：24,30,54
- Dock：Left
- Size:186,577
Panel2
PictureBox1
- 参数直接点击下图中符号设置
- 详细而言，是设置了Image和SizeMode的属性。
- Location：60,20
Label1
- ForeColor：0, 126, 249
- Text：UserName
- Font中设置如下：
Label2
- ForeColor：158,161,178
- BackColor：Transparent
- Text：Some User Text Here
- Font设置如下：
Button1
- Name：btnDashboard
- Text：Dashboard
- FlatSytle：Flat
- FlatAppearance中的BorderSize：0
- ForeColor：0,126,249
- Font设置如下：
- Bold：True
- Dock：Top
- Image：更换图标
- Size：186,42
- TextImageRelation：TextBeforeImage
以上动作做好后，再次将Dock改为：None 【目标是：将这个Button1模块复制出多个】
但是上面复制好后，仍然是将Dock改回为Top
Button2
- Name：btnAnalytics
- Image：更换图
- Text：Analytics
- Dock：Top
Button3
- Name：btnCalender
- Text：Calender
- Dock：Top
Button4
- Name：btnContectUs
- Text：ContectUs
Button5
- Name：btnSettings
- Text：Settings
- Dock：bottom
Panel3
- Name：PnlNav
- BackColor：0, 126, 249
- Size：3,194
- Location：移动Panel3到达符合的位置【看图】
步调
Step1.
Form创建，设置Form参数
创建Panel1，设置参数
创建Panel2，放入Panel1中设置参数，
创建PictureBox1，放入Panel2中，设置参数
创建Label1，设置参数，放在在PictureBox1下
此时结果为：
Step2.
创建Label2，设置参数，放置在Label1的正下方。
创建Button1，设置参数。
以Button1为模板，复制出多个Button
当前结果如下所示：【我的home.png不知道为啥很大，无法设置Zoom属性
厥后办理了，发现这里只能通过改变.png图片自身的巨细来实现调治。
Step3.
对这些button2~button4举行属性设置。将Panel3放在符合的位置，终极结果如下所示：
Step4
双击Form界面，进入Form.cs界面中编写代码
结果为：
- using System.Runtime.InteropServices;
- public partial class Form1 : Form
- {
- [DllImport("Gdi32.dll", EntryPoint = "CreateRoundRectRgn")]
- private static extern IntPtr CreateRoundRectRgn
- (
- int nLeftRect,
- int nTopRect,
- int nRightRect,
- int nBottomRect,
- int nWidthEllipse,
- int nHeightEllipse
- );
- public Form1()
- {
- InitializeComponent();
- Region = System.Drawing.Region.FromHrgn(CreateRoundRectRgn(0, 0, Width, Height, 25, 25));
- pnlNav.Height = btnDashboard.Height;
- pnlNav.Top = btnDashboard.Top;
- pnlNav.Left = btnDashboard.Left;
- btnDashboard.BackColor = Color.FromArgb(46, 51, 73);
- }
- }
Step5
设置buton1~button5的点击事故。让Panel跟踪对应的button。
- 设置了Panel的跟随
- 设置了点击后的BackColor变革。【但是点击后仍旧保持这个颜色，以是反面要设置离开后的事故去规复颜色】
- private void btnDashboard_Click(object sender, EventArgs e)
- {
- pnlNav.Height = btnDashboard.Height;
- pnlNav.Top = btnDashboard.Top;
- pnlNav.Left = btnDashboard.Left;
- btnDashboard.BackColor = Color.FromArgb(46, 51, 73);
- }
- private void btnAnalytics_Click(object sender, EventArgs e)
- {
- pnlNav.Height = btnAnalytics.Height;
- pnlNav.Top = btnAnalytics.Top;
- pnlNav.Left=btnAnalytics.Left;
- btnAnalytics.BackColor = Color.FromArgb(46, 51, 73);
- }
- private void btnCalender_Click(object sender, EventArgs e)
- {
- pnlNav.Height=btnCalender.Height;
- pnlNav.Top=btnCalender.Top;
- pnlNav.Left= btnCalender.Left;
- btnCalender.BackColor = Color.FromArgb(46, 51, 73);
- }
- private void btnContectUs_Click(object sender, EventArgs e)
- {
- pnlNav.Height = btnContectUs.Height;
- pnlNav.Top = btnContectUs.Top;
- pnlNav.Left=btnContectUs.Left;
- btnContectUs.BackColor = Color.FromArgb(46, 51, 73);
- }
- private void btnSettings_Click(object sender, EventArgs e)
- {
- pnlNav.Height = btnSettings.Height;
- pnlNav.Top=btnSettings.Top;
- pnlNav.Left = btnSettings.Left;
- btnSettings.BackColor = Color.FromArgb(46, 51, 73);
- }
- private void btnDashboard_Leave(object sender, EventArgs e)
- {
- btnDashboard.BackColor = Color.FromArgb(24, 30, 54);
- }
- private void btnAnalytics_Leave(object sender, EventArgs e)
- {
- btnAnalytics.BackColor = Color.FromArgb(24, 30, 54);
- }
- private void btnCalender_Leave(object sender, EventArgs e)
- {
- btnCalender.BackColor = Color.FromArgb(24, 30, 54);
- }
- private void btnContectUs_Leave(object sender, EventArgs e)
- {
- btnContectUs.BackColor = Color.FromArgb(24, 30, 54);
- }
- private void btnSettings_Leave(object sender, EventArgs e)
- {
- btnSettings.BackColor = Color.FromArgb(24, 30, 54);
- }
属性设置
Label4
- font设置如下：
- ForeColor：158,161,176
- Location：20,17
- Text：Dashboard
TextBox1
- Text：Search For Somethings
- Size：292, 28
- MultiLine：True
- ForeColor：200,200,200
- Font设置：
- BackColor：74, 79, 99
button1
- Text：X
- Size：25,25
- ForeColor：White
- FlatStyle：Flat
- FlatAppearence下的BorderSize：0
Panel5
- Size：258,130
- BackColor：37,42,64
Label5
- ForeColor：White
- Text：Earning
- Font：
Label6
- Text：$12345
- ForeColor：0,146,249
- Font:
Label7
- Text：Details of Last 28 Days
- Font:
- ForeColor：159,151,176
PictureBox2
步调
Step1.
创建Panel4，用于遍布右边窗口界面。
创建Label3，放入Panel4左上角。
创建TextBox1，放在左边
创建Button放在TextBox1的右边
创建Panel5，放在Label3的下边
创建Label4和Label5，Label6和Label7放在Panel4中
创建PictureBox2，放在Panel5中。
当前结果如下图所示：
Step2.
复制Step1.中的内容，只须要更改色彩和图片即可。
ForeColor：50, 226, 178
Step3.
创建个button，用于体现进度图。【视频中是用了CircularProgressBar组件，很遗憾我没有，只要用贴图在button上的方式实现，大概用PictureBox来实现】
三、终极结果
筹划图：
运行图：
更新时间
|
发表于 2026-2-19 21:49:40