c#小软件(SaveClassic)开发手记(4)数据保存界面设计程序开发(1)

    首先我们先看一下解决方案,在这个小软件中共包含三个工程。1、基础类工程,Common工程;2、日志保存显示工程,SaveTxt工程;3、软件发布工程,GetStudySetup工程。如图4-1所示。

 

图4-1软件解决方案

从这个图上还多了一个工程,那个工程是一个废弃的工程,主要是为了测试用。有时候我会有些代码要不断的调试,修改,这个工程主要记录这些轨迹,看看我每走一步,前进一步都经历过哪些问题,如何解决的。在第三章中主要记录的基础类工程的开发,在这一章节中我们主要讲解日志保存显示工程SaveTxt的内容。首先先看一下界面的效果如图4-2所示。 

图4-2保存日志界面

这是一个无标题窗口界面,上面的一蓝色横条是一个Panle控件,模拟windows的标题栏。界面上共有11个控件,2个Panel控件一是上面的模拟标题,一是下面保存按钮的背景;5个Label,头部显示的标题,下面显示的日志分类,日志名称,保存,管理;一个ComboBox控件,日志分类下拉框;一个文本输入框表示输入的日志标题;一个自定义控件ImageBT,界面上的关闭图标。主要控件列表如表4-1所示。

控件名称

类型

文本

备注

Title

Panel

模拟窗口上面的标题栏,主要显示蓝色背景

TitleLable

Label

保存日志我的生活

标题栏显示标题

DiaryType

ComboBox

日志类型,从数据库中读取绑定

DiaryTitle

TextBox

日志标题,路人日志名称

SaveTxt

Label

保存

保存按钮

表4-1保存窗口主要控件列表

4.1 自定义控件图片按钮

winform自带的按钮相对比较丑陋,又没有WEB设计中的图片按钮,所以我决定开发一个自定图片控件,来模拟实现WEB页面中的图片按钮效果。我想先简单的介绍一下用户控件的优点。

1、用户控件可以使用到多个地方。他不单单可以用于一个窗体,还可以用于其它窗体甚至其它项目中,减少代码重复开发,提高代码的可用性。

2、能保持界面的一致性。

3、减少工作的耦合程度。

用户控件设计和窗体界面设计十分相似,也是通过拖放就可以实现控件的布局。在VisulStudio 2005中选择菜单“项目”à添加用户控件,如图4-3所示,会弹出图4-4所示对话框。对话框中输入文件名然后单击“添加”按钮即可在项目中添加用户控件。用户控件必须从UserControl类中派生出来,而不像普通窗口从Form派生出来。

 

 图4-3 添加用户控件菜单项

图4-4添加用户控件对话框

该图片按钮自定义控件继承UserControl。首先定义一些常用的属性,NormalImage属性表示默认显示时候的按钮图片;MoveImage属性表示鼠标滑到按钮上的时候显示的图片;DownImage属性表示鼠标单击时按钮显示的图片;BtnTxt属性表示显示在按钮图片上的文字;BtnSize属性表示图片按钮的大小。其次是编写一些事件代码,BTTxt_Click事件表示按钮的单击事件这是按钮最重要的事件;BTTxt_MouseEnter事件表示鼠标滑动到按钮上激发的事件;BTTxt_MouseDown事件表示鼠标按下激发的事件;BTTxt_MouseLeave事件表示鼠标离开以后的事件;BTTxt_MouseUp事件表示鼠标弹起激发的事件。改自定义图片按钮控件的代码如下所示。

  1 using System;
2
3 using System.Collections.Generic;
4
5 using System.ComponentModel;
6
7 using System.Drawing;
8
9 using System.Data;
10
11 using System.Text;
12
13 using System.Windows.Forms;
14
15
16
17 namespace SaveTxt.Control
18
19 {
20
21 public partial class ImageBT : UserControl
22
23 {
24
25
26
27 #region 属性
28
29 private Image _normalImage=null;
30
31 public Image NormalImage
32
33 {
34
35 get { return _normalImage; }
36
37 set { _normalImage = value; this.BackgroundImage = value; }
38
39 }
40
41 private Image _moveImage = null;
42
43 public Image MoveImage
44
45 {
46
47 get { return _moveImage; }
48
49 set { _moveImage = value; }
50
51 }
52
53 private Image _downImage = null;
54
55 public Image DownImage
56
57 {
58
59 get { return _downImage; }
60
61 set { _downImage = value; }
62
63 }
64
65 /// <summary>
66
67 /// 按钮文字
68
69 /// </summary>
70
71 public string BtnTxt
72
73 {
74
75 get { return this.BTTxt.Text; }
76
77 set { this.BTTxt.Text = value;}
78
79 }
80
81
82
83 public Size BtnSize
84
85 {
86
87 get { return base.Size; }
88
89 set { this.BTTxt.Size = value; base.Size = value; }
90
91 }
92
93 #endregion
94
95 public ImageBT()
96
97 {
98
99 //设置双缓冲减少按钮闪烁
100
101 this.SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer, true);
102
103 InitializeComponent();
104
105 }
106
107
108
109
110
111 /// <summary>
112
113 /// 背景透明
114
115 /// </summary>
116
117 /// <param name="image"></param>
118
119 private void MakeTransparent(Image image)
120
121 {
122
123 Bitmap bitmap = image as Bitmap;
124
125 bitmap.MakeTransparent(Color.FromArgb(255, 0, 255));
126
127 }
128
129 #region 事件
130
131 private void BTTxt_Click(object sender, EventArgs e)
132
133 {
134
135 base.OnClick(e);
136
137 }
138
139
140
141 private void BTTxt_MouseEnter(object sender, EventArgs e)
142
143 {
144
145 this.BackgroundImage = _moveImage;
146
147 }
148
149
150
151 private void BTTxt_MouseDown(object sender, MouseEventArgs e)
152
153 {
154
155 this.BackgroundImage = _downImage;
156
157 }
158
159
160
161 private void BTTxt_MouseLeave(object sender, EventArgs e)
162
163 {
164
165 this.BackgroundImage = _normalImage;
166
167 }
168
169
170
171 private void BTTxt_MouseUp(object sender, MouseEventArgs e)
172
173 {
174
175 this.BackgroundImage = _normalImage;
176
177 }
178
179 #endregion
180
181 }
182
183 }

该图片按钮的代码十分简单,在后面的开发当中会遇到更多更复杂的自定义控件。无论自定义控件多么复杂但是原理基本相同。

原文地址:https://www.cnblogs.com/studyplay/p/2284389.html