Ch03 基本輸出入介面設計 視窗程式設計 授課教師：王大瑾.

Presentation on theme: "Ch03 基本輸出入介面設計 視窗程式設計 授課教師：王大瑾."— Presentation transcript:

1 Ch03 基本輸出入介面設計 視窗程式設計 授課教師：王大瑾

2 大綱 表單物件常見的屬性 常用的事件程序 標籤控制項 按鈕控制項 方字方塊控制項 格式化輸出 InputBox函式 MsgBox函式與敘述
2019/1/15

3 表單物件常見的屬性 表單就是一個視窗，是最基本的輸出入介面 像一個容器可將工具箱的工具安置其中。 由工具箱拖曳到表單的工具稱為控制項或物件。
VB 透過工具箱提供工具，不用寫程式便能快速 建立高親和力的圖形化輸出入介面。 表單就是一個視窗，是最基本的輸出入介面 像一個容器可將工具箱的工具安置其中。 由工具箱拖曳到表單的工具稱為控制項或物件。 每個控制項都有所屬的屬性和方法，透過屬性 值改變可讓同類表單或控制項擁有不同外觀和 功能。 2019/1/15

4 表單物件常見的屬性 不同控制項和表單可能擁有相同的屬性， 也可能只有該控制項所獨有。 每個屬性皆有其預設值，可依程式需求來 加以修改。
修改控制項屬性最快方式  在程式編輯設計階段透過屬性視窗來設定。  在程式執行階段依需求在適當時機做設定。 2019/1/15

5 屬性視窗介紹 執行功能表中 [檢視(V)/屬性視窗(W)] 功能可開啟屬性視窗。 2019/1/15

6 1. 查詢或修改屬性  分類鈕： 屬性按照外觀、行為、其他…等類型來分類 排列。  字母鈕： 屬性會按照屬性的 英文名稱順序排列。
 分類鈕： 屬性按照外觀、行為、其他…等類型來分類 排列。  字母鈕： 屬性會按照屬性的 英文名稱順序排列。 2019/1/15

7 2. 如何修改屬性的內容 Step1 - 先在表單上選取欲修改的控制項或表單本身。 - 另一方式到屬性視窗的物件清單下拉鈕按一下 選取控制項或表單本身。 Step2 點選反白欲修改的屬性。 Step3 選取屬性內容右邊可能出現下列圖示：  顯示下拉式清單供您選取。  出現對話方塊供您選取。  若出現插入點游標則直接輸入。 2019/1/15

8 外觀類型的屬性 2019/1/15

9 2019/1/15

10 1. 如何設定表單的標題欄名稱為 Visual Basic
2019/1/15

11 2. 如何設定表單的背景色為 Yellow 2019/1/15

12 3. 如何設定表單的背景圖片 Step1 選取表單，點選 BackgroudImage 屬性。
Step4 在開啟對話方塊中，點選書附 光碟 [ch03/images/Image1. jpg] 圖片檔，按 開啟鈕，返回選取 資源對話方塊。 Step5 返回「選取資源」對話方塊後， 觀察圖片預覽區的內容，按 確定鈕。 Step6 結果表單的背景圖呈現所選取圖片 內容。 2019/1/15

13 視窗樣式的屬性 2019/1/15

14 配置類型的屬性 2019/1/15

15 2019/1/15

16 容器(表單)的左上角座標值為（0,0），小括號內的第一個參數X座標值也就是水平距離；第二個參數為Y座標值也就是垂直距離。水平方向向右為正；垂直方向向下為正。
2019/1/15

17 表單物件常用的事件程序 傳統 DOS 作業系統設計出的程式都會按照 既定流程執行。
Windows 作業系統，採事件驅動觀念。將 使用者操作動作視為「事件」，事件會被作 業系統所攔截，並傳遞給應用程式的處理序 來處理。 事件驅動 是指程式執行時，程式會不斷地等待操作者 觸發事件，才執行該事件程序內所撰寫的 程式碼。由於程式執行時的流程是由操作者 決定，因此每次執行流程未必一樣。 2019/1/15

18 事件是物件傳送訊息給應用程式，通知有事情 發生需要處理，而傳送訊息的動作稱為觸動事件或引發事件。
所觸動的事件要如何處理，就以程式碼寫在 事件程序裡。 如家中門鈴響，就是門鈴物件 的 按一下事件 被觸動，發出訊息（門鈴聲）通知有人來。 將要處理的方式寫在「門鈴_按一下」事件程序：  若是熟識的人，就開門歡迎  若是推銷員，就假裝不在家…。 2019/1/15

19 表單物件常用的事件程序 事件程序的命名是結合事件傳送者(表單或控制項)的 物件名稱和事件名稱，兩者中間以底線作區隔。 在表單上按一下觸動表單的 Click 事件，若表單名稱為 Form1，其Click 事件程序的寫法如下： 物件包括表單或控制項，它們都有自己本身對應的事件。 在表單或按鈕按一下，分別觸動表單或按鈕 Click 事件。 表單物件有 Load 事件，但 按鈕控制項則沒 Load 事件。 2019/1/15

20 2019/1/15

21 [ 注意] 假設 Click 事件程序將某數加1 ; DoubleClick 事件 程序將某數加 2。 執行 DoubleClick 事件後某數會加 因先觸動Click事件程序將某數加 接著執行DoubleClick事件程序將該數再加 總共加3 。 2019/1/15

22 習題一：

23 Step1 建立專案和表單 Load事件程序  建立 專案名稱為 EventTest 。  在表單空白處快按兩下，直接進入 Form1_Load() 事件 程序的編碼視窗。  將標題欄名稱 Text 更名為「表單Load事件測試 ... 」。 將表單的 WindowState 屬性設成最大化。 2019/1/15

24 2019/1/15

25 Step2 建立表單物件的 Form1_Activated 事件程序

26 2019/1/15

27 Step 3 建立表單物件的 Form1_Click 事件程序
2019/1/15

28 2019/1/15

29 Step 4 建立表單物件的 Form1_DoubleClick 事件程序
01 Private Sub Form1_DoubleClick(ByVal sender …. ) Handles Me.DoubleClick Me.Text = "表單 DoubleClick 事件測試 ..." Me.BackColor = Color.Gray 04 End Sub 2019/1/15

30 01 Private Sub Form1_Load(ByVal sender …) Handles MyBase.Load
Me.Text = "表單 Load 事件測試 ..." Me.WindowState = FormWindowState.Maximized 04 End Sub 05 06 Private Sub Form1_Activated(ByVal sender …) Handles _ MyBase.Activated Me.Text = "表單 Activated 事件測試 ..." Me.BackColor = Color.Orange 09 End Sub 10 11 Private Sub Form1_Click(ByVal sender …) Handles Me.Click Me.Text = "表單 Click 事件測試 ..." Me.BackColor = Color.Green 14 End Sub 15 16 Private Sub Form1_DoubleClick(ByVal sender ….) Handles _ Me.DoubleClick Me.Text = "表單 DoubleClick 事件測試 ..." Me.BackColor = Color.Gray 19 End Sub 2019/1/15

31 標籤控制項 (Label) 在表單上提供文字提示訊息、顯示程式執行過程或最後 結果。執行時只能顯示文數字資料，無法輸入文字。
2019/1/15

32 2019/1/15

33 2019/1/15

34 Font 屬性的設定 2019/1/15

35 Font屬性的設定 只要物件含有 Text 屬性，皆可在程式中使用 New Font() 來設定字型的種類、大小、樣式。
如將 Label1 標籤控制項字體大小設為 12， 『標楷體』、『粗體』顯示，寫法： Label1.Font = New Font("標楷體", 12, FontStyle.Bold) 字型樣式(FontStyle) 有：  Bold(粗體)  Italic(斜體)、  Regular(標準)、  Strikeout(刪除線)  Underline(底線)。 2019/1/15

36 按鈕控制項 2019/1/15

37

38 Step1 建立輸出入介面 2019/1/15

39 03 Private Sub Form1_Load(ByVal sender ….) Handles MyBase.Load
Filename : move.sln 01 Public Class Form1 02 03 Private Sub Form1_Load(ByVal sender ….) Handles MyBase.Load lblMove.Text = "海角七號" lblMove.Font = New Font("標楷體", 12, FontStyle.Bold) lblMove.BackColor = Color.Cyan lblMove.ForeColor = Color.Blue lblMove.Location = New Point(100, 100) btnRight.Enabled = False btnLeft.Enabled = False 11 End Sub 12 2019/1/15

40 17 lblMove.Location = New Point(x, y) 18 End Sub 19
13 Private Sub btnUp_Click(ByVal sender … ) Handles _ btnUp.Click, btnLeft.Click, btnRight.Click Dim x, y As Integer x = lblMove.Location.X y = lblMove.Location.Y – 10 lblMove.Location = New Point(x, y) 18 End Sub 19 20 Private Sub btnDown_Click(ByVal sender … ) Handles btnDown.Click Dim x, y As Integer x = lblMove.Location.X y = lblMove.Location.Y + 10 lblMove.Location = New Point(x, y) ‘ 移到新位置 24 End Sub 25 End Class 2019/1/15

41 文字方塊TextBox 文字方塊是可用來輸入、修改和顯示資料。 2019/1/15

42 2019/1/15

43 文字與數值間的轉換函式 在 Text 屬性輸入的文字或是數值，VB 會轉成 字串方式存入 Text 屬性中。
若Text 數性質是數值需先用 Val() 函式，將文字 轉成數值才能運算。語法： 1. Val(str)： 將str字串變數前為數字部份轉成數值資料。 2. Str(num)： 將 num 數值變數值轉換成文字資料。 2019/1/15

44 2019/1/15

45 所謂方法 (Method)，就是系統所提供物件或 控制項的特定功能。 在程式執行的階段，可用物件或控制項的方法協助我們快速完成任務。
文字方塊控制項的常用方法 所謂方法 (Method)，就是系統所提供物件或 控制項的特定功能。 在程式執行的階段，可用物件或控制項的方法協助我們快速完成任務。 一. Clear( )方法 將文字方塊的文字內容清成空白。 程式執行時 將 TextBox1 文字方塊內顯示的文字 清除，寫法： TextBox1.Clear( ) 與 TextBox1.Text = ”” 相同

46 二. Focus( ) 方法 設定文字方塊控制項為駐停焦點。 所謂駐停焦點（Focus）就是使某個控制項成為作用 物件，以供使用者操作。
控制項中有 TabIndex、TabStop 屬性，才可以設定 駐停作用。 要使用 Focus 方法的控制項，其 Visible 與 Enabled 屬性值必須皆設為 True 才有效。 Focus方法的語法： 語法：物件名稱.Focus( ) 2019/1/15

47

48 Step1 建立輸出入介面 2019/1/15

49 Filename : BodyCheck.sln
01 Public Class Form1 02 03 Private Sub Form1_Load(ByVal sender … ) Handles MyBase.Load txtTall.MaxLength = 3 txtWeight.ReadOnly = True txtTall.TabIndex = 0 07 End Sub 08 09 Private Sub btnMan_Click(ByVal sender … ) Handles btnMan.Click txtWeight.Text = "標準體重 = " & (Val(txtTall.Text) - 80) * 0.7 & " 公斤" txtTall.Focus() 12 End Sub 13 14 Private Sub btnWoman_Click(ByVal sender …. ) Handles btnWoman.Click txtWeight.Text = "標準體重 = " & (Val(txtTall.Text) - 70) * 0.6 & " 公斤" txtTall.Focus() 17 End Sub 18 19 End Class 2019/1/15

50 文字方塊控制項的常用事件 一. TextChanged事件（預設事件）
程式執行時，當文字方塊的 Text 屬性值有改變時， 就會觸動該文字方塊的 TextChanged 事件程序。 將和 Text 屬性值有關的敘述，寫在 TextChanged 事件程序中。 在前面範例中，一輸入就立即顯示標準體重的互動 效果，可省掉按鈕控制項。

51 二. Enter 事件 當文字方塊控制項取得駐停焦點時，會觸發 Enter 事件。 通常在該事件中設定文字方塊的文字初值。
如希望某文字方塊預設值為「台中市」， 可在 Enter 事件中設 Text 屬性值為「台中市」， 每當用滑鼠或 <Tab>鍵 移動駐停焦點到該文字方塊時，文字就自動改為「台中市」。 2019/1/15

52 2019/1/15

53 Step1 輸出入介面 2019/1/15

54 Filename : textchange.sln 01 Public Class Form1 02
03 Private Sub txtQtyL_TextChanged(ByVal sender … ) Handles _ txtQtyL.TextChanged, txtQtyS.TextChanged lblSumL.Text =Val( lblPriceL.Text) * Val(txtQtyL.Text) lblSumS.Text =Val( lblPriceS.Text) * Val(txtQtyS.Text) lblTotal.Text = Val(lblSumL.Text) + Val(lblSumS.Text) 07 End Sub 08 09 Private Sub txtQtyL_Enter(ByVal sender …) Handles txtQtyL.Enter txtQtyL.Text = "" 11 End Sub 12 13 Private Sub txtQtyS_Enter(ByVal sender … ) Handles txtQtyS.Enter txtQtyS.Clear 15 End Sub 16 End Class 2019/1/15

55 格式化輸出 輸出資料排列整齊，需對輸出的資料格式化。
早期 Basic 在程式中都使用 Chr(13) 函式來強迫 文字換行顯示，小括號內的參數13 為 Carriage Return 的 ASCII 碼，此表示方式可讀性低。 VB 另提供 vbNewLine 和 vbCrLf 強迫換行字元 常數代替 Chr(13)，提高可讀性。 字元換行常數使用時機是資料需多行顯示時。 如希望 lblMsg 標 籤控制項內，將『最賣座的電影：』 和『海角七號』字串以兩行顯示，寫法： lblMsg.Text = "最賣座的電影：" & vbNewLine & "海角七號" 2019/1/15

56 常用常數 二. vbTab 常數 在記事本中按 <Tab> 鍵會跳到下一個定位點，
定位點和定位點中間可容納 8 個字元，如字串 長度超過就會多佔一個定位點 如字串長度為 10 個字元佔用兩個範圍。 如 txtAddress 文字方塊控制項內，『姓名』、 『電話』和『地址』文字以定位形式顯示。寫法： txtAddress.Text = "姓名" & vbTab & "電話" & vbTab & "地址" 2019/1/15

57 常用函式 string_lenght = Len (”Visual Basic 2008 真好用!”)
一. Len函式 Len函式可以取得字串的長度（字元數），不管是中文字 英文字、空格長度都視為1。下列傳回值為 22： string_lenght = Len (”Visual Basic 2008 真好用!”) 二. Space函式 可產生指定數量的空白字元，在文字顯示時可用該函式 使文字位置對齊。如希望字串長度後面不足補足8位寫法： user_name = txtName.Text & Space(8 - Len(txtName.Text)) 2019/1/15

58 常用函式 可將數值或字串資料，依指定格式轉換成字串。 語法： Format(運算式[, fmt])
運算式可為數值或數值運算式，時間視同數值。 Fmt 代表轉換後字串格式，省略此參數將數值 轉成字串，正數前空白去除。 2019/1/15

59 常用 Format 函式的數字預設格式： 2019/1/15

60 常用 Format 函式的數字自訂格式： 2019/1/15

61 常用Format 函式的時間預設格式 [注意] Now() 函式用來取得目前時間 2019/1/15

62 常用 Format 函式的時間自訂格式： 2019/1/15

63 常用 Format 函式的時間自訂格式： 2019/1/15

64

65 Step1 建立輸出入介面 2019/1/15

66 Filename : ListSalary.sln
01 Private Sub Form1_Load(ByVal sender …) Handles MyBase.Load 02 txtSalary.Text = Space(4) & "碁峰資訊工作室薪資表" & Space(4) _ & Forma t(Now, "G") & vbCrLf & vbCrLf 03 txtSalary.Text & = "姓名" & vbTab & "到職日" & vbTab & Space(2) & _ “薪資" & vbTab & vbTab & "備註" & vbNewLine & vbNewLine 04 txtSalary.Text &= "張三丰" & vbTab & Format(#3/17/1990#, "yy-MM-dd") _ & vbTab & Space(2) & Format(115000, "$ 000,000") & vbTab _ & "經理" & vbCrLf 05 txtSalary.Text &= "喬峰" & vbTab & Format(#8/1/1995#, "yy-MM-dd") _ & vbTab & Space(2) & Format(86100, "$ 000,000") & vbTab & _ "工程師" & vbCrLf 06 txtSalary.Text &= "令狐沖" & vbTab & Format(#7/16/1998#, "yy-MM-dd") _ & vbTab & Space(2) & Format(65000, "$ 000,000") & vbTab & _ "秘書" & vbCrLf 07 End Sub 2019/1/15

67 InputBox函式 不用建立控制項，在函式內所提供的文字輸入框內輸入資料，按 <確定> 鈕，就可達到輸入資料目的。
此函式鍵入資料會以字串型別放入指定的字串變數，語法： city = InputBox("請輸入居住縣市：", "居住地", "台中市" ) 2019/1/15

68 MsgBox 函式與 MsgBox 敘述 MsgBox 函式與 MsgBox 敘述，都不用在表單建立 控制項就會出現訊息對話方塊。
2019/1/15

69 MsgBox 按鈕格式碼 2019/1/15

70 MsgBox按鈕格式碼 警示圖示代碼的相關內容如下表： 2019/1/15

71 MsgBox按鈕格式碼 兩表代碼可相加，如要顯示 和 兩按鈕又要有 圖示，按鈕格式碼等於 17 = 1 + 16。
兩表代碼可相加，如要顯示 和 兩按鈕又要有 圖示，按鈕格式碼等於 17 = 。 注意 0～5 間代碼，因屬於同性質是不可互相累加組合， 16～64亦同。其他代碼的相關內容如下： 2019/1/15

72 2019/1/15

73 MsgBox函式傳回值 2019/1/15

74 在程式中可宣告一個整數變數來存放傳回值，傳回值可查詢上表中的代碼。
例如傳回值為1，表按 鈕。下面敘述使用 return_ value來存放傳回值： 2019/1/15

75 [例] 若按 鈕，結束程式執行 若按 鈕，回原程式。
[例] 若按 鈕，結束程式執行 若按 鈕，回原程式。 Dim result As MsgBoxResult quit = MsgBox("是否結束?", MsgBoxStyle.YesNo , "離開？") Dim quit As MsgBoxResult If (quit = MsgBoxResult.Yes) Then End ' 程式結束 End If 2019/1/15

76 2019/1/15

77 Filename : UserCheck.sln 01 Public Class Form1 02
03 Private Sub Form1_Load(ByVal sender …) Handles MyBase.Load Dim userName As String userName = (InputBox("請輸入 User Name : ", "輸入使用者名稱", , 200, 200)) MsgBox("你的使用者名稱是：" & userName) 07 End Sub 08 09 End Class 2019/1/15