记录｜C#主界面设计【Web风格】

前言

学习视频：
[ 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章编写+代码上传

标签： c# 前端开发语言

本文转载自: https://blog.csdn.net/qq_41714549/article/details/141171993
版权归原作者 小白鼠零号 所有，如有侵权，请联系我们删除。

记录｜C#主界面设计【Web风格】

目录

前言

一、页面效果

二、布局设计

2.1 左边菜单栏搭建框架

Step1. panelMenu ：

Step2. panelLogo

Step3. button模板

Step4. 复制button

Step5. 微调Button

2.2 界面颜色变换

Step1. ThemeColor类

Step2. From1.cs

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

2.3 按钮点击事件

2.4 顶部title栏搭建

Step1. panelTitleBar

Step2. Label

Step3. Label

Step4. panelLogo的背景变换

2.5 布局效果展示

三、子界面

Step1. Panel

Step2. 打开新Form的方法

Step3. 创建子Form

Step4. 子Form中布局

Step5. 按钮点击事件

Step6. 当前效果

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

Step1. 按钮和主题色同色

效果：

五、关闭按钮

Step1. Button

Step2. Button点击事件

效果：

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

更新时间

发表评论

“记录｜C#主界面设计【Web风格】”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航