c# 从0实现一个温湿度监测的小工具 (9)

280 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第11天,点击查看活动详情

本章节,将主要讲述页面的布局和自适应。

组建基本的页面框架

基本的页面将分为工具栏,侧边栏,和工作区三部分
如下如所示

image.png

工具栏

主要提供基本的操作选项,包括系统设备,日志查询,帮助信息等

修改界面

新建一个文件夹叫做form
再form中新建立一个窗口叫做mainform用来作为主窗口
修改标题:温湿度小工具
打开工具栏,拖入一个menustrip,dock属性设置为top 如下:

image.png 接着拖一个panel到menu下方,dock依旧是top
背景色为:亮白色,高度设定为5

增加工具选项

再menu中增加三个选项,系统设置,日志,和帮助,搞定如下:

image.png

侧边栏

侧边栏的作用是根据不同的选项,展示不同的可操作子菜单。

修改界面

拖入一个treeview,docker设置为left,宽度为:200

image.png

拖入一个panel,docker设置为left,宽度5

手动添加按钮(目前针对温湿度设备)

image.png 点击treeview旁边的三角形操作按钮,进入节点编辑
添加实时数据,历史数据,数据报表三个根节点

代码修改

工具栏按钮点击回调

根据之前的方法,逐一实现系统设置,日志,帮助的回调

系统设置

功能:弹出一个窗口,实现串口配置和打开
新建文件夹,Sysconf,实现一个窗口类,sysconf
界面如下:

image.png

回调函数实现:

        /// <summary>
        /// 系统设置回调
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void 系统设置ToolStripMenuItem_Click(object sender, EventArgs e)
        {
            Sysconf confwin = new Sysconf();
            confwin.ShowDialog();
        }

日志

把之前章节的日志按钮代码copy过来

        /// <summary>
        /// 日志
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void 日志ToolStripMenuItem_Click(object sender, EventArgs e)
        {
            string date = DateTime.Now.ToString("yyyy-MM");
            //默认配置文件地址
            string basedir = $"{AppDomain.CurrentDomain.BaseDirectory}logs\\{date}\\";
            //MessageBox.Show(basedir);
            //打开对话框
            OpenFileDialog ofd = new OpenFileDialog();
            ofd.InitialDirectory = basedir;
            if (ofd.ShowDialog() == DialogResult.OK)
            {
                try
                {
                    string file = ofd.FileName;
                    System.Diagnostics.Process.Start("notepad.exe", file);
                }
                catch
                {
                    MessageBox.Show("打开日志失败,系统中没找到记事本程序");
                }
            }
        }

帮助

功能:弹出一个窗口,显示帮助信息
新建about文件夹,创建一个aboutwein
窗体如下(一个group里面嵌套一个richtext窗体):

image.png

回调函数:

        /// <summary>
        /// 关于
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void 关于ToolStripMenuItem_Click(object sender, EventArgs e)
        {
            About myabout = new About();
            myabout.ShowDialog();
        }

修改启动main

        /// <summary>
        ///  The main entry point for the application.
        /// </summary>
        [STAThread]
        static void Main()
        {
            Application.SetHighDpiMode(HighDpiMode.SystemAware);
            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);
            //Application.Run(new Form1());
            Application.Run(new MainFrom());
        }

测试

image.png

image.png

image.png

image.png

下一节:我们具体实现新建窗体的逻辑,以及把之前的表格和曲线显示集成进来