掃雷遊戲製做過程（C#描述）：第二節、界面設計

前言

這裏給出教程原文地址。
該項目已經放在github上託管。

掃雷界面設計

界面的設計，首先須要建立一個菜單欄。具體方法在左邊找到工具箱窗口，展開其中的菜單和工具欄，找到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屬性對話框（這裏進行一些解釋，其中Column一、Column三、...、Column五、Column七、Column9爲中心對稱的，用來設置邊距，不放置任何控件，純粹爲了排版須要）進行如圖一下的修改：

接下來咱們須要在Column二、Column8中分別放置地雷以及秒錶的圖標，表示剩餘的地雷數目以及已用時長。而Columns四、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