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 }

 

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