你是不是觉得VB自带的命令按钮美观上很土呢?随着电子业的泛滥,软件界面也是五花八门,一个漂亮的界面,甚至一个漂亮的控件,都能让人看着更舒心。那接下来我们自己写一个界面中常用的控件——命令按钮(Button),要求背景用四张不同颜色的图片,根据鼠标动作切换背景图片和字体颜色,功能响应鼠标的经过、按下、弹起、无效的事件,最终的效果如下图:
首先我们启动VB6.0主程序,添加一个Form1窗体,然后添加一个用户控件,如下图:
用户控件界面跟Form窗体是一样的,不一样的是它少了顶部的标题栏。我们通俗的把它理解为一个舞台吧,那居然是一个舞台,它就分为两个部分:前台和后台。前台是一个可视化的版面,也就是我们要展示最终效果的地方,而后台即是操作前台的地方——代码编辑区。
实践之前我得借用一些图形处理软件(PS)制作按钮的四张图片,将它们纵向排列,然后保存为一张BMP格式的图片,如图:
图片从上向下为:鼠标弹起、 经过、按下、无效,单格图片规格为100*30像素。
图片准备好之后,我们开始敲代码了。首先我们给我们的命令按钮命一个名称,我在这里就命一个"ComButton"吧,你们按照自己的意愿随便取即可。选中用户控件,然后单击"查看代码"按钮,进入代码编辑区,如图:
这里说明一下,此控件我们要求可以在控件的属性中,可以随意更换背景图片的操作,增加一个调出系统打开对话框的属性"Picture",而不是通过代码读取目录下的图片,首先,我们要实现的是将用户通过属性"Picture"加入的图片,保存到一个变量中,然后写一个函数将图片分割显示到前台,代码如下:
‘定义一个存储图片的变量"Pic" |
Dim Pic As New StdPicture |
'图片切换函数(分割序号) |
Private Sub ImageSlide(ByVal Index As Integer) UserControl.Cls Call TextColor(Index): |
写好了存放图片的变量和分割图片的函数后,接下来我们要写一个添加图片入口的属性"Picture",通过"Picture"属性获得用户加入的图片到"Pic"变量中,代码如下:
'图片输出 |
Public Property Get Picture() As StdPicture Set Picture = Pic End Property |
'图片输入 |
Public Property Set Picture(ByVal vNewValue As StdPicture) Set Pic = vNewValue '将输入的图片存放到Pic变量中 PropertyChanged "Picture" '告知程序函数发生了变化 Call ImageSlide(0) '即刻显示图片的第一块区域 End Property |
图片入口属性已经有了,但此时的图片还不能真正的保存在"Pic"变量里,一旦启动控件,"Pic"中的图片就"魂飞魄散"了,那么接下来我们要做的就是将图片保存在控件自身中,启动控件后再将其读取出来,实现读写属性值要用到两个事件:WriteProperties和ReadProperties,这两个事件只在设计调试中有效,编译为EXE文件后不再有效。此两事件及PropBag对象只是为了方便设计而存在。代码如下:
'写入属性值数据 |
Private Sub UserControl_WriteProperties(PropBag As PropertyBag) Call PropBag.WriteProperty("Picture", Pic, Nothing) End Sub |
'读出属性值数据 |
Private Sub UserControl_ReadProperties(PropBag As PropertyBag) Call ImageSlide(0) |
把图片留住之后,接下来我们编写按钮文本了,文本和编写图片一样的,我们首先定义一个存放文本的变量,名称随意,在这我就起一个"Text"吧,名称起好后我们再写一个响应鼠标动作改变文本颜色的函数,代码如下:
'定义一个存储文本的变量"Text",类型为字符串 '定义一个存储文本颜色包含0到3的数组变量,类型为长整型 '记住,外部变量一定要写在控件顶部哟 |
Dim Text As String, tColor(3) As Long |
'切换文本颜色的函数(颜色变换序号) |
Private Sub TextColor(ByVal Index As Integer) If Text = "" Or Index > 3 Then Exit Sub UserControl.ForeColor = tColor(Index) '文本颜色 UserControl.CurrentX = (UserControl.ScaleWidth - UserControl.TextWidth(Text)) / 2 '文本左右居中 UserControl.CurrentY = (UserControl.ScaleHeight - UserControl.TextHeight(Text)) / 2 '文本上下居中 UserControl.Print Text '显示文本 End Sub |
注意,在ImageSlide函数中的最后加入这一行 Call TextColor(Index),当鼠标改变图片时文本的颜色也跟着改变。下面接着写输入输出文本的属性,代码如下:
'文本输出 |
Public Property Get Caption() As Variant Caption = Text End Property |
'文本输入 |
Public Property Let Caption(ByVal vNewValue As Variant) Text = vNewValue PropertyChanged "Caption" Call ImageSlide(0) End Property |
将文本属性值读写到WriteProperties和ReadProperties事件中:
'写 |
Call PropBag.WriteProperty("Caption", Text, Extender.Name) |
‘读 |
Text = PropBag.ReadProperty("Caption", Extender.Name) |
接下来编写鼠标离开控件文本颜色的属性,至于鼠标经过、按下、按钮无效的颜色值在本文中小编分别定义一个固定颜色,如果要动态更换,按照以下方法实现即可,代码如下:
'颜色输出 |
Public Property Get ForeColor() As OLE_COLOR ForeColor = tColor(0) End Property |
'颜色输入 |
Public Property Let ForeColor(ByVal vNewValue As OLE_COLOR) tColor(0) = vNewValue PropertyChanged "ForeColor" Call ImageSlide(0) End Property |