界面布局结构
1. 三区域经典布局
-
顶部工具栏 - 功能操作区
-
中部内容区 - 数据展示区（左右分割）
-
底部状态栏 - 状态信息区
2. 核心组件设计
工具栏 (ToolStrip)
工具按钮：添加代码 | 导入文件 | 删除选中 | 导出文件 | 分隔符 | 刷新
-
提供了完整的代码管理功能操作
-
使用分隔符合理分组功能
内容分割区 (SplitContainer)
左侧面板：
-
TreeView树形视图 - 用于代码分类管理 -
灰色背景 (
Color.FromArgb(240, 240, 240)) 增强视觉区分
右侧面板：
-
DataGridView数据网格 - 显示代码列表 -
白色背景，全行选择模式
-
自动调整列宽，隐藏行标题
状态栏 (StatusStrip)
-
显示"就绪"状态信息
-
提供操作反馈
设计优点
-
功能完整性
-
涵盖了代码管理的核心操作流程
-
分类浏览 + 列表展示的经典组合
-
-
用户体验优化
-
合理的控件间距和边距设置
-
清晰的视觉层次
-
响应式布局（DockStyle.Fill）
-
-
代码结构清晰
-
规范的WinForms控件命名
-
完整的事件处理框架
-
项目结构
代码收藏管理器/
├── Program.cs # 应用程序入口点
├── Form1.cs # 主窗体业务逻辑
├── Form1.Designer.cs # 主窗体界面设计
└── 收藏夹3.csproj # 项目配置文件详细设计说明
界面布局设计
1. 三段式经典布局
// 顶部 - 工具栏区域
toolStrip1.Dock = DockStyle.Top;
// 中部 - 内容显示区域
splitContainer1.Dock = DockStyle.Fill;
// 底部 - 状态信息区域
statusStrip1.Dock = DockStyle.Bottom;2. 分割容器设计
splitContainer1.SplitterDistance = 130; // 左侧分类树宽度
splitContainer1.SplitterWidth = 3; // 分割条宽度
splitContainer1.Panel1.BackColor = Color.FromArgb(240, 240, 240); // 左侧背景色3. 数据展示优化
dataGridViewCodes.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill; // 列自动填充
dataGridViewCodes.SelectionMode = DataGridViewSelectionMode.FullRowSelect; // 整行选择
dataGridViewCodes.ReadOnly = true; // 只读模式4. 主窗体界面设计完整代码
namespace 收藏夹3
{
partial class Form1
{
/// <summary>
/// 必需的设计器变量。
/// 用于存储窗体中所有组件的容器
/// </summary>
private System.ComponentModel.IContainer components = null;
/// <summary>
/// 清理正在使用的所有资源。
/// 当窗体关闭时自动调用，确保资源正确释放
/// </summary>
/// <param name="disposing">如果应释放托管资源，为 true；否则为 false。</param>
protected override void Dispose(bool disposing)
{
// 如果正在释放并且组件不为空
if (disposing && (components != null))
{
// 释放所有组件资源
components.Dispose();
}
// 调用基类的释放方法
base.Dispose(disposing);
}
#region Windows Form Designer generated code
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// 这是Windows窗体设计器自动生成的代码
/// </summary>
private void InitializeComponent()
{
// 创建分割容器控件 - 用于将界面分为左右两部分
splitContainer1 = new SplitContainer();
// 创建树形视图控件 - 用于显示代码分类
treeViewCategories = new TreeView();
// 创建数据网格视图控件 - 用于显示代码列表
dataGridViewCodes = new DataGridView();
// 创建工具栏控件 - 顶部功能按钮区域
toolStrip1 = new ToolStrip();
// 创建工具栏按钮 - 添加代码功能
btnAddCode = new ToolStripButton();
// 创建工具栏按钮 - 导入文件功能
btnImportFiles = new ToolStripButton();
// 创建工具栏按钮 - 删除选中功能
btnDeleteSelected = new ToolStripButton();
// 创建工具栏按钮 - 导出文件功能
btnExportFiles = new ToolStripButton();
// 创建工具栏分隔符 - 用于分组按钮
toolStripSeparator1 = new ToolStripSeparator();
// 创建工具栏按钮 - 刷新功能
btnRefresh = new ToolStripButton();
// 创建状态栏控件 - 底部状态信息区域
statusStrip1 = new StatusStrip();
// 创建状态栏标签 - 显示状态文本
toolStripStatusLabel1 = new ToolStripStatusLabel();
// 开始初始化分割容器
((System.ComponentModel.ISupportInitialize)splitContainer1).BeginInit();
// 开始配置左侧面板
splitContainer1.Panel1.SuspendLayout();
// 开始配置右侧面板
splitContainer1.Panel2.SuspendLayout();
// 开始配置分割容器本身
splitContainer1.SuspendLayout();
// 开始初始化数据网格视图
((System.ComponentModel.ISupportInitialize)dataGridViewCodes).BeginInit();
// 开始配置工具栏
toolStrip1.SuspendLayout();
// 开始配置状态栏
statusStrip1.SuspendLayout();
// 开始配置主窗体
SuspendLayout();
//
// splitContainer1 - 主分割容器
//
// 设置分割容器填充整个窗体客户区
splitContainer1.Dock = DockStyle.Fill;
// 设置分割容器位置（从工具栏下方开始）
splitContainer1.Location = new Point(0, 25);
// 设置分割容器名称
splitContainer1.Name = "splitContainer1";
//
// splitContainer1.Panel1 - 左侧面板（分类树区域）
//
// 设置左侧面板背景色为浅灰色
splitContainer1.Panel1.BackColor = Color.FromArgb(240, 240, 240);
// 在左侧面板中添加树形视图控件
splitContainer1.Panel1.Controls.Add(treeViewCategories);
// 设置左侧面板内边距为5像素
splitContainer1.Panel1.Padding = new Padding(5);
//
// splitContainer1.Panel2 - 右侧面板（代码列表区域）
//
// 在右侧面板中添加数据网格视图控件
splitContainer1.Panel2.Controls.Add(dataGridViewCodes);
// 设置右侧面板内边距为5像素
splitContainer1.Panel2.Padding = new Padding(5);
// 设置分割容器大小（宽800，高373像素）
splitContainer1.Size = new Size(800, 373);
// 设置分割条位置，左侧面板宽度为130像素
splitContainer1.SplitterDistance = 130;
// 设置分割条宽度为3像素
splitContainer1.SplitterWidth = 3;
// 设置Tab键顺序索引
splitContainer1.TabIndex = 0;
//
// treeViewCategories - 分类树形视图
//
// 设置树形视图填充整个左侧面板
treeViewCategories.Dock = DockStyle.Fill;
// 设置树形视图位置
treeViewCategories.Location = new Point(5, 5);
// 设置树形视图名称
treeViewCategories.Name = "treeViewCategories";
// 设置树形视图大小（宽120，高363像素）
treeViewCategories.Size = new Size(120, 363);
// 设置Tab键顺序索引
treeViewCategories.TabIndex = 0;
// 绑定树形视图节点选择后的事件
//treeViewCategories.AfterSelect += treeViewCategories_AfterSelect;
//
// dataGridViewCodes - 代码数据网格视图
//
// 禁止用户添加行（只能通过程序添加）
dataGridViewCodes.AllowUserToAddRows = false;
// 禁止用户删除行（只能通过程序删除）
dataGridViewCodes.AllowUserToDeleteRows = false;
// 设置列自动调整模式为填充（列宽自动填满可用空间）
dataGridViewCodes.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill;
// 设置背景色为白色
dataGridViewCodes.BackgroundColor = Color.White;
// 设置列标题高度自动调整
dataGridViewCodes.ColumnHeadersHeightSizeMode = DataGridViewColumnHeadersHeightSizeMode.AutoSize;
// 设置数据网格填充整个右侧面板
dataGridViewCodes.Dock = DockStyle.Fill;
// 设置数据网格位置
dataGridViewCodes.Location = new Point(5, 5);
// 设置数据网格名称
dataGridViewCodes.Name = "dataGridViewCodes";
// 设置为只读模式（用户不能直接编辑单元格）
dataGridViewCodes.ReadOnly = true;
// 隐藏行标题列（左侧的灰色小三角列）
dataGridViewCodes.RowHeadersVisible = false;
// 设置选择模式为整行选择（点击时选中整行）
dataGridViewCodes.SelectionMode = DataGridViewSelectionMode.FullRowSelect;
// 设置数据网格大小（宽657，高363像素）
dataGridViewCodes.Size = new Size(657, 363);
// 设置Tab键顺序索引
dataGridViewCodes.TabIndex = 0;
//
// toolStrip1 - 顶部工具栏
//
// 向工具栏添加所有工具项（按钮和分隔符）
toolStrip1.Items.AddRange(new ToolStripItem[] {
btnAddCode, // 添加代码按钮
btnImportFiles, // 导入文件按钮
btnDeleteSelected, // 删除选中按钮
btnExportFiles, // 导出文件按钮
toolStripSeparator1, // 分隔符
btnRefresh // 刷新按钮
});
// 设置工具栏位置在窗体顶部（0,0坐标）
toolStrip1.Location = new Point(0, 0);
// 设置工具栏名称
toolStrip1.Name = "toolStrip1";
// 设置工具栏大小（宽800，高25像素）
toolStrip1.Size = new Size(800, 25);
// 设置Tab键顺序索引
toolStrip1.TabIndex = 1;
// 设置工具栏文本
toolStrip1.Text = "toolStrip1";
//
// btnAddCode - 添加代码按钮
//
// 设置图像透明色（如果没有图像时使用）
btnAddCode.ImageTransparentColor = Color.Magenta;
// 设置按钮名称
btnAddCode.Name = "btnAddCode";
// 设置按钮大小（宽60，高22像素）
btnAddCode.Size = new Size(60, 22);
// 设置按钮显示文本
btnAddCode.Text = "添加代码";
// 绑定按钮点击事件
btnAddCode.Click += btnAddCode_Click;
//
// btnImportFiles - 导入文件按钮
//
btnImportFiles.ImageTransparentColor = Color.Magenta;
btnImportFiles.Name = "btnImportFiles";
btnImportFiles.Size = new Size(60, 22);
btnImportFiles.Text = "导入文件";
btnImportFiles.Click += btnImportFiles_Click;
//
// btnDeleteSelected - 删除选中按钮
//
btnDeleteSelected.ImageTransparentColor = Color.Magenta;
btnDeleteSelected.Name = "btnDeleteSelected";
btnDeleteSelected.Size = new Size(60, 22);
btnDeleteSelected.Text = "删除选中";
btnDeleteSelected.Click += btnDeleteSelected_Click;
//
// btnExportFiles - 导出文件按钮
//
btnExportFiles.ImageTransparentColor = Color.Magenta;
btnExportFiles.Name = "btnExportFiles";
btnExportFiles.Size = new Size(60, 22);
btnExportFiles.Text = "导出文件";
btnExportFiles.Click += btnExportFiles_Click;
//
// toolStripSeparator1 - 工具栏分隔符
//
// 设置分隔符名称
toolStripSeparator1.Name = "toolStripSeparator1";
// 设置分隔符大小（宽6，高25像素）
toolStripSeparator1.Size = new Size(6, 25);
//
// btnRefresh - 刷新按钮
//
btnRefresh.ImageTransparentColor = Color.Magenta;
btnRefresh.Name = "btnRefresh";
// 刷新按钮稍小一些（宽36，高22像素）
btnRefresh.Size = new Size(36, 22);
btnRefresh.Text = "刷新";
btnRefresh.Click += btnRefresh_Click;
//
// statusStrip1 - 底部状态栏
//
// 向状态栏添加状态标签
statusStrip1.Items.AddRange(new ToolStripItem[] { toolStripStatusLabel1 });
// 设置状态栏位置在窗体底部
statusStrip1.Location = new Point(0, 398);
// 设置状态栏名称
statusStrip1.Name = "statusStrip1";
// 设置状态栏大小（宽800，高22像素）
statusStrip1.Size = new Size(800, 22);
// 设置Tab键顺序索引
statusStrip1.TabIndex = 2;
// 设置状态栏文本
statusStrip1.Text = "statusStrip1";
//
// toolStripStatusLabel1 - 状态栏标签
//
// 设置状态标签名称
toolStripStatusLabel1.Name = "toolStripStatusLabel1";
// 设置状态标签大小（宽32，高17像素）
toolStripStatusLabel1.Size = new Size(32, 17);
// 设置状态标签初始文本
toolStripStatusLabel1.Text = "就绪";
//
// Form1 - 主窗体
//
// 设置自动缩放尺寸（设计时的分辨率）
AutoScaleDimensions = new SizeF(7F, 17F);
// 设置自动缩放模式为根据字体缩放
AutoScaleMode = AutoScaleMode.Font;
// 设置窗体客户区大小（宽800，高420像素）
ClientSize = new Size(800, 420);
// 向窗体添加分割容器（位于最底层）
Controls.Add(splitContainer1);
// 向窗体添加状态栏（位于中层）
Controls.Add(statusStrip1);
// 向窗体添加工具栏（位于最顶层）
Controls.Add(toolStrip1);
// 设置窗体名称
Name = "Form1";
// 设置窗体标题文本
Text = "代码收藏管理器";
// 恢复分割容器左侧面板的布局
splitContainer1.Panel1.ResumeLayout(false);
// 恢复分割容器右侧面板的布局
splitContainer1.Panel2.ResumeLayout(false);
// 结束分割容器的初始化
((System.ComponentModel.ISupportInitialize)splitContainer1).EndInit();
// 恢复分割容器的布局
splitContainer1.ResumeLayout(false);
// 结束数据网格视图的初始化
((System.ComponentModel.ISupportInitialize)dataGridViewCodes).EndInit();
// 恢复工具栏的布局
toolStrip1.ResumeLayout(false);
// 执行工具栏的布局计算
toolStrip1.PerformLayout();
// 恢复状态栏的布局
statusStrip1.ResumeLayout(false);
// 执行状态栏的布局计算
statusStrip1.PerformLayout();
// 恢复窗体的布局
ResumeLayout(false);
// 执行窗体的布局计算
PerformLayout();
}
#endregion
// 控件字段声明区域
// 这些字段对应在InitializeComponent方法中创建的控件实例
/// <summary>
/// 主分割容器 - 将界面分为左右两部分
/// </summary>
private SplitContainer splitContainer1;
/// <summary>
/// 分类树形视图 - 显示代码分类结构
/// </summary>
private TreeView treeViewCategories;
/// <summary>
/// 代码数据网格视图 - 显示代码片段列表
/// </summary>
private DataGridView dataGridViewCodes;
/// <summary>
/// 顶部工具栏 - 包含所有功能按钮
/// </summary>
private ToolStrip toolStrip1;
/// <summary>
/// 添加代码按钮 - 用于打开添加代码对话框
/// </summary>
private ToolStripButton btnAddCode;
/// <summary>
/// 导入文件按钮 - 用于导入外部代码文件
/// </summary>
private ToolStripButton btnImportFiles;
/// <summary>
/// 删除选中按钮 - 用于删除选中的代码片段
/// </summary>
private ToolStripButton btnDeleteSelected;
/// <summary>
/// 导出文件按钮 - 用于将代码导出为文件
/// </summary>
private ToolStripButton btnExportFiles;
/// <summary>
/// 刷新按钮 - 用于刷新界面和数据
/// </summary>
private ToolStripButton btnRefresh;
/// <summary>
/// 工具栏分隔符 - 用于对按钮进行分组
/// </summary>
private ToolStripSeparator toolStripSeparator1;
/// <summary>
/// 底部状态栏 - 显示程序状态信息
/// </summary>
private StatusStrip statusStrip1;
/// <summary>
/// 状态栏标签 - 显示具体的状态文本
/// </summary>
private ToolStripStatusLabel toolStripStatusLabel1;
}
}5.主窗体业务逻辑只是正常显示界面代码
namespace 收藏夹3
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void btnAddCode_Click(object sender, EventArgs e)
{
}
private void btnImportFiles_Click(object sender, EventArgs e)
{
}
private void btnDeleteSelected_Click(object sender, EventArgs e)
{
}
private void btnExportFiles_Click(object sender, EventArgs e)
{
}
private void btnRefresh_Click(object sender, EventArgs e)
{
}
}
}
扫一扫
3799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
