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

news/2024/9/22 14:34:42/

目录

  • 前言
  • 一、页面效果
  • 二、布局设计
    • 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# ][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类

在这里插入图片描述
类里面，编写固定的颜色数组，让界面切换的时候，实现页面的颜色变化【代码如下：】

    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()
namespace ZHCHwindows_1
{public partial class Form1 : Form{//Fieldsprivate Button currentButton;private Random random;private int tempIndex;public Form1(){InitializeComponent();random = new Random();}//Methodsprivate 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）我们改变按钮的字体大小。
最终实现：
在这里插入图片描述

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

        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()
代码如下：【只选其一展示】

        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中增加一个改变颜色亮度方法【代码如下：】
        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()方法中调用【代码如下】
        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的方法
        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. 按钮点击事件

  • 刚换点击事件为：页面转换【其中一个的代码如下图：】
        private void btnProducts_Click(object sender, EventArgs e){OpenChildForm(new Forms.FormProduct(), sender);}

Step6. 当前效果

在这里插入图片描述

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

Step1. 按钮和主题色同色

  • 在ThemeColor.cs中添加如下代码
        public static Color PrimaryColor { get; set; }public static Color SecondaryColor { get; set; }
  • 在Form1.cs中修改ActivativeButton()方法，最后代码如下
        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中，添加页面的颜色变换方法【以其为例子，代码如下】
    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代码如下：】
        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章编写+代码上传

http://www.ppmy.cn/news/1509097.html

相关文章

Unity 编写自己的aar库，接收Android广播（broadcastReceiver）并传递到Unity

Unity 编写自己的aar库，接收Android广播（broadcastReceiver）并传递到Unity

编写本文是因为找了很多文章&#xff0c;都比较片段&#xff0c;不容易理解&#xff0c;对于Android新手来说理解起来不友好。我这里写了一个针对比较小白的文章&#xff0c;希望有所帮助。 Android端 首先还是先来写Android端&#xff0c;我们新建一个Android空项目&#xf…
阅读更多...
spring data：核心概念与应用（1）

spring data：核心概念与应用（1）

文章目录 核心概念定义Repository接口Repository 微调 投影 使用过 JPA 的同学比较了解在 Spring 体系的 web 服务开发中&#xff0c;有个比较方便的 dao 工具 repository&#xff0c;并伴随着 Entity 形成的一系列方法能大大加快开发进程&#xff0c;本系列就以 Spring Data 系…
阅读更多...
MTF-SFR总结/探讨

MTF-SFR总结/探讨

空间频率响应&#xff08;SFR&#xff09;定义 在iso12233:2000中&#xff0c;空间频率响应&#xff08;SFR&#xff09;测量被定义为通过分析倾斜黑白边缘附近的相机数据而测量的值。 图像清晰度测试方法 通过ISO12233测试图像清晰度的方法&#xff0c;一般有 TVline测试和S…
阅读更多...
basic_pentesting_2靶机

basic_pentesting_2靶机

靶机地址&#xff1a;Basic Pentesting: 2 ~ VulnHub 攻击机kali和靶机要设在同一网段&#xff0c;查看靶机MAC地址&#xff1a; 一、信息收集 扫描目标主机 arp-scan -l 使用nmap扫描靶机开放的端口&#xff1a; nmap -A -sS -sV -v -p- 192.168.7.127 浏览器访问80端口&a…
阅读更多...
git-贮藏区打补丁

git-贮藏区打补丁

1.显示所有贮藏 git stash list 2.将贮藏区的修改打补丁 git stash show -p stash{0} > patchName.patch commit打补丁 git 生成补丁文件及打补丁_git 生成指定目录补丁-CSDN博客 git patch的使用方法_git pattch-CSDN博客
阅读更多...
STM32低功耗与备用备份区域

STM32低功耗与备用备份区域

STM的备份备用区域其实就是两个区块&#xff1a;BKP和RTC。低功耗则其实是STM32四种模式中的三种耗能很低的模式。 目录 一&#xff1a;备用区域 1.BKP 2.RTC 二&#xff1a;低功耗模式 1.睡眠模式&#xff1a; 2.停机模式&#xff1a; 3.待机模式&#xff1a; 一&…
阅读更多...
oracle 保留两位小数

oracle 保留两位小数

在Oracle数据库中&#xff0c;保留两位小数可以通过多种函数实现&#xff0c;主要包括ROUND、TRUNC和TO_CHAR函数。每种函数都有其特定的使用场景和效果。 1. ROUND函数 ROUND函数用于对数值进行四舍五入操作&#xff0c;保留指定的小数位数。其基本语法为&#xff1a; ROUN…
阅读更多...
大数据面试SQL（七）：累加刚好超过各省GDP40%的地市名称

大数据面试SQL（七）：累加刚好超过各省GDP40%的地市名称

文章目录 累加刚好超过各省GDP40%的地市名称 一、题目 二、分析 三、SQL实战 四、样例数据参考 累加刚好超过各省GDP40%的地市名称 一、题目 现有各省地级市的gdp数据,求从高到低累加刚好超过各省GDP40%的地市名称&#xff0c;临界地市也需要。 例如&#xff1a; 浙江省…
阅读更多...
最新文章

Copyright @ 2022~2023