有人说，用 VFP很难设计出漂亮的用户界面。本人并不认可这种观点。下面这张贴图，是我开发的采购合同客户端在 XP 下的运行界面：

怎么样？界面还算“酷”吧？在枯燥的编程世界里，有时候是需要点“阿Q”精神的。当无人喝彩时，就给自己来点儿掌声吧。
我已将完整的源代码打包：

下面简单介绍一下操作界面。
1. 将鼠标指针移动到右上角的“最小化”按钮上，按钮会发蓝，并在下方显示“最小化”提示。“关闭”按钮与此类似。

2. 单击“最小化”按钮，则窗口最小化。单击“关闭”按钮，则退出程序。
3. 拖动窗口的标题栏区域，可将窗口移动到任意位置。
4. 将鼠标指针移动到左侧的“修改公司信息”文字上时，字体变成蓝色，并加下划线，同时指针会变成“手形”，这类似于网页上的超级链接。移开鼠标后，文字恢复正常。

5. 窗口的右半部分，是三个按钮图标，分别是“下载合同”、“编辑提交合同”、“查询合同”。当鼠标移动到某个按钮上时，比如第一个按钮（见图一：Img_1.png），则该按钮的外围显示一个蓝色的方框，在按钮的上方会显示一个文字“气泡”，在窗口的下方，居中显示该按钮的功能描述，类似于状态栏。

下面，详细说明一下设计步骤：
1. 新建一个表单，设置表单属性如下：
● TitleBar = 0      隐藏窗口标题栏
● AutoCenter = .t.  窗口居中
● BorderStyle = 0   无边框，防止通过拖拽边框线改变窗口的大小
● Caption = 采购合同管理
   有人可能会问：“在背景图片中已经设置了标题文字，为什么这里还要设置窗口标题呢？”。原因是，表单的 Caption会显示在任务栏上，我们肯定不想在任务栏上显示“Form1”这样的文字吧。下面要设置的 Icon 属性也是这个原因。
● Icon = Logo.ico   设置图口图标，主要是为了设置本窗口在任务栏上显示的图标。
● MaxButton = .f.   有人可能会问：“窗口中仅设置了[最小化]和[关闭]两个图片按钮，根本就没有设置最大化按钮，为什么还要设置 MaxButton 属性呢？”。原因是，如果不将 MaxButton 设置为 .f.，右键单击任务栏上的图标时，在右键菜单中会显示“最大化”。对于本表单来说，窗口大小是固定的，若将窗口放大，则背景图片会平铺，严重影响视觉效果。
● .ShowTips = .t.   在控件下方显示提示文字，主要用于右上角的两个图片按钮。
● .ShowWindows = 2  将本窗口设置为顶层表单。由于 Screen 已经隐藏，只有顶层表单才能脱离 Screen 显示在桌面上。
● .Picture = Background.png    作为窗口背景的图片

● .Height = 360，Width = 490    设置窗口大小。窗口大小一定要和背景图片一致。背景图片的大小为490*360，因此，窗口的大小也必须设置为490*360。

2. 在表单右上角添加两个 Image控件，分别命名为imgMin和imgClose，前者用于最小化窗口，后者用于关闭窗口。

以imgMin为例，设置 ToolTipText = 最小化，Picture = min0.png

说明：最小化按钮有三幅图片，第一幅是 min0.png，用于显示正常状态下的最小化按钮。第二幅是 min1.png，用于鼠标指针移动到最小化按钮上显示的图片。第三幅是min2.png，用于按下最小化按钮还没有松开时显示的图片。这样设计，可以给人一种逼真的动态效果。

MouseEnter事件代码如下，用于设置鼠标移动到按钮上时，显示的图片：THIS.Picture = '..\bitmap\min1.png'
MouseDown事件代码如下，用于设置按下鼠标左键时，显示的图片：THIS.Picture = '..\bitmap\min2.png'
MouseLeave事件代码如下，用于设置鼠标离开按钮时，显示的图片：THIS.Picture = '..\bitmap\min0.png'
Click事件代码如下，用于单击按钮时最小化窗口：THISFORM.WindowState = 1

关闭按钮 imgClose的事件代码与此类似，其中 imgClose.Click事件代码为：

THISFORM.Release        && 关闭窗口
CLEAR EVENTS            && 结束事件循环，退出系统

3.为窗口增加虚拟标题栏，实现移动窗口功能。
(1). 在表单上方添加一个容器控件，命名为 cntTitleBar，设置其 BackStyle = 0 – Transparent，BorderWidth = 0，这样设置后，容器控件既透明又没有边框，用户是看不见的。但它，却是真实存在的，支持所有鼠标事件。
(2). 在 cntTitleBar 的 Init 事件中，添加两个自定义属性 nX、nY，用于保存表单的位置：

THIS.AddProperty('nX',0)
THIS.AddProperty('nY',0)

(3). 在 cntTitleBar 的 MouseDown 事件中，添加如下代码，用于在按下鼠标左键时，保存窗口的当前位置:

IF nButton = 1
    THIS.nX = nXCoord
    THIS.nY = nYCoord
ENDIF

(4).在cntTitleBar的MouseMove事件中，添加改变窗口位置的代码：

IF nButton = 1
    THISFORM.Left = THISFORM.Left + nXCoord - THIS.nX
    THISFORM.Top = THISFORM.Top + nYCoord - THIS.nY
ENDIF

4. 在窗口左侧，添加 2 个标签，分别命名为 lblModifyInfo和lblModifyPass，用于修改公司信息和修改登录口令。因为这两个标签事件和方法相似，在实际编程中我是用类生成的，将共用的事件代码封装到了类中。为了降低学习难度，下面以不使用自定义类而直接使用Label基类来说明。
以lblModifyInfo为例，设置其属性如下：
    Caption = 修改公司信息
    AutoSize = .t.       根据内容自动调整控件大小
    BackStyle = 0        背景透明
    ForeColor = 53,53,53 设置字体颜色
    MousePointer = 15    设置当鼠标移动到控件上时出现的指针（手形）
在 MouseEnter事件中输入如下代码，以设置字段颜色、下划线以及状态栏信息：

THIS.ForeColor = RGB(0,0,255)
THIS.FontUnderline = .t.
THIS.Parent.lblStatus.Caption = 修改本公司的“公司名称”、“联系人”等信息。

在MouseLeave事件中输入如下代码，恢复字体颜色，去除下划线：

THIS.ForeColor = RGB(53,53,53)
THIS.FontUnderline = .f.

5.窗口右侧是三个图片按钮，用于打开相应的功能窗口。

以第一个按钮cntDownLoad为例：
在MouseEnter事件中，设置相关控件位置、显示提示信息，为图片加边框：

LOCAL nLeft
nLeft = THIS.Left - 15
WITH THISFORM
    .lblTips.Caption = ‘下载合同’
    .lblTips.Left = nLeft
    .imgTips.Left = nLeft
    .lblStatus.Captione = ‘下载需方拟定的采购合同。’
ENDWITH
THIS.BorderWidth = 2

在MouseLeave事件中，去除图片边框：THIS.BorderWidth = 0

6. 在表单下方添加一个标签lblStatus，用于模拟状态栏，显示一些说明信息。这里介绍一个使提示文字相对于表单居中显示的小技巧。首先，保持标签控件的AutoSize = .f.，设置标签的 Left = 0，Width等于表单的宽度，Alignment = 2，Anchor = 10。这样设置后，不管表单如何缩放，标签中的文字相对于窗口始终是居中的。



[ 本帖最后由 liuxingang28 于 2014-5-21 11:25 编辑 ]

收到的鲜花

• tlliqi 于 2014-05-21 11:33 送鲜花  50朵   附言：界面好漂亮

界面好漂亮 辛苦了 谢谢

确实不错

啊，大开眼界。谢谢

佩服佩服！学习学习！

那个气泡图片如何让它透明

漂亮的界面确实要在细节上下功夫。

太好了，大开眼界

如有见到新朋友的感觉，赞!

，设计的很不错，学习