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

前言
一、页面效果
二、布局设计
- [2.1 左边菜单栏搭建框架](#2.1 左边菜单栏搭建框架)
- - [Step1. panelMenu ：](#Step1. panelMenu ：)
  - [Step2. panelLogo](#Step2. panelLogo)
  - [Step3. button模板](#Step3. button模板)
  - [Step4. 复制button](#Step4. 复制button)
  - [Step5. 微调Button](#Step5. 微调Button)
- [2.2 界面颜色变换](#2.2 界面颜色变换)
- - [Step1. ThemeColor类](#Step1. ThemeColor类)
  - [Step2. From1.cs](#Step2. From1.cs)
  - [Step3. 更换按钮点击颜色效果](#Step3. 更换按钮点击颜色效果)
- [2.3 按钮点击事件](#2.3 按钮点击事件)
- [2.4 顶部title栏搭建](#2.4 顶部title栏搭建)
- - [Step1. panelTitleBar](#Step1. panelTitleBar)
  - [Step2. Label](#Step2. Label)
  - [Step3. Label](#Step3. Label)
  - [Step4. panelLogo的背景变换](#Step4. panelLogo的背景变换)
- [2.5 布局效果展示](#2.5 布局效果展示)
三、子界面
- [Step1. Panel](#Step1. Panel)
- [Step2. 打开新Form的方法](#Step2. 打开新Form的方法)
- [Step3. 创建子Form](#Step3. 创建子Form)
- [Step4. 子Form中布局](#Step4. 子Form中布局)
- [Step5. 按钮点击事件](#Step5. 按钮点击事件)
- [Step6. 当前效果](#Step6. 当前效果)
四、子Form细节设置【进阶】
- [Step1. 按钮和主题色同色](#Step1. 按钮和主题色同色)
- 效果：
五、关闭按钮
- [Step1. Button](#Step1. Button)
- [Step2. Button点击事件](#Step2. Button点击事件)
- 效果：
六、在HOME添加LOGO【待补充，进阶】
更新时间

前言

学习视频：
[ 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类

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

csharp 复制代码

    internal class ThemeColor
    {
        public static List<string> ColorList = new List<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()

csharp 复制代码

namespace ZHCHwindows_1
{
    public partial class Form1 : Form
    {
        //Fields
        private Button currentButton;
        private Random random;
        private int tempIndex;
        public Form1()
        {
            InitializeComponent();
            random = new Random();
        }
        //Methods
        private Color SelectThemeColor()
        {
            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）我们改变按钮的字体大小。

最终实现：

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

csharp 复制代码

        private void ActivateButton(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 = new System.Drawing.Font("Microsoft Sans Serif", 12.5F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));

                }
            }
        }
        private void DisableButton()
        {
            foreach (Control previousBtn in panelMenu.Controls) {
                if (previousBtn.GetType() == typeof(Button))
                {
                    previousBtn.BackColor = Color.FromArgb(51, 51, 76);
                    previousBtn.ForeColor = Color.Gainsboro;
                    previousBtn.Font = new System.Drawing.Font("Microsoft Sans Serif", 10F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(0)));

                }
            }
        }

2.3 按钮点击事件

这里直接给6个button创建点击事件，在点击事件中调用ActivateButton()

代码如下：【只选其一展示】

csharp 复制代码

        private void btnProducts_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中增加一个改变颜色亮度方法【代码如下：】

csharp 复制代码

        public static Color ChangeColorBrightness(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()方法中调用【代码如下】

csharp 复制代码

        private void ActivateButton(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 = new System.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的方法

csharp 复制代码

        private Form activeForm;
        /// <summary>
        /// 打开子Form
        /// </summary>
        /// <param name="childForm"></param>
        /// <param name="btnSender"></param>
        private void OpenChildForm(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. 按钮点击事件

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

csharp 复制代码

        private void btnProducts_Click(object sender, EventArgs e)
        {
            OpenChildForm(new Forms.FormProduct(), sender);
        }

Step6. 当前效果

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

Step1. 按钮和主题色同色

在ThemeColor.cs中添加如下代码

csharp 复制代码

        public static Color PrimaryColor { get; set; }
        public static Color SecondaryColor { get; set; }

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

csharp 复制代码

        private void ActivateButton(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 = new System.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中，添加页面的颜色变换方法【以其为例子，代码如下】

csharp 复制代码

    public partial class FormProduct : Form
    {
        public FormProduct()
        {
            InitializeComponent();
        }
        private void FormProduct_Load(object sender, EventArgs e)
        {
            LoadTheme();
        }
        private void LoadTheme()
        {
            foreach (Control btns in this.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代码如下：】

csharp 复制代码

        public Form1()
        {
            InitializeComponent();
            random = new Random();
            btnCloseChildForm.Visible = false;
        }
                private void ActivateButton(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 = new System.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;
                }
            }
        }
        
        private void btnCloseChildForm_Click(object sender, EventArgs e)
        {
            //activeForm不为null，说明已经有一个子窗体被打开。
            if (activeForm != null)
            {
                activeForm.Close();
                Reset();
            }
        }

        private void Reset()
        {
            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#主界面设计【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【待补充，进阶】

更新时间