前言
上面的界面布局是值得学习的，页面间的切换也是不错的。
自己跟着做了下，代码上传了，可以下载【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
{
//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）我们改变按钮的字体大小。
最终实现：
通过激活/突出显示按钮，我们增加了字体缩放效果的大小
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章编写+代码上传
扫一扫
1147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
