前言

学习视频：
[ C# ][Winform]炫酷扁平UI,随机多色彩切换,活动窗口高亮按钮

上面的界面布局是值得学习的，页面间的切换也是不错的。
自己跟着做了下，代码上传了，可以下载【C#主界面设计】

一、页面效果

二、布局设计

2.1 左边菜单栏搭建框架

Step1. panelMenu ：

• Dock：left
• BackColor：51,51,76
  

Step2. panelLogo

• Dock：top
• BackColor：39,39,58 [偏黑点]
  

Step3. button模板

• Dock：top
• FlatStyle：Flat
• FlatAppearance：
  • BoardSize：0
• ForeColor：Gainsboro [web中]
• Image：插入一张.png的icon图片
• ImageAlign：MiddleLeft
• TextImageRelation：ImageBeforeText
  

Step4. 复制button

• 首先，复制黏贴
• Padding：Left：12
  
  

Step5. 微调Button

• Font：Microsoft Sans Serif, 11pt
  

2.2 界面颜色变换

Step1. ThemeColor类

类里面，编写固定的颜色数组，让界面切换的时候，实现页面的颜色变化【代码如下：】

internalclassThemeColor{publicstaticList<string> ColorList =newList<string>(){"#3F51B5","#009688","#FF5722","#607D8B","#FF9800","#9C27B0","#2196F3","#EA676C","#E41A4A","#5978BB","#018790","#0E3441","#00B0AD","#721D47","#EA4833","#EF937E","#F37521","#A12059","#126881","#8BC240","#364D5B","#C7DC5B","#0094BC","#E4126B","#43B76E","#7BCFE9","#B71C46"};}

Step2. From1.cs

• 编写颜色变换方法SelectThemeColor()

namespaceZHCHwindows_1{publicpartialclassForm1:Form{//FieldsprivateButton currentButton;privateRandom random;privateint tempIndex;publicForm1(){InitializeComponent(); random =newRandom();}//MethodsprivateColorSelectThemeColor(){int index = random.Next(ThemeColor.ColorList.Count);//找到与当前界面颜色不同的while(tempIndex == index){ index = random.Next(ThemeColor.ColorList.Count);} tempIndex = index;string color = ThemeColor.ColorList[index];return ColorTranslator.FromHtml(color);}}}

Step3. 更换按钮点击颜色效果

1）我们为主题选择一个随机颜色（可选，你可以使用单一颜色来突出显示按钮）。
2）我们改变按钮的背景颜色。
3）我们改变按钮的字体颜色。
4）我们改变按钮的字体大小。
最终实现：

通过激活/突出显示按钮，我们增加了字体缩放效果的大小

privatevoidActivateButton(object btnSender){if(btnSender !=null){if(currentButton !=(Button)btnSender){DisableButton();Color color =SelectThemeColor(); currentButton =(Button)btnSender; currentButton.BackColor = color; currentButton.ForeColor = Color.White; currentButton.Font =newSystem.Drawing.Font("Microsoft Sans Serif",12.5F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point,((byte)(0)));}}}privatevoidDisableButton(){foreach(Control previousBtn in panelMenu.Controls){if(previousBtn.GetType()==typeof(Button)){ previousBtn.BackColor = Color.FromArgb(51,51,76); previousBtn.ForeColor = Color.Gainsboro; previousBtn.Font =newSystem.Drawing.Font("Microsoft Sans Serif",10F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point,((byte)(0)));}}}

2.3 按钮点击事件

这里直接给6个button创建点击事件，在点击事件中调用ActivateButton()
代码如下：【只选其一展示】

privatevoidbtnProducts_Click(object sender,EventArgs e){ActivateButton(sender);}

此时，左边的菜单栏已经配置完毕：

2.4 顶部title栏搭建

Step1. panelTitleBar

• Dock：Top
• BackColor：0,150,136
  

Step2. Label

• Name：lblTitle
• FontColor：White
• Font：Mongolian Baiti,16pt
• Anchor：None 【这个能实现，字体随窗口自适应大小】
  

Step3. Label

• Name: lblMenu
• FontColor：LightGray
• Font：Microsoft Sans Serif, 12pt
  

Step4. panelLogo的背景变换

• 在ThemeColor.cs中增加一个改变颜色亮度方法【代码如下：】

publicstaticColorChangeColorBrightness(Color color,double correctionFactor){double red = color.R;double green = color.G;double blue = color.B;//correction factor<0，则降低颜色亮度if(correctionFactor <0){ correctionFactor =1+ correctionFactor; red *= correctionFactor; green *= correctionFactor; blue *= correctionFactor;}else{ red =(255-red)*correctionFactor+red; green =(255-green)*correctionFactor+green; blue =(255-blue)*correctionFactor+blue;}return Color.FromArgb(color.A,(byte)red,(byte)green,(byte)blue);}

• 在Form1.cs中的ActivateButton()方法中调用【代码如下】

privatevoidActivateButton(object btnSender){if(btnSender !=null){if(currentButton !=(Button)btnSender){DisableButton();Color color =SelectThemeColor(); currentButton =(Button)btnSender; currentButton.BackColor = color; currentButton.ForeColor = Color.White; currentButton.Font =newSystem.Drawing.Font("Microsoft Sans Serif",12.5F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point,((byte)(0)));// 上方栏的颜色变化 panelTitleBar.BackColor = color; panelLogo.BackColor = ThemeColor.ChangeColorBrightness(color,-0.3);}}}

2.5 布局效果展示

三、子界面

添加子窗体的容器面板

Step1. Panel

• Name：panelDesktopPane
• Dock：Fill
  

Step2. 打开新Form的方法

我们创造一个方法，实现在子panel中打开新的Forms

• 在Form1.cs中，创建打开子Form的方法

privateForm activeForm;/// <summary>/// 打开子Form/// </summary>/// <param name="childForm"></param>/// <param name="btnSender"></param>privatevoidOpenChildForm(Form childForm,object btnSender){if(activeForm !=null){ activeForm.Close();}ActivateButton(btnSender); activeForm = childForm; childForm.TopLevel =false; childForm.FormBorderStyle = FormBorderStyle.None; childForm.Dock = DockStyle.Fill;this.panelDesktopPane.Controls.Add(childForm);this.panelDesktopPane.Tag = childForm; childForm.BringToFront(); childForm.Show();//让lblTitle的标题和子Form的标题一样this.lblTitle.Text = childForm.Text;}

Step3. 创建子Form

• 添加"窗体(Windows窗体)"【如下图】
  
  

Step4. 子Form中布局

• 这里为了演示界面跳转的效果，所以布局很随意。【如下图：】
• 下面的部件，只有图中的四个的Anchor是改变的，其余不用变化。
  
• 之后创建其余子Form界面【如下图】
  

Step5. 按钮点击事件

• 刚换点击事件为：页面转换【其中一个的代码如下图：】

privatevoidbtnProducts_Click(object sender,EventArgs e){OpenChildForm(newForms.FormProduct(), sender);}

Step6. 当前效果

四、子Form细节设置【进阶】

Step1. 按钮和主题色同色

• 在ThemeColor.cs中添加如下代码

publicstaticColor PrimaryColor {get;set;}publicstaticColor SecondaryColor {get;set;}

• 在Form1.cs中修改ActivativeButton()方法，最后代码如下

privatevoidActivateButton(object btnSender){if(btnSender !=null){if(currentButton !=(Button)btnSender){DisableButton();Color color =SelectThemeColor(); currentButton =(Button)btnSender; currentButton.BackColor = color; currentButton.ForeColor = Color.White; currentButton.Font =newSystem.Drawing.Font("Microsoft Sans Serif",12.5F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point,((byte)(0)));// 上方栏的颜色变化 panelTitleBar.BackColor = color; panelLogo.BackColor = ThemeColor.ChangeColorBrightness(color,-0.3);// ThemeColor.PrimaryColor = color; ThemeColor.SecondaryColor = ThemeColor.ChangeColorBrightness(color,-0.3);}}}

• 在子界面FormProduct.cs中，添加页面的颜色变换方法【以其为例子，代码如下】

publicpartialclassFormProduct:Form{publicFormProduct(){InitializeComponent();}privatevoidFormProduct_Load(object sender,EventArgs e){LoadTheme();}privatevoidLoadTheme(){foreach(Control btns inthis.Controls){if(btns.GetType()==typeof(Button)){Button btn =(Button)btns; btn.BackColor = ThemeColor.PrimaryColor; btn.ForeColor = Color.White; btn.FlatAppearance.BorderColor = ThemeColor.SecondaryColor;}} label4.ForeColor = ThemeColor.SecondaryColor; label5.ForeColor = ThemeColor.PrimaryColor;}}

• 其余的子Form中也如上编写代码。

效果：

五、关闭按钮

一个关闭按钮，用于关闭子Form，并重置为默认值。

Step1. Button

• Name：btnCloseChildForm
• FlatStyle：Flat
• FlatAppearance：
• BorderSize：0
• Image：自己添加图片
• Dock：Left
  

Step2. Button点击事件

• 点击btnCloseChildForm后，关闭子Form。【Form1.cs代码如下：】

publicForm1(){InitializeComponent(); random =newRandom(); btnCloseChildForm.Visible =false;}privatevoidActivateButton(object btnSender){if(btnSender !=null){if(currentButton !=(Button)btnSender){DisableButton();Color color =SelectThemeColor(); currentButton =(Button)btnSender; currentButton.BackColor = color; currentButton.ForeColor = Color.White; currentButton.Font =newSystem.Drawing.Font("Microsoft Sans Serif",12.5F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point,((byte)(0)));// 上方栏的颜色变化 panelTitleBar.BackColor = color; panelLogo.BackColor = ThemeColor.ChangeColorBrightness(color,-0.3);// ThemeColor.PrimaryColor = color; ThemeColor.SecondaryColor = ThemeColor.ChangeColorBrightness(color,-0.3); btnCloseChildForm.Visible =true;}}}privatevoidbtnCloseChildForm_Click(object sender,EventArgs e){//activeForm不为null，说明已经有一个子窗体被打开。if(activeForm !=null){ activeForm.Close();Reset();}}privatevoidReset(){DisableButton(); lblTitle.Text ="HOME"; panelTitleBar.BackColor = Color.FromArgb(0,150,136); panelLogo.BackColor = Color.FromArgb(39,39,58); currentButton =null; btnCloseChildForm.Visible =false;}

效果：

六、在HOME添加LOGO【待补充，进阶】

更新时间

• 2024.08.13：创建+第一章编写
• 2024.08.14：第2,3，5章编写+代码上传