第一卷 Windows用戶窗體的設計(1 / 3)

第一卷 Windows用戶窗體的設計

用戶窗體的界麵設計可以分為三個方麵的內容:第一個是利用VCL控件(可視化控件)的窗體界麵設計,另外一個是多重窗體的設計(Multiple Forms),還有一個就是經常提到的多文檔界麵的設計,即MDI。

注意:

* 我們重點需要了解多重窗體和多文檔界麵窗體的區別。

多重窗體(也叫複合窗體)是指在一個應用程序中有多個窗口界麵,一個個分別的顯示在屏幕上,而多文檔界麵是指在一個父窗口中包含有多個子窗口,在程序運行過程中可以同時打開多個窗體,這些窗體之間的關係由程序指定。

下麵將分別對三種窗體的界麵設計方法加以介紹。

第一章 VCL控件窗體設計

一個應用程序的好與壞,除了算法的設計,代碼的編寫方麵的因素外,用戶界麵的設計也是一個非常重要的方麵,在可視化的編程環境中,雖然不用編寫大量的代碼就可以設計出豐富的界麵,但是要想設計出有個性有特色的用戶界麵,還是需要程序的開發人員下一番功夫的。

下麵就是一個利用VCL控件來進行程序設計的示例,在這個示例程序中所用到的一些控件在程序的初始階段沒有被加載,還需要讀者自己把它們添加到工具箱中。

示例程序的具體步驟如下:

1.啟動一個新項目

選擇菜單"工程"/"部件",在彈出的對話框中選擇所需要的,添加控件後的工具箱如圖4-1所示。

圖4-1 添加控件後的工具箱

注意:

* 選擇菜單"工程"/"部件"的意思是選擇"工程"菜單上的"部件"命令,以下同。

2.SSTab控件

在Visual Basic 6.0所提供的控件中,有一些控件可以作為容器控件,在其上可以放置一些VCL控件來進行控件的窗體界麵設計,如Frame控件和SSTab控件等,下麵就來介紹一下SSTab控件。

圖4-2 在窗體上的SSTab控件

它的屬性設置如表4-1所示。

表4-1 SSTab控件的屬性設置

屬 性

設 置

(Name)

SSTab1

Caption

Tab 1

Enabled

True

Height

2415

Left

240

Picture

(None)

Tab

1

TabHeight

295

Tabs

3

TabsPerRow

3

Top

120

Width

4095

WordWrap

True

說明:

控件的名稱為SSTab1,它有三個選項,即選項0、選項1和選項2,現在選中的是選項1,現在處於有效的狀態,它的顯示文字為"Tab 1",圖片為空。

SSTab控件的狀態可以在程序中動態的修改,比如在窗體的設計階段雙擊窗體,在窗體的Form_Load()事件中添加下列代碼:

Private Sub Form_Load()

SSTab1.TabCaption(1) = "選項1"

'設置選項1上的文本

SSTab1.TabVisible(2) = False

'設置選項2上的可見狀態

SSTab1.TabEnabled(0) = False

'設置選項0的有效狀態

SSTab1.Tab = 1

'設置選項1為選中的狀態

SSTab1.Tabs = 4

'添加一個選項

End Sub

保存文件,運行程序,結果如圖4-3所示。

圖4-3 程序運行結果

3.向窗體上添加控件

向窗體上添加一個CommandButton控件、兩個TextBox控件、一個SSTab控件、四個ToggleButton控件、兩個UpDown控件和四個Label控件。

添加控件後的窗體如圖4-4所示。

圖4-4 添加控件後的窗體

控件說明:

* CommandButton控件用來結束程序的運行,為程序的正常結束提供一個出口;

* TextBox控件用來顯示程序中的兩個變量X和Y的值;

* UpDown控件用來實現變量的動態更新;

* ToggleButton控件用來實現不同的加減乘除運算;

* Label控件用來顯示文本和運算結果;

* SSTab控件用來顯示不同的選項,同時作為ToggleButton控件的容器。

4.添加代碼

下麵以乘法操作為例來添加代碼,在程序的設計階段雙擊ToggleButton3控件,在它的ToggleButton3_Click()事件中添加下列代碼:

Private Sub ToggleButton3_Click()

Label4.Caption = Val(Text1.Text) * Val(Text2.Text)

'乘法操作

End Sub

其餘控件的代碼添加過程在這裏就不加贅述,詳細的代碼請參看附後的完整源程序代碼。

5.運行程序

添加完代碼後,按功能鍵F5運行程序,程序運行的初始畫麵如圖4-5所示。

圖4-5 程序運行初始畫麵

在文本框中輸入變量X和Y的值,選擇一種算法,如除法操作,單擊相應的按鈕,結果如圖4-6所示。

圖4-6 程序的運行結果

附程序的完整代碼:

程序清單

Version 6.00

Private Sub Form_Load()

SSTab1.TabCaption(0) = "加法"

SSTab1.TabCaption(1) = "減法"

SSTab1.TabCaption(2) = "乘法"

SSTab1.TabCaption(3) = "除法"

'設置控件的顯示文本

If Text1.Text = "" Then

Text1.Text = "0.00000"

End If

'初始化文本框

If Text2.Text = "" Then

Text2.Text = "0.00000"

End If

'初始化文本框

End Sub

Private Sub Text2_Change()

If Text2.Text = 0 Then

ToggleButton4.Enabled = False

Else

ToggleButton4.Enabled = True

End If

'如果文本框2中的數字為0

'那麼除法無效

End Sub

Private Sub ToggleButton1_Click()

Label4.Caption = Val(Text1.Text) + Val(Text2.Text)

'加法操作

End Sub

Private Sub ToggleButton2_Click()

Label4.Caption = Val(Text1.Text) - Val(Text2.Text)

'減法操作

End Sub

Private Sub ToggleButton3_Click()

Label4.Caption = Val(Text1.Text) * Val(Text2.Text)

'乘法操作

End Sub

Private Sub ToggleButton4_Click()

Label4.Caption = Val(Text1.Text) / Val(Text2.Text)

'除法操作

End Sub

Private Sub UpDown1_DownClick()

If Text1.Text > 0 Then

Text1.Text = Text1.Text - 1

End If

'單擊向下的箭頭,數字減1

End Sub

Private Sub UpDown1_UpClick()

If Text1.Text = "" Then

Text1.Text = 0

End If

Text1.Text = Text1.Text + 1

'單擊向上的箭頭,數字加1

End Sub

Private Sub UpDown2_DownClick()

If Text2.Text > 0 Then

Text2.Text = Text2.Text - 1

End If

'單擊向下的箭頭,數字減1

End Sub

Private Sub UpDown2_UpClick()

If Text2.Text = "" Then

Text2.Text = 0

End If

Text2.Text = Text2.Text + 1

'單擊向上的箭頭,數字加1

End Sub

第二章 多重窗體設計

一個大的應用程序往往不會隻包括一個窗體,否則程序就顯得有一些單薄,而多窗體程序設計可以使程序變的豐富多彩,在多重窗體中每個單獨的窗體都有自己的特點與功能,所以程序的功能會更加強大。

4.2.1 多重窗體設計常用方法

在多窗體的程序設計中經常要用到下麵四種方法:Load方法、Show方法、Hide方法和Unload方法。

1.Load方法

它的語法結構如下:

Load [窗體名稱]

使用Load方法調用的窗體隻是被裝入內存,並不會顯示出來,與此同時,會產生一個Form_Load()事件。如:

Load Form2

2.Show方法

它的語法結構如下:

[窗體名稱].Show

使用Show方法會顯示被調用的窗體,如果在調用Show方法之前沒有把窗體調入內存,那麼調用Show方法會自動的把窗體調入內存。如:

Load Form2

Form2.Show

3.Hide方法

它的語法結構如下:

[窗體名稱].Hide

使用Hide方法會隱藏被調用的窗體,但是在調用Hide方法之後不會把窗體移出內存,但是被調用的窗體中的屬性等已經處於無效的狀態。如:

Form1.Hide

Form2.Show

4.Unload方法

它的語法結構如下:

Unload [窗體名稱]

使用Unload方法會從內存中移去被調用的窗體,與此同時,窗體中的變量和屬性等都會處於無效的狀態,在移去窗體的同時會產生一個Form_QueryUnload()事件。如:

Form1.Show

Unload Form2

4.2.2 多重窗體設計實例

下麵就以一個示例來說明如何進行多重窗體的程序設計,具體的設計步驟如下:

1.啟動新項目

首先啟動一個新的項目,在屏幕上就會出現一個空白的窗體,窗體的屬性設置如表4-2所示。

表4-2 窗體的屬性設置

屬 性

設 置

(Name)

Form1

BorderStyle

3 - Fixed Dialog

續 表

屬 性

設 置

Caption

Form1

Enabled

True

Height

2940

Left

0

MDIChild

False

Moveable

False

StartUpPosition

2 - CenterScreen

Top

0

Visible

True

Width

4065

這樣設置的窗體有以下特性:

* 窗體在程序的運行過程中始終位於屏幕的中央;

* 窗體的大小不能夠在程序的運行過程中改變;

* 在程序的運行過程中不能夠移動窗體。

2.添加控件

在空白的窗體上添加窗體如下控件:五個Label控件、四個TextBox控件和兩個CommandButton控件。添加控件後的窗體如圖4-6所示。

圖4-7 添加控件後的窗體

技巧:

* 添加上述幾類常用控件的方法非常簡單,隻需要在"工具箱"上雙擊需要的控件即可。

其中控件的屬性設置如表4-3所示。

表4-3 控件的屬性設置

屬 性

設 置

(Name)

Label1

Caption

企業季度銷售情況

(Name)

Label2

Caption

第一季度

(Name)

Label3

Caption

第二季度

(Name)

Label4

Caption

第三季度

續 表

屬 性

設 置

(Name)

Label5

Caption

第四季度

(Name)

Text1

Text

(Name)

Text1

Text

(Name)

Text1

Text

(Name)

Text1

Text

(Name)

Command1

Caption

圖 形

(Name)

Command2

Caption

退 出

由於篇幅有限,所以在這裏代碼的添加過程就不加贅述了,詳細的代碼請參看附後的完整程序代碼。

3.添加窗體

選擇菜單"工程"/"添加窗體",就會彈出如圖4-8所示的對話框。

圖4-8 添加窗體對話框

在"添加窗體"對話框中選擇"窗體"項,單擊"打開"按鈕,係統就會自動的向原有的項目中添加一個窗體。

4.添加控件

在新增的窗體上放置一個CommandButton控件,它的作用是在隱藏新增的窗體的同時顯示原有的窗體。

添加控件後的新增窗體如圖4-9所示。

圖4-9 添加控件後的新增窗體

窗體及控件的屬性設置如表4-4所示。

表4-4 窗體的屬性設置

項 目

內 容

(Name)

Form2

BorderStyle

3 - Fixed Dialog

Caption

Form2

Height

2970

Left

0

Moveable

False

StartUpPosition

2 - CenterScreen

Top

0

Width

4275

(Name)

Command1

Caption

繼續

在"繼續"按鈕的Command1_Click()事件中添加下列代碼:

Private Sub Command1_Click()

Form2.Hide

'隱藏窗體2

Form1.Show

'顯示窗體1

End Sub

在窗體Form2被顯示的過程中,單擊"繼續"按鈕,就會激活Command1_Click()事件,然後通過Form2.Hide和Form1.Show兩條語句實現隱藏窗體2和顯示窗體的功能。

5.添加說明模塊

選擇菜單"工程"/"添加模塊",就會彈出如圖4-10所示的對話框。

圖4-10 添加模塊對話框

在模塊的聲明段中添加下列代碼:

Global a1 As Single

Global a2 As Single

Global a3 As Single

Global a4 As Single

'定義四個全局變量

注意:

* 定義的四個全局變量分別用來存儲第一季度、第二季度、第三季度和第四季度的銷售情況。

添加模塊和新窗體的工程資源窗口如圖4-11所示。

圖4-11 工程資源窗口

6.運行程序

依附後的完整程序代碼,添加剩餘的代碼,存儲文件,運行程序,初始畫麵如圖4-12所示。

圖4-12 程序運行初始畫麵

單擊"圖形"按鈕,結果如圖4-13所示。

圖4-13 程序的運行結果--顯示窗體Form2

附程序的完整源代碼:

程序清單(多窗體.bas文件內容)

Attribute VB_Name = "Module1"

Global a1 As Single

Global a2 As Single

Global a3 As Single

Global a4 As Single

'定義四個全局變量

程序清單(多窗體1.frm內容)

VERSION 6.00

Begin VB.Form Form1

Caption = "Form1"

ClientHeight = 2565

ClientLeft = 60

ClientTop = 345

ClientWidth = 3975

LinkTopic = "Form1"

ScaleHeight = 2565

ScaleWidth = 3975

StartUpPosition = 3 'Windows Default

Begin VB.CommandButton Command2

Caption = "退 出"

BeginProperty Font

Name = "宋體"

Size = 14.25

Charset = 134

Weight = 400

Underline = 0 'False

Italic = 0 'False

Strikethrough = 0 'False

EndProperty

Height = 375

Left = 2280

TabIndex = 10

Top = 2040

Width = 1215

End

Begin VB.CommandButton Command1

Caption = "圖 形"

BeginProperty Font

Name = "宋體"

Size = 14.25

Charset = 134