前言

從畢業(yè)開始學(xué)習(xí)windows UI編程，工作中總是和一些API打交道，但是從沒有做過(guò)一個(gè)完整的界面程序。因此打算自己利用空余時(shí)間做一個(gè)小的項(xiàng)目來(lái)總結(jié)自己所學(xué)的東西。在網(wǎng)上看到許多人建議自己動(dòng)手寫完整的項(xiàng)目才能快速提高，因此打算從仿照windows的記事本開始，真正實(shí)現(xiàn)一個(gè)基本的windows界面程序。考慮到編寫一個(gè)完整的windows 記事本程序需要大量的工作，因此打算將每一個(gè)階段的成果記錄下來(lái)，一方面能夠幫助自己進(jìn)行總結(jié)，回顧已學(xué)的知識(shí)，另一方面也能夠與其他網(wǎng)友一起討論，從而可以在討論中共同進(jìn)步。

本節(jié)介紹

如本文題目所示，本節(jié)主要實(shí)現(xiàn)記事本的主界面設(shè)計(jì)，包括主界面窗口的構(gòu)建、菜單的加入。雖然都是一些基本的操作，但是還是想將這些基本步驟完整地記錄下來(lái)，以便后續(xù)驗(yàn)證。本文的開發(fā)環(huán)境為：系統(tǒng)為win7 64bit, IED是VS2008。好了，廢話不多說(shuō)，直接開始流程介紹：

1. 新建win32 工程

本文采用windows API方式實(shí)現(xiàn)一個(gè)簡(jiǎn)易記事本程序，因此在創(chuàng)建工程時(shí)選擇windows application，如圖1所示。同時(shí)為了方便，選擇以空的項(xiàng)目開始，要增加什么資源就在后續(xù)過(guò)程中添加即可。

圖1 新建win32空項(xiàng)目

2. 構(gòu)建主界面

在打開windows自帶的記事本程序可以看出，整個(gè)窗口就是一個(gè)帶有菜單、編輯控件的對(duì)話框，因此本文為了方便直接以DialogBox的方式構(gòu)建整個(gè)程序的主界面。具體的做法如下圖2所示：Resource Files –> Add –> Resource… :

圖2 新建對(duì)話框資源

在圖2中的資源窗口開啟后，選中Dialog資源并進(jìn)行添加即可。此時(shí)得到一個(gè)系統(tǒng)默認(rèn)的對(duì)話框，如圖3所示：

圖3 系統(tǒng)默認(rèn)對(duì)話框

此時(shí)，需要將視圖切換到資源視圖進(jìn)行操作。首先進(jìn)行對(duì)話框的改名，一個(gè)有意義的變量名使得程序的可讀性更好，也更易于后期維護(hù)。因此將Dialog資源名改為IDD_MAIN。同時(shí)記事本中不存在OK以及Cancel按鈕，因此在對(duì)話框中直接選中這兩個(gè)按鈕并刪除。效果如圖4所示：

圖4 主界面對(duì)話框改名、刪除多余按鈕后效果

3. 構(gòu)建菜單

構(gòu)建菜單時(shí)，第一步操作與構(gòu)建主界面一致。在圖2的資源添加中選擇Menu并選擇新建。新增的菜單資源默認(rèn)名為IDR_MENU1。同樣對(duì)其進(jìn)行改名操作，改為IDR_MENU。后續(xù)將進(jìn)行菜單項(xiàng)的填充。這里主要就是按照windows記事本中相應(yīng)的文字填入就可以了，主要存在以下兩個(gè)小細(xì)節(jié)需要注意：

3.1 字母快捷鍵

在windows記事本中可以通過(guò)快捷鍵喚起相應(yīng)的菜單項(xiàng)（例如打開記事本后，可以用alt+F打開文件選項(xiàng)，如圖5所示）。

圖5 windows菜單快捷鍵

這里的做法其實(shí)很簡(jiǎn)單，就是在相應(yīng)的字母前添加，例如“文件(F)”就填寫為“文件(F)”，這樣就可以默認(rèn)開啟快捷鍵。對(duì)于“文件”選項(xiàng)下面的打開、保存等快捷鍵的設(shè)置同樣是在對(duì)應(yīng)的字母前添加。

3.1 構(gòu)建下拉分割線

在如圖5的文件下拉菜單中，可以看到用于分割“另存為”和“頁(yè)面設(shè)置”的分割線。那么如何產(chǎn)生這跟分割線呢，其實(shí)也非常簡(jiǎn)單，直接在相應(yīng)的菜單項(xiàng)右鍵，選擇“Insert Separator”，如圖6所示(因?yàn)槲业臋C(jī)器上VS2008是英文版的所示菜單項(xiàng)都顯示的英文，對(duì)于中文的VS應(yīng)該可以在同樣的地方找到“插入風(fēng)格線”的選項(xiàng)吧)：

圖6 添加菜單選項(xiàng)分割線

4. 調(diào)起主界面

在主程序中，目前只是為了顯示當(dāng)前界面的效果，因此直接用DialogBox顯示IDD_MAIN.代碼如下：

/************************************************************************/
/* file  : main.cpp 整個(gè)應(yīng)用程序的主入口
 * author : Huagang Li
 * date  : 2014-8-29 23:22:37
 * blogs : http://www.cnblogs.com/lhglihuagang/
 */
/************************************************************************/

#include Windows.h>
#include "resource.h"  // IDD_MAIN定義位置

int WINAPI WinMain( __in HINSTANCE hInstance, __in_opt HINSTANCE hPrevInstance, __in_opt LPSTR lpCmdLine, __in int nShowCmd )
{
  ::DialogBox(hInstance, MAKEINTRESOURCE(IDD_MAIN), NULL, NULL);
  return EXIT_SUCCESS;
}

因?yàn)镈ialog中的窗口過(guò)程函數(shù)直接設(shè)置為NULL,因?yàn)檫@個(gè)窗口在打開后就無(wú)法通過(guò)關(guān)閉按鍵關(guān)閉（可以用資源管理器關(guān)閉），當(dāng)前效果如下7所示：

圖7 錯(cuò)誤的輸出結(jié)果？

從上圖7中可以看出，只是一個(gè)空白窗口，說(shuō)好的菜單選項(xiàng)呢？最大最小化按鈕呢？窗口大小還不可變？？這里就進(jìn)入另一個(gè)注意點(diǎn)了：在新建了菜單資源并進(jìn)行了編輯后，這個(gè)資源只是存在于工程文件中，并沒有將其添加到任何一個(gè)窗口中。因此，我們需要將菜單資源加入到IDD_MAIN窗口中。同時(shí)系統(tǒng)默認(rèn)新建的對(duì)話框窗口是沒有最大最小按鈕的，因此也需要在IDD_MAIN的屬性中進(jìn)行調(diào)節(jié)，具體操作如下：

4.1 添加菜單、最大化最小化按鈕

在IDD_MAIN的“properties”中的Menu選擇“IDR_MENU”，同時(shí)將Minimize Box以及Maxmize Box都設(shè)為True。具體操作如下圖8所示：

圖8 添加菜單，最大，最小按鈕

4.2 窗口大小可調(diào)節(jié)

IDD_MAIN的“properties”中的Boader選擇“Resizing”，也就是將邊框的屬性設(shè)置為可調(diào)節(jié)，操作如下圖9所示：

圖9 對(duì)話框大小可變

界面效果

在添加菜單、最大最小按鈕，同時(shí)修改了邊框調(diào)節(jié)屬性后，整個(gè)程序運(yùn)行后主界面如圖10所示：

圖10 程序UI效果

結(jié)論

雖然真正的邏輯功能還沒有開發(fā)，但是光是實(shí)現(xiàn)這個(gè)界面還是了一段時(shí)間研究。即使是這樣簡(jiǎn)單的界面顯示程序其實(shí)也是可以學(xué)到一些小的知識(shí)點(diǎn)：

1. 菜單字母快捷鍵（在字母前面前面添加）

2. 菜單下拉分割線（右鍵選擇添加分割線）

3. 新建的菜單資源需要加入到窗口中才能顯示（IDD_MAIN屬性中的MENU選擇IDR_MENU）

說(shuō)明

這將是一個(gè)系列博文，后面會(huì)繼續(xù)補(bǔ)充邏輯功能的開發(fā)的步驟。希望能與更多博友交流。

如果你覺得這篇文章還可以，請(qǐng)點(diǎn)贊，哈哈~~

聲明：未作說(shuō)明，則本文為年糕原創(chuàng)。注意：轉(zhuǎn)載須保留全文，如需修改請(qǐng) 聯(lián)系作者。