Visual Basic 程式設計圖形化使用者介面

(1)

Visual Basic 程式設計圖形化使用者介面

ListBox & ComboBox

Menu (功能表) and PopupMenu CommonDialog

StatusBar (狀態列)

(2)

ComboBox

屬性

List 所有元素形成的陣列

ListCount 元素的數目

ListIndex 被選擇的元素的位置 -1表示未選擇

Sorted 是否排序 Style 風格

Text 被選擇的元素的內容

(3)

Private Sub Command1_Click() Combo1.AddItem (Text1.Text) End Sub

Private Sub Form_Click() MsgBox Combo1.ListCount MsgBox Combo1.ListIndex

MsgBox Combo1.List(Combo1.ListIndex)

(4)

ComboBox (cont.)

方法

AddItem(字串[,位置]) 新增元素

Clear 清除所有的元素

RemoveItem(數字) 清除某一個元素 Style

vbComboDropDown 可自行輸入 vbComboSimple

vbComboDropDownList 不可自行輸入

(5)

ListBox

屬性

Columns 欄位的數目

List 所有元素形成的陣列

ListCount 元素的數目

ListIndex 被選擇的元素的位置 -1表示未選擇

MultiSelect 是否可以一次選擇多個元素 Sorted 是否排序

Style 風格

(6)

ListBox (cont.)

屬性

Selected(數字) 檢查某個元素是否有被選方法

AddItem(字串[,位置]) 新增元素

Clear 清除所有的元素

RemoveItem(數字) 清除某一個元素 Style

vbListBoxStandard _MultiSelec^不可使用

(7)

ListBox (cont.)

MultiSelect

0 不可同時選擇多個元素

1 可以

2 予許用拖曳的方式選擇

MultiSelect=0

(8)

Private Sub Command1_Click()

If (List1.ListIndex <> -1) Then

Text1.Text = Text1.Text + vbNewLine + _ List1.List(List1.ListIndex) End If

End Sub

Private Sub Command2_Click() Dim i As Integer

For i = 0 To List2.ListCount - 1

If (List2.Selected(i) = True) Then

Text1.Text = Text1.Text + vbNewLine + _ List2.List(i)

End If Next i End Sub

(9)

Try it!

請撰寫一個表單程式，如下圖所示。

(10)

Visual Basic 程式設計圖形化使用者介面

ListBox & ComboBox

Menu (功能表) and PopupMenu CommonDialog

StatusBar (狀態列)

(11)

Menu (功能表)

功能表

之前所設計的程式都是單一畫面或單一功能的程式，如果想要設計更複雜更完整的程式，則需要設計『功能表』。

一個簡單的功能表如右圖：

【名詞】：

1. 標題：功能表列或(次)功能表 選項的文字。

2. 有效指令／失效指令：

有效指令用實體字顯示，

失效指令用虛體字顯示。

3. 快速鍵：可直接按組合鍵執行選項。

4. 核取記號：該選項的開／關狀態。選取此選項時，核取記號由 出現變為消失或由消失變為出現。

(12)

Menu (功能表) (cont.)

按右鍵

註：也可以在工具->Menu Editor中選取

(13)

Menu 實作範例

實作下圖的功能表，詳細規格如下：

(14)

Menu 實作範例 (cont.)

先選取表單，然後執行【工具／功能表編輯器】指令。

將出現如下的功能表編輯器對話方塊。

(15)

1. 設定【格式】功能表與【關於】功能表

1:輸入。

2:出現了格式。

3:輸入

4:按下。

5:輸入。

7:輸入

6:出現了關於。

(16)

2. 設定【轉換為大寫】指令

1:選取關於。 2:按下

3:關於被移往下一個

4:輸入。(&U)將來會變成(U)

5:出現轉換 為大寫(&U)。

7:選取(設定快捷鍵) 6:輸入。

8:按下

9:被移往下一層

(17)

3. 設定【轉換為小寫】指令

1:仿照Step5設定相關欄位。

2:取消啟用。（這樣就變成失效指令）

(18)

4. 設定『分隔線』

設定『分隔線』；如下畫面（把分隔線當作指令來設定）。

1:於欄位中輸入『-』

，將來就會變成分隔線。

(19)

5. 設定『字型』、『第二條分隔線』、

『結束』

參照前面步驟設定『字型』、『第二條分隔線』、『結束』

設定

(20)

6. 插入【底線】指令

在『第二條分隔線』前插入【底線】指令，並如下設定。

1:輸入。

2:輸入

(21)

7. 設定【粗體】指令

1:選取底線。 2:按下

3:底線被移往下一個

4:輸入。

5:出現了粗體。

6:輸入。

7:按下

8:被移往下一層

(22)

8. 設定【斜體】指令

仿照Step7，設定【斜體】指令，結果如圖，最後按下【確定】鈕 即可完成功能表的製作。

1:設定。

2:按下

(23)

9. 完成功能表

執行程式，結果正如我們所要的功能表。

(24)

Menu 實作範例 (cont.)

功能表的程式設計

設計一個透過功能表內所提中的指令進行字型設定的程式。

(25)

Menu 實作範例 (cont.)

5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

Private Sub Form_Load()

If mnuUnderline.Checked Then lblResult.FontUnderline = True Else

lblResult.FontUnderline = False End If

End Sub

Private Sub mnuAbout_Click() Cls

End Sub

Private Sub mnuBold_Click() lblResult.FontBold = True End Sub

Private Sub mnuEnd_Click() End

End Sub

Private Sub mnuItalic_Click()

(26)

Menu 實作範例 (cont.)

30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

Private Sub mnuLowerCase_Click()

lblResult.Caption = "this is a book."

mnuLowerCase.Enabled = Fasle mnuUpperCase.Enabled = True End Sub

Private Sub mnuUnderline_Click() If mnuUnderline.Checked Then

mnuUnderline.Checked = False lblResult.FontUnderline = False Else

mnuUnderline.Checked = True lblResult.FontUnderline = True End If

End Sub

Private Sub mnuUpperCase_Click()

lblResult.Caption = "THIS IS A BOOK."

mnuUpperCase.Enabled = Fasle mnuLowerCase.Enabled = True

(27)

Menu 實作範例 (cont.)

執行【格式／轉換為大寫】、

【格式／底線】、

【格式／字型／粗體】、

【格式／字型／斜體】指令後。

(28)

Try it!

請強化上面的程式，透過功能表的選項讓Label元件能夠修改其背景顏色。

格式顏色

……紅色(R) Ctrl+R

……綠色(G) Ctrl+G

……藍色(B) Ctrl+B

核選式

(29)

Private Sub Blue_Click() Red.Checked = False Green.Checked = False Blue.Checked = True

Line (10, 10)-(50, 50), vbBlue, BF End Sub

Private Sub Exit_Click() End

End Sub

Private Sub Green_Click() Red.Checked = False Green.Checked = True Blue.Checked = False

Line (10, 10)-(50, 50), vbGreen, BF

程式還沒完喔

(30)

PopupMenu

利用Menu Editor製做選單 Visible選False

利用PopupMenu打開popup選單

&File

……&Exit

&pop

……&Left

……&Right

Visible=False

(31)

PopupMenu (cont.)

(32)

PopupMenu (cont.)

Private Sub Center_Click() Text1.Text = “Center”

End Sub

Private Sub form_click() Call PopupMenu(pop)

End Sub

Private Sub Left_Click() Text1.Text = “Left”

End Sub

Private Sub Right_Click() Text1.Text = “Right”

End Sub

(33)

Visual Basic 程式設計圖形化使用者介面

ListBox & ComboBox

Menu (功能表) and PopupMenu CommonDialog

StatusBar (狀態列)

(34)

CommonDialog

新增 (參考ActiveX的方式)

Microsoft Common Dialog Control

方法

ShowColor ShowOpen ShowFont ShowPrinter ShowHelp ShowSave

(35)

選擇顏色-ShowColor

(36)

選擇顏色-ShowColor (cont.)

Private Sub form_click() Dim color As Long

CommonDialog1.Flags = cdlCCRGBInit CommonDialog1.ShowColor

color = CommonDialog1.color

Line (0, 0)-(100, 100), color, BF End Sub

注意形別，只能是Long

要設定 Flag

利用color屬性取得顏色

(37)

選擇字型-ShowFont

(38)

選擇字型-ShowFont (cont.)

執行ShowFont前，設定Flags為

cdlCFBoth, cdlCFPrinterFonts, cdlCFScreenFontsÎ三選一

讀取選取字型屬性

FontBold

FontItalic

FontUnderLine

(39)

選擇字型-ShowFont (cont.)

Private Sub form_click()

CommonDialog1.Flags = cdlCFBoth CommonDialog1.ShowFont

FontSize = CommonDialog1.FontSize FontBold = CommonDialog1.FontBold

FontItalic = CommonDialog1.FontItalic

FontUnderline = CommonDialog1.FontUnderline FontName = CommonDialog1.FontName

Print "你好嗎"

End Sub Form 的屬性

(40)

開啟說明檔-ShowHelp

設定Help檔檔名

HelpFile=“檔名”

設定開啟模式

HelpCommand=cdlHelpKey

HelpCommand=cdlHelpContents

(41)

開啟說明檔-ShowHelp (cont.)

(42)

開啟說明檔-ShowHelp (cont.)

CommonDialog1.HelpFile = _

"c:\winnt\help\dao35.hlp"

CommonDialog1.HelpCommand = _ cdlHelpKey

CommonDialog1.ShowHelp End Sub

請自行指定說明檔的路徑

(43)

開啟檔案-ShowOpen

出現開啟檔案對話盒

傳回使用者輸入的檔案名稱開啟的動作自己做

ShowSave與ShowOpen相似

(44)

開啟檔案-ShowOpen (cont.)

設定Filter

Filter=“描述一|filter1|描述二|filter2……”

Filter=“文字檔|*.txt|圖形檔|*.gif;*.jpg”

取得檔名

FileTitle

取得完整檔名

FileName

(45)

開啟檔案-ShowOpen (cont.)

(46)

Try it!

請使用ShowOpen撰寫一個只能開啟圖片

檔的檔案對話盒，並且將開啟的圖片顯

示在表單中的PictureBox上。

(47)

Visual Basic 程式設計圖形化使用者介面

ListBox & ComboBox

Menu (功能表) and PopMenu CommonDialog

StatusBar (狀態列)

(48)

StatusBar

新增

MicroSoft Windows Common Controls

按右鍵Æ屬性Æ增加Panel

(49)

StatusBar (cont.)

指定順序

(50)

StatusBar (cont.)

Alignment

sbrLeftÆ置左

sbrRightÆ置右

sbrCenterÆ置中

Bevel

sbrNoBevel

sbrInset

SbrRaised

(51)

StatusBar (cont.)

Style

sbrText

sbrDate

sbrTime

sbrCaps

sbrNum

sbrIns

sbrScrl

(52)

StatusBar (cont.)

AutoRaise

sbrNoAutosize

sbrSpringÆ彈簧

sbrContentsÆ依內容調整大小

(53)

StatusBar (cont.)

StatusBar1.Panels(1).Text = "你好嗎"

End Sub

Panel的陣列，從1開始……

Visual Basic 程式設計 圖形化使用者介面

Visual Basic 程式設計 圖形化使用者介面

ListBox & ComboBox

Menu (功能表) and PopupMenu CommonDialog

StatusBar (狀態列)

ComboBox

ComboBox (cont.)

ListBox

ListBox (cont.)

ListBox (cont.)

Try it!

請撰寫一個表單程式，如下圖所示。

Visual Basic 程式設計 圖形化使用者介面

ListBox & ComboBox

Menu (功能表) and PopupMenu CommonDialog

StatusBar (狀態列)

Menu (功能表)

Menu (功能表) (cont.)

Menu 實作範例

Menu 實作範例 (cont.)

1. 設定【格式】功能表與【關於】功能表

2. 設定【轉換為大寫】指令

3. 設定【轉換為小寫】指令

4. 設定『分隔線』

5. 設定『字型』、『第二條分隔線』、

『結束』

6. 插入【底線】指令

7. 設定【粗體】指令

8. 設定【斜體】指令

9. 完成功能表

Menu 實作範例 (cont.)

Menu 實作範例 (cont.)

Menu 實作範例 (cont.)

Menu 實作範例 (cont.)

Try it!

請強化上面的程式，透過功能表的選項 讓Label元件能夠修改其背景顏色。

PopupMenu

利用Menu Editor製做選單 Visible選False

利用PopupMenu打開popup選單

PopupMenu (cont.)

PopupMenu (cont.)

Visual Basic 程式設計 圖形化使用者介面

ListBox & ComboBox

Menu (功能表) and PopupMenu CommonDialog

StatusBar (狀態列)

CommonDialog

新增 (參考ActiveX的方式)

方法

選擇顏色-ShowColor

選擇顏色-ShowColor (cont.)

選擇字型-ShowFont

選擇字型-ShowFont (cont.)

執行ShowFont前，設定Flags為

讀取選取字型屬性

FontSize

FontBold

FontItalic

選擇字型-ShowFont (cont.)

開啟說明檔-ShowHelp

設定Help檔檔名

設定開啟模式

開啟說明檔-ShowHelp (cont.)

開啟說明檔-ShowHelp (cont.)

開啟檔案-ShowOpen

出現開啟檔案對話盒

傳回使用者輸入的檔案名稱 開啟的動作自己做

ShowSave與ShowOpen相似

開啟檔案-ShowOpen (cont.)

設定Filter

取得檔名

取得完整檔名

開啟檔案-ShowOpen (cont.)

Try it!

請使用ShowOpen撰寫一個只能開啟圖片

檔的檔案對話盒，並且將開啟的圖片顯

示在表單中的PictureBox上。

Visual Basic 程式設計 圖形化使用者介面

ListBox & ComboBox

Menu (功能表) and PopMenu CommonDialog

StatusBar (狀態列)

Visual Basic 程式設計圖形化使用者介面

Visual Basic 程式設計圖形化使用者介面

Visual Basic 程式設計圖形化使用者介面

請強化上面的程式，透過功能表的選項讓Label元件能夠修改其背景顏色。

Visual Basic 程式設計圖形化使用者介面

傳回使用者輸入的檔案名稱開啟的動作自己做

Visual Basic 程式設計圖形化使用者介面