C#窗口程序 UI模板【简约风、去边框】

设计

• 左边绿色部分可以拖拽窗口，白色区域上方也可以3个按钮实现
• 最小化、最大化窗口化交换、关闭3个按钮鼠标经过背景色会变化，置于右上角
• 左侧选项卡按钮点击后，右侧下方的窗口可以切换
• 左侧被选中的选项卡背景色变为白色

SplitContainer的分界线可以通过设置Panel的背景色和Form的背景色相同去除

窗口大小：

最大化：

动图浏览：

---

窗口

无边框

窗口出现在屏幕中心

大小

---

创建一个塞满Form的SplitContainer

大小和Form相同

设置分区长度

宽度为1

固定左分区

设置不能通过鼠标修改两个分区的宽度

TabStop改为False

---

Panel1

BackColor设置为：203, 233, 207

添加鼠标拖拽功能

        private Point offset;

        /// <summary>
        /// 拖拽窗口：点击
        /// </summary>
        /// <param name="e"></param>
        private void DragForm_Click(MouseEventArgs e)
        {
            if (MouseButtons.Left != e.Button) return;
            Point cur = this.PointToScreen(e.Location);
            offset = new Point(cur.X - this.Left, cur.Y - this.Top);
        }

        /// <summary>
        /// 拖拽窗口：移动
        /// </summary>
        /// <param name="e"></param>
        private void DragForm_Move(MouseEventArgs e)
        {
            if (MouseButtons.Left != e.Button) return;
            Point cur = MousePosition;
            this.Location = new Point(cur.X - offset.X, cur.Y - offset.Y);
        }

        private void splitContainer1_Panel1_MouseDown(object sender, MouseEventArgs e)
        {
            DragForm_Click(e);
        }

        private void splitContainer1_Panel1_MouseMove(object sender, MouseEventArgs e)
        {
            DragForm_Move(e);
        }

---

右侧Panel上方位置拖动效果

再创建一个splitPanel。

同样添加mousemove和mousedown函数，但是此时的e.Location基于右边的panel坐标系，所以使用下面的函数：

        /// <summary>
        /// panel偏差时的点击函数
        /// </summary>
        /// <param name="e"></param>
        /// <param name="PanelPos"></param>
        private void DragForm_Click(MouseEventArgs e,Point PanelPos)
        {
            if (MouseButtons.Left != e.Button) return;
            Point cur = this.PointToScreen(AddPoint(e.Location,  PanelPos));
            Console.Out.WriteLine(e.Location);
            offset = new Point(cur.X - this.Left, cur.Y - this.Top);
        }

---

窗口状态按钮

添加3个pictureBox，可以放入png图片保持透明像素点。

        /// <summary>
        /// 最小化
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void pictureBox2_Click(object sender, EventArgs e)
        {
            this.WindowState = FormWindowState.Minimized;
        }

        /// <summary>
        /// 退出
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void pictureBox3_Click(object sender, EventArgs e)
        {
            Application.Exit();
        }

        /// <summary>
        /// 最大化和窗口化切换
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void pictureBox4_Click(object sender, EventArgs e)
        {
            if (this.WindowState == FormWindowState.Maximized)
            {
                this.WindowState = FormWindowState.Normal;
            }
            else if (this.WindowState == FormWindowState.Normal)
            {
                this.WindowState = FormWindowState.Maximized;
            }
        }

鼠标进入背景色变为Silver，离开后变为白色

        private void pictureBox2_MouseEnter(object sender, EventArgs e)
        {
            pictureBox2.BackColor = Color.Silver;
        }

        private void pictureBox2_MouseLeave(object sender, EventArgs e)
        {
            pictureBox2.BackColor = Color.White;
        }

最大化后依然在右上角，为SizeChanged事件添加改变位置的函数

        private void splitContainer1_Panel1_SizeChanged(object sender, EventArgs e)
        {
            var w = RightPanel.Panel1.Width;
            B_Min.Location = new Point(w - 96, 12);
            B_Max.Location = new Point(w - 66, 12);
            B_Close.Location = new Point(w - 36, 12);
        }

左侧按钮

由于太多了，就用动态的方法添加事件

        // 选项窗口的背景色变化 (离开后变为Panel1背景色，选中后变为Panel2背景色)
        private Color ButtonEnter = Color.FromArgb(223, 243, 227);
        List<PictureBox> Buttons = new List<PictureBox>();
        PictureBox ChooseButton;
        void InitButtons()
        {
            Buttons.Add(B1);
            Buttons.Add(B2);
            Buttons.Add(B3);
            Buttons.Add(B4);
            Buttons.Add(B5);

            foreach(var p in Buttons)
            {
                p.MouseEnter += new System.EventHandler(Button_MouseEnter);
                p.MouseLeave += new System.EventHandler(Button_MouseLeave);
                p.Click += new System.EventHandler(Button_Click);
            }

            Button_Click(B1, null);
        }

        private void Button_Click(object sender, EventArgs e)
        {
            var p = (PictureBox)sender;
            p.BackColor = Panel2Color;
            ChooseButton = p;
            foreach(var q in Buttons)
            {
                if (!q.Equals(ChooseButton))
                {
                    q.BackColor = Panel1Color;
                }
            }
        }

        private void Button_MouseEnter(object sender, EventArgs e)
        {
            var p = (PictureBox)sender;
            if (ChooseButton.Equals(p)) return;
            p.BackColor = ButtonEnter;
        }

        private void Button_MouseLeave(object sender, EventArgs e)
        {
            var p = (PictureBox)sender;
            if (ChooseButton.Equals(p)) return;
            p.BackColor = Panel1Color;
        }

---

新建窗口，内嵌到右侧下方的Panel

修改背景色、无边框，以及大小。

通过代码添加，并动态调整窗口大小

        List<Form> SubForms = new List<Form>();

        /// <summary>
        /// 初始化子页面
        /// </summary>
        private void Init_SubForms()
        {
            Add_SubForms(new SubForm1());
            Add_SubForms(new SubForm2());
            Add_SubForms(new SubForm3());
            Add_SubForms(new SubForm4());
            Add_SubForms(new SubForm5());
        }

        private void Add_SubForms(Form f)
        {
            f.TopLevel = false;
            RightPanel.Panel2.Controls.Add(f);
            f.Show();
            SubForms.Add(f);
        }

        /// <summary>
        /// 根据Panel的大小重置内嵌Form的大小
        /// </summary>
        private void ResizeSubForms()
        {
            foreach(Form f in SubForms)
            {
                f.Size = new Size(RightPanel.Panel2.Width, RightPanel.Panel2.Height);
            }
        }

        private void RightPanel_Panel2_SizeChanged(object sender, EventArgs e)
        {
            ResizeSubForms();
        }

与刚才的按钮挂钩

        private void Button_Click(object sender, EventArgs e)
        {
            var p = (PictureBox)sender;
            if (p.Equals(ChooseButton)) return;
            
            // 改变颜色
            p.BackColor = Panel2Color;
            ChooseButton = p;
            foreach(var q in Buttons)
            {
                if (!q.Equals(ChooseButton))
                {
                    q.BackColor = Panel1Color;
                }
            }

            // 改变显示窗口
            int idx = 0;
            foreach(var b in Buttons)
            {
                if (b.Equals(p))
                {
                    break;
                }
                ++idx;
            }
            for(int i=0;i< SubForms.Count; i++)
            {
                if (i == idx)
                {
                    SubForms[i].Show();
                }
                else
                {
                    SubForms[i].Hide();
                }
            }
        }

---

全部代码

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace MedicalLibrary
{
    public partial class Main : Form
    {
        private Color Panel1Color = Color.FromArgb(203, 233, 207);
        private Color Panel2Color = Color.White;

        public Main()
        {
            InitializeComponent();
            Init();
        }

        private void Init()
        {
            InitButtons();
            Init_SubForms();
        }

        private Point offset;

        private Point AddPoint(Point a,Point b)
        {
            Point res = a;
            res.X += b.X;
            res.Y += b.Y;
            return res;
        }

        /// <summary>
        /// 拖拽窗口：点击
        /// </summary>
        /// <param name="e"></param>
        private void DragForm_Click(MouseEventArgs e)
        {
            if (MouseButtons.Left != e.Button) return;
            Point cur = this.PointToScreen(e.Location);
            offset = new Point(cur.X - this.Left, cur.Y - this.Top);
        }

        /// <summary>
        /// 拖拽窗口：panel偏差时的点击函数
        /// </summary>
        /// <param name="e"></param>
        /// <param name="PanelPos"></param>
        private void DragForm_Click(MouseEventArgs e,Point PanelPos)
        {
            if (MouseButtons.Left != e.Button) return;
            Point cur = this.PointToScreen(AddPoint(e.Location,  PanelPos));
            Console.Out.WriteLine(e.Location);
            offset = new Point(cur.X - this.Left, cur.Y - this.Top);
        }

        /// <summary>
        /// 拖拽窗口：移动
        /// </summary>
        /// <param name="e"></param>
        private void DragForm_Move(MouseEventArgs e)
        {
            if (MouseButtons.Left != e.Button) return;
            Point cur = MousePosition;
            this.Location = new Point(cur.X - offset.X, cur.Y - offset.Y);
        }

        private void splitContainer1_Panel1_MouseDown(object sender, MouseEventArgs e)
        {
            DragForm_Click(e);
        }

        private void splitContainer1_Panel1_MouseDown_1(object sender, MouseEventArgs e)
        {
            DragForm_Click(e, new Point(150, 0));
        }

        private void splitContainer1_Panel1_MouseMove(object sender, MouseEventArgs e)
        {
            DragForm_Move(e);
        }

        private void splitContainer1_Panel1_MouseMove_1(object sender, MouseEventArgs e)
        {
            DragForm_Move(e);
        }

        /// <summary>
        /// 最小化
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void pictureBox2_Click(object sender, EventArgs e)
        {
            this.WindowState = FormWindowState.Minimized;
        }

        /// <summary>
        /// 退出
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void pictureBox3_Click(object sender, EventArgs e)
        {
            Application.Exit();
        }

        /// <summary>
        /// 最大化和窗口化切换
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void pictureBox4_Click(object sender, EventArgs e)
        {
            if (this.WindowState == FormWindowState.Maximized)
            {
                this.WindowState = FormWindowState.Normal;
            }
            else if (this.WindowState == FormWindowState.Normal)
            {
                this.WindowState = FormWindowState.Maximized;
            }
        }

        // 窗口按钮的背景色变化 (离开后变为Panel2背景色)
        private Color FormButtonEnter = Color.Silver;

        private void pictureBox2_MouseEnter(object sender, EventArgs e)
        {
            B_Min.BackColor = FormButtonEnter;
        }

        private void pictureBox2_MouseLeave(object sender, EventArgs e)
        {
            B_Min.BackColor = Panel2Color;
        }

        private void pictureBox4_MouseEnter(object sender, EventArgs e)
        {
            B_Max.BackColor = FormButtonEnter;
        }

        private void pictureBox4_MouseLeave(object sender, EventArgs e)
        {
            B_Max.BackColor = Panel2Color;
        }

        private void pictureBox3_MouseEnter(object sender, EventArgs e)
        {
            B_Close.BackColor = FormButtonEnter;
        }

        private void pictureBox3_MouseLeave(object sender, EventArgs e)
        {
            B_Close.BackColor = Panel2Color;
        }

        // 选项窗口的背景色变化 (离开后变为Panel1背景色，选中后变为Panel2背景色)
        private Color ButtonEnter = Color.FromArgb(223, 243, 227);
        List<PictureBox> Buttons = new List<PictureBox>();
        PictureBox ChooseButton;
        void InitButtons()
        {
            Buttons.Add(B1);
            Buttons.Add(B2);
            Buttons.Add(B3);
            Buttons.Add(B4);
            Buttons.Add(B5);

            foreach(var p in Buttons)
            {
                p.MouseEnter += new System.EventHandler(Button_MouseEnter);
                p.MouseLeave += new System.EventHandler(Button_MouseLeave);
                p.Click += new System.EventHandler(Button_Click);
            }

            Button_Click(B1, null);
        }

        private void Button_Click(object sender, EventArgs e)
        {
            var p = (PictureBox)sender;
            if (p.Equals(ChooseButton)) return;
            
            // 改变颜色
            p.BackColor = Panel2Color;
            ChooseButton = p;
            foreach(var q in Buttons)
            {
                if (!q.Equals(ChooseButton))
                {
                    q.BackColor = Panel1Color;
                }
            }

            // 改变显示窗口
            int idx = 0;
            foreach(var b in Buttons)
            {
                if (b.Equals(p))
                {
                    break;
                }
                ++idx;
            }
            for(int i=0;i< SubForms.Count; i++)
            {
                if (i == idx)
                {
                    SubForms[i].Show();
                }
                else
                {
                    SubForms[i].Hide();
                }
            }
        }

        private void Button_MouseEnter(object sender, EventArgs e)
        {
            var p = (PictureBox)sender;
            if (ChooseButton.Equals(p)) return;
            p.BackColor = ButtonEnter;
        }

        private void Button_MouseLeave(object sender, EventArgs e)
        {
            var p = (PictureBox)sender;
            if (ChooseButton.Equals(p)) return;
            p.BackColor = Panel1Color;
        }

        /// <summary>
        /// 调整窗口按钮的位置
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void splitContainer1_Panel1_SizeChanged(object sender, EventArgs e)
        {
            var w = RightPanel.Panel1.Width;
            B_Min.Location = new Point(w - 96, 12);
            B_Max.Location = new Point(w - 66, 12);
            B_Close.Location = new Point(w - 36, 12);
        }

        List<Form> SubForms = new List<Form>();

        /// <summary>
        /// 初始化子页面
        /// </summary>
        private void Init_SubForms()
        {
            Add_SubForms(new SubForm1());
            Add_SubForms(new SubForm2());
            Add_SubForms(new SubForm3());
            Add_SubForms(new SubForm4());
            Add_SubForms(new SubForm5());
        }

        private void Add_SubForms(Form f)
        {
            f.TopLevel = false;
            RightPanel.Panel2.Controls.Add(f);
            f.Show();
            SubForms.Add(f);
        }

        /// <summary>
        /// 根据Panel的大小重置内嵌Form的大小
        /// </summary>
        private void ResizeSubForms()
        {
            foreach(Form f in SubForms)
            {
                f.Size = new Size(RightPanel.Panel2.Width, RightPanel.Panel2.Height);
            }
        }

        private void RightPanel_Panel2_SizeChanged(object sender, EventArgs e)
        {
            ResizeSubForms();
        }
    }
}