C#窗口程序 UI模板【简约风、去边框】_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);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

---

右侧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);
        }
1
2
3
4
5
6
7
8
9
10
11
12

---

窗口状态按钮

添加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;
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

鼠标进入背景色变为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;
        }
1
2
3
4
5
6
7
8
9

最大化后依然在右上角，为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);
        }
1
2
3
4
5
6
7

左侧按钮

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

        // 选项窗口的背景色变化 (离开后变为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;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

---

新建窗口，内嵌到右侧下方的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();
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

与刚才的按钮挂钩

        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();
                }
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

---

全部代码

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();
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292