第 3 章 表單設計

新觀念的 Visual Basic.NET 教本 第 3 章 表單設計

3-1 與表單設計相關的視窗

與表單設計相關的視窗 工具箱 屬性視窗 表單視窗

與表單設計相關的視窗 表單視窗 : 建立 Windows 應用程式專案之後, 出現在螢幕中央具有格點 (grid) 的視窗就是表單視窗 屬性視窗 : 位於螢幕右邊抬頭有屬性屬性字眼的視窗即是屬性視窗 工具箱 : 工具箱位於螢幕左邊

工具箱的使用 ( 左 ) ( 中 ) 按下此圖示 ( 右 ) 按下此圖示 滑鼠移到上方

工具箱的使用 索引標籤 選取後展開 可以選用的物件 瀏覽可以選用的物件

使用工具箱的技巧 1. 滑鼠右鈕 2. 選取 物件按照英文字母順序排序

使用工具箱的技巧 將本書常用的控制元件集合放在 VB.NET 教本 索引頁籤中

建立 VB.NET 教本 索引頁籤 1. 建立一 Windows 應用程式專案, 專案名稱不拘 2. 在工具箱上面按下滑鼠右鈕, 待出現快顯功能表時, 選取 加入索引頁籤, 接著工具箱的最下方會出現一輸入方塊, 此時請輸入 VB.NET 教本, 過程如圖 -5 3. 接著選取 VB.NET 教本 頁籤, 接下來我們要從 Windows Form 頁籤中複製 Button CheckBox ComboBox GroupBox HScrollBar Label ListBox PictureBox RadioButton TextBox Timer 及 VScrollBar 控制元件到這個頁籤

建立 VB.NET 教本 索引頁籤 4. 選取 Windows Form 頁籤, 然後在 Button 控制元件上面按下滑鼠右鈕, 待出現快顯功能表時, 選取 複製, 接著選取 VB.NET 教本 頁籤, 然後在空白處按下滑鼠右鈕, 待出現快顯功能表時, 選取 貼上, 這樣子就可以把 Button 控制元件貼到 VB.NET 教本 頁籤之中了, 過程如圖 -6 5. 仿步驟 4,, 將 CheckBox ComboBox GroupBox HScrollBar Label ListBox PictureBox RadioButton TextBox Timer 及 VScrollBar 控制元件從 Windows Form 頁籤複製到 VB.NET 教本 頁籤中

3-2 在表單上佈置控制元件

上機 : 在表單上佈置一個按鈕 (Button) 控制元件 1. 建立一 Windows 應用程式專案 2. 以滑鼠雙按控制元件, 接著表單的左上角會出現一個按鈕控制元件, 如圖 -8 3. 接著假設我們想把控制元件移到表單中央, 那麼把滑鼠移到該控制元件上面, 按住滑鼠左鈕 ( 不要放手 ),, 即可將它拉曳到我們期望的位置, 如圖 -9 4. 接下來假設我們想改變控制元件的大小, 那麼把滑鼠移到控制元件周圍的小白點之上, 接著滑鼠指標的形狀會改變, 如圖 -10 這表示我們可以改變這個控制元件的大小, 此時按住滑鼠 拉曳 再放開滑鼠即可完成, 如圖 -11

三合一佈置控制元件法 1. 按住滑鼠 2. 拉曳 3. 放開滑鼠

作用中的控制元件 非作用中 非作用中 作用中

3-3 屬性視窗的操作

屬性視窗的組成 物件盒 屬性列表 屬性描述方塊

屬性列表的瀏覽 字母順序 選取 這些屬性是根據英文字母的順序來排列的

屬性列表的瀏覽 屬性分類 可將外觀類的屬性展開 可將以下行為類的屬性收起 先將屬性捲到外觀分類附近 以滑鼠點選屬性, 並且觀察屬性描述方塊, 以尋找屬性

上機 : 屬性列表與屬性的設定 目的 : 將表單的 Text 屬性值設定成 歡迎使用 VB.NET 1. 建立一 Windows 應用程式專案 2. 先以滑鼠點選 Form1 表單使其變成作用中 3. 按下 [AZ] 鈕讓屬性列表根據 英文字母 順序排列, 接著利用捲動軸將屬性列表捲到含有 Text 屬性的位置, 然後以滑鼠點選 Text 屬性, 此時 Text 屬性欄會出現反白 4. 接著再按鍵盤的鍵, 此時 Text 屬性右邊的屬性值 Form1 也會出現反白, 並有閃動的輸入游標, 這表示我們可以開始輸入資料 如圖 -20

上機 : 屬性列表與屬性的設定 5. 請輸入 " 歡迎使用 VB.NET", 然後按, 接著將可發現表單的抬頭字樣由 "Form1" 變成了 " 歡迎使用 VB.NET" 輸入的內容立刻反映在表單上 Enter

上機 : 物件盒與 VB.NET 的物件 1. ( 在表單上佈置三個按鈕 (Button 控制元件 ), 並逐一觀察物件盒的變化 ) 剛進入 VB.NET 時, 表單上並沒有任何控制元件, 此時調出屬性視窗, 按下物件盒的下拉按鈕, 可以發現物件盒裡只有一個物件 -- 表單物件, 如圖 -22 2. 接著讓我們在表單上佈置一個按鈕 (Button) Button), 然後再來檢查屬性視窗的物件盒, 結果可以發現物件盒多列了一個物件, 如圖 -23 3. 再佈置兩個按鈕, 結果這兩個按鈕也都會列在物件盒之中, 如圖 -24

上機 : 物件盒與作用中的物件 1. ( 瞭解 物件盒與作用中的物件 的關係 ) 延續剛才的專案, 選取表單上的 Button3 按鈕, 然後檢視物件盒的變化, 結果如圖 25 這表示當物件盒尚未拉下時, 物件盒列示的是作用中的物件 2. 拉下物件盒, 然後選取 Button2, 結果表單上的 Button2 按鈕周圍會出現小白點, 如圖 -26 這表示如果拉下物件盒, 並選取物件盒之中其他的物件, 則作用中的物件會變成被選取的物件 3. 現在反過來, 讓我們點選表單上的物件, 則物件盒所列示的物件也會跟著改變, 如圖 -27 以上的上機操作讓我們得到一個結論 : 物件盒所選列的物件就是作用中的物件, 反之亦然

3-4 物件屬性的設定

上機 : 物件屬性的設定 設定屬性 有一表單如上圖 ( 左 ),, 經過屬性設定之後使其變成上圖 ( 右 )

上機 : 物件屬性的設定 1. 建立一 Windows 應用程式專案, 然後在表單上佈置三個按鈕 2. 將 Button1 按鈕變成作用中 : 以滑鼠點選表單上的 Button1 按鈕, 或直接選取屬性視窗物件盒中的 Button1 物件 3. 在屬性視窗中, 將 Text 屬性的屬性值設定成 按鈕一 : 過程是選取 Text 屬性, 然後按下鍵, 輸入 按鈕一 如圖 -29

上機 : 物件屬性的設定 4. 參照步驟 2 3, 分別調出 Button2 及 Button3 的屬性列表, 並分別設定其 Text 屬性為 按鈕二 及 按鈕三 5. 將表單變成作用中 : 以滑鼠點按表單上控制元件之外的一點, 或直接在屬性視窗物件盒中選取表單, 此時控制元件上的小白點會消失, 表示目前作用中的物件是表單, 而不是其他控制元件, 然後將表單的 Text 屬性改成 " 表單一 "

物件屬性的設定 實例練習 設計之前首先要瞭解這個表單使用了哪些控制元件, 其中 OK 鈕是 Button 控制元件, 而 " 歡迎使用 VB.NET" 是一串文字, 要使用顯示文字的 Label( 標籤 ) 控制元件

物件屬性的設定 實例練習 1. 建立 Windows 應用程式專案 2. 在表單上佈置一個 Label 及一個 Button 控制元件 3. 設定物件的屬性, 首先以 Button1 物件為例, 其設定過程是 : 調出屬性視窗, 按下物件盒的下拉按鈕, 並選取其中的 Button1, 然後設定屬性列表中的 Text 屬性成為 OK, 過程如圖 -32

物件屬性的設定 實例練習 繼續設定物件的屬性 : 參照步驟 3,, 設定表單 (Form1) 及標籤 (Label1) 這兩個物件的屬性 : 物件 屬性 屬性值 Form1 Text 嗨, 程式設計新鮮人 Label1 Text 歡迎使用 VB.NET 最後是調整表單的大小, 如下, 就大功告成了 完成圖如圖 -33

3-5 三種屬性設定的型態

三種屬性設定的型態 交談窗型 : 右邊含有 按鈕 直接選取型 : 右邊含有下拉按鈕 右邊沒有按鈕 鍵盤輸入型

三種屬性設定的型態 鍵盤輸入型 也可以直接以滑鼠雙按, 接著屬性值會出現反白, 然後開始輸入屬性值 這種類型的屬性值右邊沒有按鈕, 屬性的設定完全要依賴鍵盤的操作, 例如上一節介紹過的 "Text" 屬性就是這種類型 設定這種類型的屬性值, 除了上一節所介紹的方法之外, 在操作技巧上, 我們也可以直接以滑鼠雙按雙按屬性上方, 然後屬性值會出現反白, 接著就可以開始輸入屬性值

三種屬性設定的型態 直接選取型 按下此鈕,VB.NET 即會列出所有屬性值供選擇 此一類型的屬性值右邊含有下拉按鈕, 只要按下下拉按鈕,VB.NET, 即會列出所有的屬性值, 然後再從中選取即可.

三種屬性設定的型態 交談窗型 設定表單的 BackgroundImage 屬性 Font 屬性的設定

上機 : 設定 BackgroundImage 屬性 建立 Windows 應用程式專案, 專案名稱定為 ch0304 1. 以滑鼠點選表單使表單成為作用中的, 然後選取屬性視窗中的 BackgroundImage( 背景影像 ) 屬性, 最後按下 鈕 2. 接著會出現 開啟開啟 交談窗, 如圖 -37,, 請選取本書 picture 資料夾 ( 位於 c:\vb 教本 資料夾底下 ) 的 Plane.bmp 檔案 ( 為一飛機圖片 ),, 過程如圖 -37, 接著便可以看到表單上佈滿飛機圖片, 如圖 -38

上機 : 設定 BackgroundImage 屬性 4. 假設我們想刪除表單的背景圖, 那麼在屬性視窗中, 選取 BackgroundImage 屬性, 然後按下 Tab 鍵, 接著再按下 Delete 鍵即可將背景圖刪除, 過程如圖 -39 5. 假設我們想將表單的背景圖設定成本書 picture 資料夾的 learnvb.jpg, 那麼在屬性視窗中, 選取 BackgroundImage 屬性, 然後按下 鈕, 待出現 開啟 交談窗時再選取本書 picture 資料夾的 learnvb.jpg 檔案即可

上機 :Font: 屬性的設定 字形放大 加底線 目的 : 將按鈕由上圖 ( 左 ) 改成上圖 ( 右 ) 1. 建立 Windows 應用程式專案, 專案名稱定為 ch0305 2. 在表單上佈置一 Button 控制元件, 然後選取屬性視窗中的 Font 屬性, 接著按下 鈕 3. 接著出現一字型字型交談窗, 如圖 -41 讓我們選擇大小大小欄底下的 12 及效果效果欄底下的欄底下的底線底線, 選擇之後, 可以預覽到字型的外觀, 如果滿意這樣的字型就按下確定確定鈕 按下鈕 按下確定確定鈕之後, 就可以看到按鈕上面的字型跟著改變了

實例練習 : 完成表單的製作

實例練習 : 完成表單的製作 1. 建立一 Windows 應用程式專案, 專案名稱定為 ch0306, 接著將表單稍微拉大一點, 以方便控制元件的佈置 2. 接下來是選取適當的控制元件 : 本表單共使用了三個控制元件, 它們分別是 Label( 標籤 ) 控制元件 Button( 按鈕 ) 控制元件 PictureBox( 圖片方塊 ) 控制元件, 如圖 -45

實例練習 : 完成表單的製作 3. 佈置標籤 (Label) 控制元件到表單上, 並設定以下屬性 : 屬性 屬性值 Text( 文字 ) 學 Visual Basic 找王國榮 BorderStyle ( 邊框樣式 ) Fixed3D TextAlign ( 文字對齊方式 ) MiddleCenter Font ( 字型 ) 大小 = 12

實例練習 : 完成表單的製作 4. 佈置圖片方塊 (PictureBox) 控制元件到表單上, 其大小不拘, 一開始圖片方塊裡面並沒有圖片, 所以接著是為圖片方塊加入圖片, 方法是將 Image( 影像 ) 屬性設定成本書 picture 資料夾的 kj.bmp 圖檔, 設定 Image 屬性之後, 再將 SizeMode 屬性設定成 AutoSize, 這樣子可以使 PictureBox 的外框與圖片等大小 屬性 屬性值 Image ( 影像 ) 本書 picture 資料夾的 kj.bmp SizeMode( 大小模式 ) AutoSize

實例練習 : 完成表單的製作 5. 佈置按鈕 (Button) 控制元件到表單上, 並設定以下屬性 : 屬性 屬性值 Text ( 文字 ) 進入 Font ( 字型 ) 大小 =12, 字型樣式 = 粗體 6. 將表單的 Text 屬性設定為 更多采多姿的表單,, 並調整表單的大小, 即完成表單的設計