3 基本輸出入介面設計 學習表單物件常見的屬性 學習表單物件常用的事件程序 學習 Label 標籤控制項的使用 學習 Button 按鈕控制項的使用 學習 TextBox 文字方塊控制項的使用 學習如何將文字作格式化輸出 學習使用 InputBox 函式接受資料輸入 學習使用 MsgBox 函式與 MsgBox 敘述輸出提示
Visual Basic 基礎必修課 3.1 表單物件常見屬性 前面章節已介紹過建立輸出入介面是設計 Window Form 應用程式時的首要工作, 由於 Window 視窗作業系統具有高親和力和統一的圖形化輸出入操作介面, 在 Windows 下的 視窗 VB 稱為 表單, 就是在 VS2015 的 IDE 整合開發環境下, 透過工具箱提供的工具類別, 可在表單上不用寫程式便能快速地將工具拖曳到表單上建立輸出入介面 所以表單相當於一個容器, 允許將工具箱的工具安置其中, 做為使用者的操作介面 我們將表單以及由工具箱的工具類別拖曳到表單上的工具稱為 控制項 或 物件 每個表單和控制項都有其所屬的屬性和方法, 至於表單或控制項可能擁有相同的屬性, 也可能只有表單或該控制項所獨有, 每個屬性皆賦予預設值, 可依程式需求來加以修改 透過屬性值的改變使得同類別的表單或控制項, 擁有不同的外觀和功能 至於如何更改表單或控制項的屬性可在程式設計階段透過屬性視窗來設定 ; 另一方式是在程式執行階段由程式碼來設定 由於表單是一個很重要的物件, 本節先介紹有關表單常用的屬性和方法, 熟悉表單的使用, 對學習後面章節介紹的控制項時有事半功倍之效 現就再進入 IDE 整合開發環境, 執行 檔案(F)/ 新增專案 (P) 指令新增一個 Windows Form 應用程式的專案, 此時所開啟 IDE 整合開發環境的右下方會出現屬性視窗 若屬性視窗未出現, 執行功能表 檢視 (V)/ 屬性視窗 (W) 功能開啟屬性視窗 屬性視窗 3-2
基本輸出入介面設計 3 至於在表單設計模式透過屬性視窗修改表單或控制項屬性內容的操作要領如下 : 1. 開啟屬性視窗有下列方式 : 1 在欲修改的表單或控制項上壓滑鼠右鍵, 由快顯功能表選取 屬性 (R) 功能開啟屬性視窗 執行功能表 檢視 (V)/ 屬性視窗 (W) 開啟屬性視窗 2. 查詢或更改屬性視窗內的屬性有兩種方式, 依個人習慣擇一 : 1 分類鈕 : 屬性按照外觀 行為 其他 協助工具 配置等類型來分類排列 字母鈕 : 屬性會按照屬性的英文名稱 A-Z 順序排列 字母類 分類鈕 物件清單下拉鈕 工具列按鈕 展開鈕 關閉鈕 屬性名稱 屬性功能說明 預設屬性值 3. 拖曳屬性視窗的垂直捲軸選取欲修改的屬性 3-3
基本輸出入介面設計 3 屬性名稱 FormBorderStyle 預設值 Sizable 說明設定表單邊界樣式, 執行時才會看到設定的結果 : None( 沒有框線 ) FixedSingle( 單線固定 ) Fixed3D( 立體固定 ) FixedDialog( 雙線固定對話方塊 ) Sizable( 大小可調整 ) FixedToolWindow( 單線固定工具視窗 ) SizableToolWindow( 可調整工具視窗 ) [ 例 ] 將表單邊界樣式設為立體固定, 寫法如下 : Me.FormBorderStyle = Windows.Forms.FormBorderStyle.Fixed3D 下面以設定表單的 Text 標題關聯文字屬性值為例, 學習如何在表單設計模式透過屬性視窗來設定屬性的方法 將表單標題欄上的關聯文字設為 VB 新世代 在表單上空白處按一下, 則表單的右側 右下與下方各出現一個小方框, 此動作將表單設為 作用表單 到屬性視窗工具列按分類鈕, 使屬性按照 外觀 行為 其他 等類型來分類排列 操作捲動鈕直到 外觀 類型的屬性出現 再點按 Text 屬性 捲動鈕 3-5
Visual Basic 基礎必修課 點按 Text 屬性值欄, 將關聯文字由預設值 Form1 改為 VB 新世代 結果表單標題欄的關聯文字改成 VB 新世代 將表單的背景色由預設的 系統 標籤頁之 Control 改為 自訂 標籤頁的 黃色 先選取表單成作用表單, 再到屬性視窗點選 BackColor 屬性 到屬性值欄右側點按 下拉鈕, 出現 系統 標籤頁的顏色清單 切換到 自訂 標籤頁出現色盤 點選 黃色 色塊 3-6
基本輸出入介面設計 3 完成上述操作之後, 結果表單內的背景色改為 黃色 黃色背景色 如何設定表單的背景圖片, 背景圖片存於書附光碟 ch03\vb.jpg 1. 選取表單, 再到屬性視窗點選 BackgroudImage 屬性 2. 按該屬性值欄的鈕開啟 選取資源 對話方塊 3. 在 選取資源 對話方塊中, 到 資源內容 框架內點, 再按鈕開啟 開啟 對話方塊 4. 在 開啟 對話方塊中, 點選書附光碟 [ch03/vb.jpg] 圖片檔, 按鈕, 返回 選取資源 對話方塊 5 返回 選取資源 對話方塊後, 觀察圖片預覽區的內容, 按鈕 6. 結果表單內的背景圖呈現所選取的圖片內容 3-7
Visual Basic 基礎必修課 注意 1 選取本選項, 不會將圖檔加到方案資料夾, 拷貝程式時必 須另外將圖檔和其資料夾路徑一起拷貝 選取本選項, 自動將圖檔加入到方案資料夾下的 Resource 資料夾內, 拷貝時不用再拷貝圖檔和其資料夾路徑 3.1.2 視窗樣式的屬性 屬性名稱 ControlBox 預設值為 True HelpButton 預設值為 False Icon 預設值為 MaximizeBox 預設值為 True MinimizeBox 預設值為 True ShowInTaskbar 預設值為 True TopMost 預設值為 False 設定是否顯示控制盒 設定是否顯示求助按鈕 說明 設定表單縮小時所用的圖示 設定是否顯示最大化鈕 設定是否顯示最小化鈕 當按視窗右上角的最小化鈕是否顯示在視窗正下方的工作列上 True 表顯示 ;False 表不顯示 設定表單是否允許被其他視窗遮蓋 True: 不允許置最上層 ;False 允許遮蓋 3.1.3 配置類型的屬性 屬性名稱 Location 預設值為 0,0 說明 設定表單左上角位置 以螢幕左上角為基準, 向右及向下的座標值來表示 [ 例 ] 將表單左上角座標設為 (200,200), 寫法 : Me.Location = New Point(200,200) 3-8
基本輸出入介面設計 3 屬性名稱 Location/X 子屬性預設值為 0 Location/Y 子屬性預設值為 0 Size 預設值 300,300 Size/ Width 子屬性預設值為 300 Size/ Height 子屬性預設值為 300 說明 設定表單左上角距離螢幕左邊界的水平距離 [ 例 ] 取得表單左上角 x 座標值 x = Me.Location.X 設定表單左上角距離螢幕上邊界的垂直距離 [ 例 ] 取得表單左上角 y 座標值 y = Me.Location.Y 設定表單的尺寸大小 [ 例 ] 將表單大小設為 (200,200) Me.Size = New Size(200,200) 設定表單的水平寬度 [ 例 ] 取得表單與視窗左邊界的距離 width = Me.Size.Width 設定表單的垂直高度 [ 例 ] 取得表單與視窗上邊界的距離 height = Me.Size.Height StartPosition 預設值 : WindowsDefault Location 設定初始化視窗在螢幕出現時的位置有五種狀態 : Manual( 手動 ) CenterScreen( 螢幕中央 ) WindowsDefaultLocation( 預設位置 ) WindowsDefaultBounds( 螢幕中央並調整邊界為適當大小 ) CenterParent( 父視窗中央 ) WindowState 預設值 Normal 設定表單執行的狀態 : Normal( 一般 ): 表單為設計階段大小 Minimized( 最小化 ): 表單縮為圖示, 置於工作列上 Maximized( 最大化 ): 表單放大佔滿整個螢幕 [ 例 ] 設定表單最大化 Me.WindowState = FormWindowState.Maximize 在程式中的座標和數學上的座標不同, 表單的左上角座標值為 (0,0), 小括號內的第一個參數 X 座標值也就是水平距離 ; 第二個參數為 Y 座標值也就是垂直距離 所以, 表單左上角座標水平方向向右為正 ; 垂直方向向下為正 上表中的 StartPosition 屬性值, 可以設定程式執行時表單在螢幕顯示的起始位 3-9
Visual Basic 基礎必修課 置 若要指定表單顯示的座標位置, 要先選取表單, 再到屬性視窗將 StartPosition 屬性值設為 Manual, 然後再設定 Location 屬性值, 就可以指定表單的起始座標 若要設定表單以最大化方式顯示, 是要設 WindowState 的屬性值為 Maximized, 而不是設定 MaximizeBox 的屬性值為 True (0,0) X 軸 Y 軸 X Y Left Top (200,150) 表單 Height (300) 600 Pixels Width (400) (0,599) 800 Pixels (799,599) 3.2 表單物件常用的事件 在 Windows 作業系統下, 我們將使用者在輸出入介面的每一個動作都視為 事件, 事件會被作業系統所攔截, 並傳遞給應用程式的處理程序來處理 它是採事件驅動 (Event-Driven) 的觀念 在第一章已對 事件驅動 做過簡單的介紹 事件驅動是指程式執行時, 程式會不斷地偵測使用者是否有觸發事件? 再根據系統所判斷出的事件名稱, 執行該事件處理程序內所撰寫的程式碼 由於程式執行時的流程是由操作者決定, 因此每次執行流程未必一樣 事件是物件傳送訊息給應用程式, 通知有事情發生需要處理, 而傳送訊息的動作稱為 觸動事件 或 引發事件 3-10
基本輸出入介面設計 3 所觸動的事件要如何處理, 就以程式碼 ( 指令或敘述 ) 撰寫在該事件處理程序裡 例如 : 家中門鈴響, 就是 門鈴 物件的 按一下 事件被觸動, 發出訊息 ( 門鈴聲 ) 通知有人來 我們可將要處理方式的程式碼寫在 門鈴 _ 按一下 事件處理程序中, 其處理方式若是熟識的人就開門歡迎 ; 若是推銷員就假裝不在家 VB 對事件處理程序的命名, 結合了事件傳送者 ( 表單或控制項 ) 的物件名稱和事件名稱, 兩者中間以底線作區隔 例如 : 在表單上按一下會觸動表單的 Click 事件, 若表單名稱為 Form1, 其 Click 事件處理程序的寫法如下 : Private Sub Form1_Load (sender As Object, e As EventArgs) Handles MyBase.Load 引數 1 引數 2 事件名稱物件名稱 定義將要處理的事件 End Sub 物件包括表單或控制項, 它們都有自己本身對應的事件 有些事件可能是某控制項所獨有, 也可能其他的控制項也具有 譬如 : 在表單物件上按一下會觸動該表單的 Click 事件, 在按鈕控制項上按一下也會觸動該按鈕的 Click 事件 表單物件有 Load 事件, 但是按鈕控制項則沒有 Load 事件 本節先介紹表單物件常見到的四個事件, 依序為 Load Activated Click DoubleClick 表單事件名稱 Load ( 預設事件 ) 說明 是表單的預設事件, 只要在表單上無放置控制項的地方快按滑鼠兩下即進入表單的 Load 事件程式碼編輯環境 Load 事件是程式開始執行第一次載入表單時, 優先執行的事件處理程序 通常由程式開始執行至結束只被執行一次 在此事件處理程序中用來設定物件屬性的初值 3-11
Visual Basic 基礎必修課 表單事件名稱 Activated Click DoubleClick 說明 當表單載入時最先執行 Load 事件處理程序, 接著執行該表單的 Activated 事件處理程序 Activated 事件的發生時機是每當表單成為作用表單時, 即會觸動該表單的 Activated 事件 此事件在程式執行中被觸發的次數不止一次 表單被設為 作用表單 的情況有下列三種 : 表單第一次被載入時, 先執行 Load 事件處理程序, 接著執行 Activated 事件處理程序 使用滑鼠游標點選表單, 使它置於其他表單最上層, 此時該表單就成為 作用表單 若將表單最小化至工作列, 再把它開啟時, 該表單會被放在桌面的最上層, 此時該表單就成為 作用表單 程式執行時, 在表單內沒有放置控制項的地方按滑鼠左鍵一下時, 就會觸動該表單物件的 Click 事件處理程序 程式執行時, 在表單內沒放控制項的地方快按滑鼠左鍵二下時, 就會觸動該表單的 DoubleClick 事件處理程序 由於執行 DoubleClick 事件前,Click 事件會先被觸動, 設計程式時要注意兩事件的先後關係 例如 : 在 Click 事件設某數加 1, 在 DoubleClick 事件設某數加 2 實際執行 DoubleClick 事件後某數會加 3, 因為在 Click 事件處理程序內某數先加 1, 在 DoubleClick 事件處理程序內又再加 2 FileName:event_test.sln 試依據 Form1 表單物件發生下列事件, 寫出各事件設定相關屬性的程式碼 : Load 事件標題欄顯示 " 執行 Load 事件 --> ", 並將表單最大化 Activated 事件標題欄顯示 " 執行 Activated 事件 --> ", 並將表單的背景色設成橘色 (Orange) 3-12
基本輸出入介面設計 3 Click 事件標題欄顯示 " 執行 Click 事件 --> ", 並將表單的背景色設成綠色 (Green) DoubleClick 事件標題欄顯示 " 執行 DoubleClick 事件 --> ", 並將表單的背景色設成灰色 (Gray) 解題技巧 建立專案和表單 Load 事件處理程序 1. 建立專案名稱為 eventtest 的 Windows Form 應用程式專案 2. 由於 Load 為表單的預設事件, 允許在表單空白處快按兩下, 直接進入 Form1_Load 事件處理程序的編碼窗格 3. 本例要求在 Form1_Load 事件處理程序內做下列屬性初值設定 : 1 將標題欄的 Text 關聯文字屬性更名為 執行 Load 事件 --> 將表單的 WindowState 屬性設成最大化 Private Sub Form1_Load (sender As Object, e As EventArgs) Handles MyBase.Load Me.Text = " 執行 Load 事件 --> " Me.WindowState = FormWindowState.Maximized End Sub 4. 按鍵執行程式, 注意程式視窗標題的文字變化及表單已經被最大化充滿整個螢幕 點選程式視窗右上方的關閉鈕, 關閉表單 建立表單物件的 Form1_Activated 事件處理程序 3-13
Visual Basic 基礎必修課 1. 在 屬性視窗 工具列, 先按鈕, 再點按鈕拉出表單的事件清單, 將事件名稱按字母順序排列 接著再移動滑鼠到 Activated 事件名稱上快按兩下, 進入程式編碼視窗的 Activated 事件處理程序內 快按兩下 2. 本例要求在 Form1_Activated 事件處理程序內做下列屬性初值設定 : 1 將標題欄的關聯文字 Text 屬性更名為 執行 Activated 事件 --> 將表單的背景色 (BackColor) 改為橘色 (Orange) Private Sub Form1_Activated (sender As Object, e As EventArgs) Handles MyBase.Activated Me.Text = " 執行 Activated 事件 --> " Me.BackColor = Color.Orange End Sub 3. 按鍵執行程式, 注意程式視窗標題的文字變化, 由於開啟表單時會先執行表單的 Load 事件處理程序後, 標題欄後面插入 " 執行 Load 事件 --> 且表單被最大化 接著才執行 Activated 事件處理程序, 表單背景色變成橘色, 且在目前標題欄名稱後面再接 " 執行 Activated 事件 --> " 訊息 3-14 4. 點選程式視窗右上方的關閉鈕, 關閉表單
基本輸出入介面設計 3 建立表單物件的 Form1_Click 事件處理程序 1. 另一種建立事件處理程序方式, 移動滑鼠到表單上按滑鼠右鍵由快顯功能表清單中選取 檢視程式碼 進入程式碼編輯視窗 2. 按下圖左窗格 物件下拉式清單 的下拉鈕由清單中選取 Form1 事件 3. 再按右窗格 事件下拉式清單 的下拉鈕由清單中選取 Click 事件 進入 Form1_Click 事件處理程序的編輯程式碼窗格 4. 在 Form1_Click 事件處理程序內輸入下列程式碼 : Private Sub Form1_Click (sender As Object, e As EventArgs) Handles MyBase.Click Me.Text = " 執行 Click 事件 -->" Me.BackColor = Color.Green End Sub 3-15
Visual Basic 基礎必修課 建立表單物件的 Form1_DoubleClick 事件處理程序 1. 按照上面建立事件方式, 在編碼窗格中, 先在左窗格物件下拉式清單中選取 (Form1 事件 ), 再到右窗格事件下拉式清單中選取 DoubleClick 事件 2. 在 Form1_DoubleClick 事件處理程序內輸入下列程式碼 : Private Sub Form1_DoubleClick(sender As Object, e As EventArgs) Handles MyBase.DoubleClick Me.Text = " 執行 DoubleClick 事件 -->" Me.BackColor = Color.Gray End Sub 按照下列指示操作觀察各事件變化情形 : 1. 按鍵執行程式, 先執行 Form1_Load() 事件處理程序, 接著執行 Form1_Activated() 事件處理程序 2. 在表單上按一下觸動 Form1_Click() 事件處理程序 執行 Form1_Click() 事件, 將表單背景色變成綠色, 標題欄名稱尾部加上 " 執行 Click 事件 -->" 3-16 3. 在表單上快按兩下依序觸動 Form1_Click() 和 Form1_DoubleClick() 事件處理程序, 將表單背景色變成灰色, 標題欄名稱尾部加上 " 執行 Click 事件 --> DoubleClick 事件 -->"
基本輸出入介面設計 3 4. 先將表單最小化將表單以圖示置於下方的工作列, 在到視窗最下方工作列點選此表單會觸動表單的 Form1_Activated() 事件處理程序 5. 點選程式視窗右上方的關閉鈕, 關閉表單 完整程式碼 FileName: event_test.sln 01 Public Class Form1 02 Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load 03 Me.Text = " 執行 Load 事件 --> " 04 Me.WindowState = FormWindowState.Maximized 05 End Sub 06 07 Private Sub Form1_Activated(sender As Object, e As EventArgs) Handles Me.Activated 08 Me.Text = "Activated 事件 --> " 09 Me.BackColor = Color.Orange 10 End Sub 11 12 Private Sub Form1_Click(sender As Object, e As EventArgs) Handles MyBase.Click 13 Me.Text = "Click 事件 --> " 14 Me.BackColor = Color.Green 15 End Sub 16 3-17
Visual Basic 基礎必修課 17 Private Sub Form1_DoubleClick(sender As Object, e As EventArgs) Handles _ Me.DoubleClick 18 Me.Text = "DoubleClick 事件 --> " 19 Me.BackColor = Color.Gray 20 End Sub 21 End Class 3.3 標籤控制項 使用 Label 標籤控制項可在表單上提供輸出入訊息, 譬如提示訊息 可用來顯示程式執行過程或最後結果的相關訊息, 但要注意標籤控制項只能顯示文數字資料, 無法透過鍵盤來輸入資料 3.3.1 標籤控制項常用的屬性 屬性名稱 Name ( 預設值 Label1) AutoSize ( 預設值 True) BorderStyle ( 預設值 None) Font/ Name ( 預設新細明體 ) Font/ Size ( 預設值 9) 說明 設定控制項名稱, 在此為標籤控制項的物件名稱 設定控制項的寬度是否隨文字的寬度自動調整 [ 例 ] 將 Label1 標籤控制項寬度固定不自動調整寫法 : Label1.AutoSize = False 設定標籤控制項的框線樣式 : None ( 沒有框線 ) FixedSingle ( 單線固定 ) Fixed3D ( 立體固定 ) [ 例 ] 將 Label1 標籤控制項邊框設成立體固定 寫法 : Label1.BorderStyle=BorderStyle.Fixed3D 用來設定顯示字體的字型名稱, 不同字型名稱會顯示不一樣效果的字體 用來設定字體大小 3-18
基本輸出入介面設計 3 屬性名稱 Font/ Unit ( 預設值 Point) Font/ Bold ( 預設值 False) Font/ Italic ( 預設值 False) Font/Strikeout ( 預設值 False) Font/Underline ( 預設值 False) ForeColor ( 預設值 Control) Image ( 預設值為無 ) ImageAlign Text ( 預設值 Label1) TextAlign ( 預設值 TopLeft) 說明 設定字體大小的單位, 有下列 6 種 : World ( 全局座標系統 ) Pixel ( 像素 ) Point ( 點數 - 印表機的單位,1 點為 1/72 英吋 ) 預設值 Inch ( 英吋 ) Document ( 文件單位 - 一單位為 1/300 英吋 ) Millimeter ( 公厘 ) True ( 以粗體字顯示 ) False ( 非粗體字 ) True ( 以斜體字顯示 ) False ( 非斜體字 ) - 預設值 True ( 字體顯示時加刪除線 ) False ( 不加刪除線 ) True ( 字體顯示時加底線 ) False ( 不加底線 ) 設定物件或控制項的前景色, 在標籤控制項中 ForeColor 屬性就是用來設定文字的顏色 顯示圖形, 使用方式與表單的 BackgroundImage 相同 當 Image 屬性有存入圖片時, 用來安排圖片在控制項上面的位置 屬性值和 TextAlign 相同 標籤控制項上面顯示的關聯文字, 可當輸入的提示訊息或顯示輸出結果 設定控制項上面 Text 屬性值對齊方式 : 1 TopLeft ( 左上 ) 3 BottomLeft ( 左下 ) MiddleCenter ( 置中 ) 7 TopRight ( 右上 ) 9 BottomRight ( 右下 ) MiddleLeft ( 左中 ) 4 TopMiddle ( 中上 ) 6 BottomMiddle ( 中下 ) 8 MiddleRight ( 右中 ) [ 例 ] 將 Label1 標籤控制項內的文字設成右上角顯示, 寫法 : Label1.TextAlign = ContentAlignment.TopRight 3-19
Visual Basic 基礎必修課 每個表單或控制項都有一個 Name 物件名稱屬性, 主要用在程式中叫用 一般在建立時都會賦予預設的物件名稱 如表單物件預設名稱為 Form1 Form2 ; 標籤控制項預設名稱為 Label1 Label2 物件除了可延用預設名稱外, 也可自行命名以方便在程式中辨識 為了方便程式中的物件名稱容易辨識該物件是屬哪類的物件, 最好在名稱的前面加上代表該控制項的前置字串 如 : 在標籤控制項上面顯示的關聯文字為 100 元 代表單價, 可將標籤控制項的 Name 屬性命名為 lblprice, lbl 代表標籤控制項, Price 代表單價 至於 100 元 則是物件名稱為 lblprice 的 Text 屬性值, 而 lblprice 是 Name 的屬性值 即 lblprice.text = "100 元 " 3.3.2 Font 屬性的設定表單或控制項的 Font 字型屬性主要是用來設定在表單或該控制項上面所顯示關聯文字的字型種類 字型樣式 字型大小 顯示效果 下面以 Label1 標籤控制項為例分別在表單設計模式或程式執行模式來設定 Text 關聯文字屬性値的字型大小為 12, 字型種類為標楷體, 樣式為粗體 : 1. 表單設計模式 點選工具箱中標籤工具類別, 然後在表單上按一下或拖曳滑鼠, 就會建立一個 Label1 標籤控制項 先點選標籤控制項成作用控制項, 然後到屬性視窗點選 Font 屬性 再按屬性值的按鈕, 開啟 字型 對話方塊, 再按照右下圖操作 3-20
基本輸出入介面設計 3 2. 程式執行模式程式中可使用 New Font() 來設定字型的種類 大小 樣式 譬如 : 將 Label1 標籤控制項內字體大小設為 12, 並以 標楷體 粗體 顯示, 其寫法如下 : Label1.Font = New Font(" 標楷體 ", 12, FontStyle.Bold) 字型樣式 (FontStyle) 參數有 :Bold( 粗體 ) Italic( 斜體 ) Regular( 標準 ) Strikeout( 刪除線 ) 和 Underline( 底線 ) 3.4 按鈕控制項 當你在表單上輸入資料時, 系統本身並不知道是否已經輸入資料完畢, 必須搭配按鈕 (Button) 來做確認的工作 還有表單上顯示的資料是否看完, 系統本身並不知道, 亦必須透過按鈕來做確認的工作 所以按鈕控制項是視窗程式設計使用頻率很高的控制項之一 3-21
Visual Basic 基礎必修課 3.4.1 按鈕控制項常用的屬性 屬性名稱 Enabled ( 預設值 True) TabIndex TabStop 預設值 True Visible ( 預設值 True) 說明 設定按鈕是否有效 True: 按鈕按下去有效 ;False: 按鈕無效 [ 例 ] 將 Button1 按鈕設為失效, 按鈕上面的文字會呈灰色 即設按鈕的 Click 事件不會被觸動 Button1.Enabled = False 設定控制項駐停的順序, 而當按鍵時, 會使現有的控制項按該順序來輪流當作用控制項 按照建立的順序由 0 開始編號 設定控制項是否有駐停點 ( 焦點 ), 若有, 按控制項才有機會被停駐輪流當作用控制項, 鍵時, 該 設定按鈕是否顯現 True 按鈕可見 ;False 按鈕被隱藏 [ 例 ] 將 Button1 按鈕設為隱藏看不到 Button1.Visible = True 3.4.2 按鈕控制項常用的事件 -Click 事件 Click 事件為按鈕的預設事件 表單或控制項都有自己的預設事件, 預設事件是指該事件為該物件的常用事件 只要在表單設計模式下, 移動滑鼠到表單或控制項上快滑鼠兩下, 便進入表單或該控制項的預設事件的程式碼編輯模式 譬如 : 程式執行時在表單中的鈕上按一下, 系統馬上執行該按鈕對應的 Click 事件處理程序 FileName:moveControl.sln 製作一個可上下移動控制項的程式 當按鈕, 第三次工業革命 -3D 列印 往上移 10 Pixels; 按鈕, 第三次工業革命 - 3D 列印 往下移 10 Pixels 按鈕或鈕無效 3-22
基本輸出入介面設計 3 輸出要求 解題技巧建立輸出入介面 1. 依輸出結果本例需建立一個標籤控制項用來存放 第三次工業革命 - 3D 列印 文字 2. 四個按鈕 鈕有效, 鈕無效 3. 在標籤控制項上壓滑鼠右鍵選取 提到最上層 (B) 指令避免移動標籤控制項被按鈕遮住 4. 表單上各控制項的 Name 和 Text 屬性修改如下 : Name=btnLeft Name=btnUp Name=btnRight Name=lblMove Name=btnDown 撰寫相關事件處理程序 1. 表單載入觸動 Form1_Load 事件處理程序時, 修改下列屬性的初值 : 1 將 lblmove 標籤控制項的 Text 關聯文字屬性值由 Label1 改成 " 第三次工業革命 -3D 列印 " 3-23
Visual Basic 基礎必修課 由於 第三次工業革命 - 3D 列印 本例要求以標楷體 大小 12 粗體字顯示, 必須以 New Font() 來設定 Font 屬性 3 第三次工業革命 - 3D 列印 標籤控制項以淺藍 (Cyan) 底 深藍 (Blue) 字顯示, 必須修改 BackColor 和 ForeColor 屬性 4 由於左右按鈕失效, 必須將兩者的 Enabled 屬性設為 False 2. 按鈕, 將 lblmove 標籤控制項往上移 10 pixels, 必須將往上移動作的程式碼寫在 btnup_click 事件處理程序內, 其做法如下 : 1 先取得 lblmove 標籤控制項的左上角座標置入 x 和 y 變數 上移是改變 y 座標值, 將 y 值減 10 3 使用 New Point(x,y) 將新的左上角座標指定給 lblmove 的 Location 屬性, 即完成上移的動作 3. 按鈕, 將 lblmove 標籤控制項往下移 10 pixels, 需將下移的動作的程式碼寫在 btndown_click 事件處理程序內, 做法和上一步驟類似, 將 y 值加 10 3-24 完整程式碼 FileName: movecontrol.sln 01 Public Class Form1 02 Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load 03 lblmove.text = " 第三次工業革命 -3D 列印 " 04 lblmove.font = New Font(" 標楷體 ", 12, FontStyle.Bold) 05 lblmove.backcolor = Color.Cyan 06 lblmove.forecolor = Color.Blue 07 lblmove.location = New Point(100, 100) 08 btnright.enabled = False 09 btnleft.enabled = False 10 End Sub 11 12 Private Sub btnup_click(sender As Object, e As EventArgs) Handles btnup.click 13 Dim x, y As Integer 14 x = lblmove.location.x 15 y = lblmove.location.y - 10 16 lblmove.location = New Point(x, y) 17 End Sub 18
基本輸出入介面設計 3 19 Private Sub btndown_click(sender As Object, e As EventArgs) Handles btndown.click 20 Dim x, y As Integer 21 x = lblmove.location.x 22 y = lblmove.location.y + 10 23 lblmove.location = New Point(x, y) 24 End Sub 25 End Class 馬上練習 延續上一範例將左 右按鈕變成有效, 按右鈕增加 10 Pixels, 按左減掉 10 Pixels 變成可以上下左右移動的標籤控制項 3.5 文字方塊 TextBox 標籤控制項僅能在表單上顯示資料, 卻無法做輸入資料或修改資料的動作 若使用者需要對表單上的資料做輸入或修改的動作, 此時就必須使用工具 箱的 文字方塊工具來完成 所以 文字方塊 控制項是允許輸入 修改和顯示資料, 也就是說它具有讀寫功能, 而標籤控制項只具有唯讀功能 3.5.1 文字方塊控制項常用的屬性 屬性名稱 MaxLength ( 預設值 :32,767) 說明 設定文字方塊內可容納輸入的最多字元數目 [ 例 ] 限制只能輸入 5 個字元 TextBox1.MaxLength = 5 Text ( 預設值 : 空字元 ) 設定文字方塊上面顯示的關聯文字 輸入的資料會以字串方式存入到 Text 屬性 若在設計或執行階段此屬性值有異動, 文字方塊上的資料亦跟著異動 PasswordChar ( 預設值 : 空字元 ) 由鍵盤在控制項內輸入字元時, 輸入的字元不直接顯示, 改由指定的字元取代 適用於密碼輸入 使用時 MultiLine 屬性值應設為 False [ 例 ] TextBox1 文字方塊輸入時改用星號取代輸入字元 TextBox1.PasswordChar = "*" 3-25
Visual Basic 基礎必修課 屬性名稱 ReadOnly ( 預設值 :False) MultiLine ( 預設值為 False) WordWrap ( 預設值為 True) ScrollBars ( 預設值為 None) 說明 設定文字方塊內的資料是否允許修改 若為 False 表允許修改 ; 若為 True, 表唯讀無法修改和標籤控制項一樣只能顯示 [ 例 ] TextBox1 文字方塊設成唯讀狀態 TextBox1.ReadOnly = True 當顯示文字資料超過控制項所設定寬度時, 決定是否採多行或單行顯示資料 若為 False 表不允許多行顯示 ; 若設為 True 表允許多行顯示 [ 註 1] [ 例 ] TextBox1 文字方塊控制項設成多行顯示 TextBox1.MultiLine = True 當 MultiLine 屬性值設為 True 時, 可進一步設定文字是否自動換行, 若為 True 表自動換行 [ 註 2] 用來設定在多行顯示的文字方塊控制項內是否出現垂直或水平捲軸 有下列屬性值 : 1 None ( 無 ) 2 Horizontal ( 水平捲軸 ) 3 Vertical ( 垂直捲軸 ) 4 Both ( 水平與垂直捲軸兩者皆有 ) [ 例 ] TextBox1 文字方塊控制項設成有水平捲軸 TextBox1.ScrollBars =ScrollBars.Horizontal [ 註 1] 由於文字方塊控制項的 MultiLine( 多行 ) 屬性, 預設屬性值為 False, 也就是單行顯示 所以當文字資料超過文字方塊控制項的寬度時, 超出的文字資料無法顯示出來 若文字內容多需要多行顯示時, 要將 MultiLine 屬性設為 True, 此時文字方塊控制項就可以拖曳大小來容納多行文字 [ 註 2] 若希望超過文字方塊控制項寬度的資料會自動移到下一行, 可以將 WordWrap( 自動換行 ) 屬性設為 True 當 WordWrap 屬性設為 False 時, 則可以設定 ScrollBars( 捲軸 ) 屬性, 使控制項顯示垂直或水平捲軸, 供使用者拖曳來顯示文字 3.5.2 文字與數值間的轉換函式文字方塊控制項中最常使用的屬性就是 Text 關聯文字屬性, 不管輸入的資料是文字或是數值,VB 自動轉成字串存入 Text 屬性中 因此 Text 屬性値需 3-26
基本輸出入介面設計 3 要計算時必須先使用 Val 函式, 將字串轉成數值資料才能運算 本節先介紹 Val 和 Str 函式簡單的用法, 其語法如下 : 語法 Val(str): 將 str 字串變數或字串常值前面為數字的部份轉成數值資料 Str(num): 將 num 數值變數或數值常值轉換成文字資料 1. Val("168") 168 ( 將字串 168 全部轉成數值) 2. Val("7Eleven") 7 ( 僅將最前面為數字部份 7 轉成數值) 3. Val("Visual Basic 2015") 0 ( 字串第一個字元若非數字傳回數值 0) 4. Str(168) "168 " ( 將數值 168 轉成字串其中 : 空格 ) 5. Val("168") 168 ( 將字串 168 全部轉成數值) 6. Str(-168) "-168" ( 將數值 -168 轉成字串) 7. Str(1.68) "1.68 " ( 將數值 1.68 轉成字串其中 : 空格 ) 3.5.3 文字方塊控制項常用的方法所謂方法 (Method) 就是系統提供給表單或控制項的特定功能 在程式執行的階段, 可以使用表單或控制項本身所提供的 方法, 協助我們快速解決問題 下面介紹文字方塊控制項所提供常用的方法 : 一 Clear( ) 方法 Clear() 方法用來將文字方塊上面的關聯文字清除 譬如在程式執行時, 要將 TextBox1 文字方塊內顯示的關聯文字清除, 其寫法有下面兩種方式 : TextBox1.Clear( ) TextBox1.Text = "" 使用方法 指定空字串 3-27
Visual Basic 基礎必修課 二 Focus( ) 方法用來設定文字方塊控制項為駐停焦點, 即將插入點游標移到此控制項 所謂 駐停焦點 (Focus) 就是使某個控制項成為作用控制項, 以供使用者操作 控制項具有 TabIndex TabStop 屬性者才具有駐停功能, 欲使用 Focus() 方法必須先將該控制項的 Visible 與 Enabled 屬性值設為 True 才有效 至於 Focus 方法的語法如下 : 語法物件名稱.Focus( ) FileName:bodyCheck.sln 設計一個計算標準體重的程式 使用者輸入身高 ( 最多三位數 ) 後, 分別按或按鈕後, 就會分別計算出男女的標準體重 世界衛生組織計算標準體重公式 : 1 男性標準體重 :( 身高 cm-80) 70 % 女性標準體重 :( 身高 cm-70) 60 % 輸出要求 按 < 男性 > 鈕 按 < 女性 > 鈕 3-28
基本輸出入介面設計 3 解題技巧建立輸出入介面 1. 新增專案並以 bodycheck 為新專案名稱 2. 由執行結果可知, 本範例必須在表單上建立下列各控制項 : 1 txttall 文字方塊控制項用來存放所鍵入的身高 txtweight 文字方塊控制項用來顯示換算後的標準體重 3 btnman 和 btnwoman 按鈕控制項, 分別換算男女的標準體重 Label1 txttall txtweight btnman btnwoman 問題分析 1. 在表單設計階段設定 txttall 文字方塊的 TabIndex 屬性值為 0, 使 txttall 文字方塊取得駐停焦點的最優先順位, 即程式開始執行使用 Focus() 方法將插入點游標駐停在 txttall 文字方塊上 2. 身高文字方塊控制項限輸入三位數的數值, 因此需將 txttall 文字方塊的 Maxlength 屬性值設為 3 因為 Text 屬性值為字串, 因此需用 Val 函式轉為數值, 然後按照公式計算後的標準體重指定給 txtweight 文字方塊 3. 標準體重不允許修改, 也就是只能顯示文字內容, 此時需將 txtweight 文字方塊的 ReadOnly 屬性設為 True 即可 但事實上若只要顯示文字內容, 使用 Label 標籤控制項比文字方塊控制項簡單 4. 按或鈕會觸動所屬控制項的 Click 事件處理程序, 所以將計算公式的程式碼各寫在對應的事件處理程序中 : 1 男生部份先將放在身高 txttall 控制項的資料使用 Val(txtTall.Text) 由字串轉成數 3-29
Visual Basic 基礎必修課 值, 再減去 80 後的結果乘上 0.7( 即 70%), 即為該身高的標準體重 最後透過字串合併以指定輸出格式顯示在 txtweight 體重文字方塊控制項上面 女生部份其作法和男生一樣, 只是將 70% 改成 60% 完整程式碼 FileName: bodycheck.sln 01 Public Class Form1 02 Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load 03 Me.Text = " 計算標準體重 " 04 txttall.maxlength = 3 05 txtweight.readonly = True 06 txttall.tabindex = 0 07 End Sub 08 Private Sub btnman_click(sender As Object, e As EventArgs) Handles btnman.click 09 txtweight.text = " 標準體重? = " & (Val(txtTall.Text) - 80) * 0.7 & " 公斤 " 10 txttall.focus() 11 End Sub 12 Private Sub btnwoman_click(sender As Object, e As EventArgs) Handles _ btnwoman.click 13 txtweight.text = " 標準體重? = " & (Val(txtTall.Text) - 70) * 0.6 & " 公斤 " 14 txttall.focus() 15 End Sub 16 End Class 解題技巧 將上例修改為長度單位換算程式, 依按下的按鈕來換算成英吋或公分 (1 吋 = 2.54 公分 ) 3-30
基本輸出入介面設計 3 FileName:userCheck.sln 試使用 InputBox 函式做輸入使用者名稱的工作, 再透過 MsgBox 敘述來顯示所輸入的使用者名稱 輸出要求 解題技巧問題分析本例開始執行馬上出現左上圖以 InputBox 函式輸入的對話方塊, 輸入 happy 後按鈕, 馬上出現右上圖由 MsgBox 敘述輸出的對話方塊, 顯示 你的使用者名稱是 :happy 所以, 本例不用在表單上建立任何控制項, 必須將程式碼寫在表單的 Form1 _Load 事件處理程序中 編寫程式碼 FileName: usercheck.sln 01 Public Class Form1 02 Private Sub Form1_Load (sender As Object, e As EventArgs) Handles MyBase.Load 03 Dim username As String 04 username = (InputBox(" 請輸入 User Name : ", " 輸入使用者名稱 ",, 200, 200)) 05 MsgBox(" 你的使用者名稱是 :" & username) 06 End Sub 07 End Class 3-47