前言
掃雷界面設計
界面的設計,首先需要創建一個菜單欄。具體方法在左邊找到工具箱窗口,展開其中的菜單和工具欄,找到MenuStrip選項,雙擊該選項便可在窗口中新建一個菜單欄,如圖所示:
對於這個控件,我們還要修改它的一些屬性。
- 在右下角屬性框中修改它的Name屬性,對每一個控件取一個有意義的名字,防止很多控件時,容易混淆。
- 單擊“請在此鍵入”,輸入“Game(&G)”,其中&G整體會顯示成G這個字母下面加一個下划線,這樣在用戶使用的時候就可以通過按下字母G來訪問這個按鍵了。(當然,頂層菜單還需要按下Alt鍵,例如Alt + G鍵。)
- 使用同樣的方法創建另一個菜單欄,下圖中的分割線,只需要輸入一個減號,即“–”,再按下回車鍵即可得到。
至此,我們的菜單欄就制作完成了。接下來我們需要制作一個用來記錄地雷數目以及用時的功能。我們選擇工具箱中容器的TableLayoutPanel,雙擊該項目,會在窗口中創建一個TableLayoutPanel控件。同樣我們先將它的Name屬性修改為“TableLayoutPanel_Main”。展開它的Size屬性,將Height屬性修改為48。同時修改它的Dock屬性,選擇Bottom,如圖所示:
同時將RowCount屬性設置為1,ColumnCount屬性設置為9。打開Columns屬性對話框(這里進行一些解釋,其中Column1、Column3、...、Column5、Column7、Column9為中心對稱的,用來設置邊距,不放置任何控件,純粹為了排版需要)進行如圖一下的修改:
接下來我們需要在Column2、Column8中分別放置地雷以及秒表的圖標,表示剩余的地雷數目以及已用時長。而Columns4、Columns6中分別放置用於顯示地雷數目以及已用時長的文本。
在工具箱中展開公共控件,找到PictureBox,將它拖動到TableLayoutPanel的第二個列中,設置如下屬性。
- 將它的Name屬性設置為“PictureBox_Bomb”。
- Dock屬性設置為Fill(表示充滿整個頁面,此處的頁面即TableLayoutPanel中Column2全部)
- BackgroundImage屬性定位到圖標文件(通過導入按鈕)。
- BackgroundImageLayout屬性設置為Stretch(表示自動縮放圖像大小)。
使用同樣的方法加入一個PictureBox控件,將它放到Column8中其中(圖片文件請補入Resources文件夾中),圖片導入的方法如下圖所示:
接下來我們需要添加兩個用於顯示內容的Label控件,展開工具箱中的公共控件,找到Label控件,分別拖動到Column4和Column6,並且設置
- 將Dock屬性設置為Fill。
- TextAlign屬性設置為MiddleCenter(使文字顯示在控件中心)
- Font屬性設置為“宋體, 12pt”(即宋體,字號小四)。
- Name屬性及Text屬性分別修改為Label_Bomb和Lable_Timer。同時將它們的ForeColor屬性設置成自己喜歡的顏色(這項屬性用於設置文字顯示的顏色)。
至此界面已經基本完成了,但是我們還需要增加一個控件——Timer,用來計時。展開工具箱中的組件,雙擊Timer。這個控件不會在界面上顯示,但是會在后台進行計時功能。同樣,我們將它進行如下設置:
- Name屬性修改為“Timer_Main”。
- Interval屬性修改為“1000”(這里為計時間隔,以毫秒為單位,此處為1000毫秒,即1秒計時一次)。
最后按下Ctrl + F5進行編譯查看結果,相較於第一節中的界面已經有了很大的改觀,如圖所示:
圖7