windows開發記事本程式紀實（一）介面篇_相關技巧

前言

從畢業開始學習windows UI編程，工作中總是和一些API打交道，但是從沒有做過一個完整的介面程式。因此打算自己利用空餘時間做一個小的項目來總結自己所學的東西。在網上看到許多人建議自己動手寫完整的項目才能快速提高，因此打算從仿照windows的記事本開始，真正實現一個基本的windows介面程式。考慮到編寫一個完整的windows 記事本程式需要大量的工作，因此打算將每一個階段的成果記錄下來，一方面能夠協助自己進行總結，回顧已學的知識，另一方面也能夠與其他網友一起討論，從而可以在討論中共同進步。

本節介紹

如本文題目所示，本節主要實現記事本的主介面設計，包括主介面視窗的構建、菜單的加入。雖然都是一些基本的操作，但是還是想將這些基本步驟完整地記錄下來，以便後續驗證。本文的開發環境為：系統為win7 64bit, IED是VS2008。好了，廢話不多說，直接開始流程介紹：

1. 建立win32 工程

本文採用windows API方式實現一個簡易記事本程式，因此在建立工程時選擇windows application，如圖1所示。同時為了方便，選擇以空的項目開始，要增加什麼資源就在後續過程中添加即可。

圖1 建立win32空項目

2. 構建主介面

在開啟windows內建的記事本程式可以看出，整個視窗就是一個帶有菜單、編輯控制項的對話方塊，因此本文為了方便直接以DialogBox的方式構建整個程式的主介面。具體的做法如下圖2所示：Resource Files –> Add –> Resource… :

圖2 建立對話方塊資源

在圖2中的資源視窗開啟後，選中Dialog資源並進行添加即可。此時得到一個系統預設的對話方塊，如圖3所示：

圖3 系統預設對話方塊

此時，需要將視圖切換到資源檢視進行操作。首先進行對話方塊的改名，一個有意義的變數名使得程式的可讀性更好，也更易於後期維護。因此將Dialog資源名改為IDD_MAIN。同時記事本中不存在OK以及Cancel按鈕，因此在對話方塊中直接選中這兩個按鈕並刪除。效果如圖4所示：

圖4 主介面對話方塊改名、刪除多餘按鈕後效果

3. 構建菜單

構建菜單時，第一步操作與構建主介面一致。在圖2的資源添加中選擇Menu並選擇建立。新增的菜單資源預設名為IDR_MENU1。同樣對其進行改名操作，改為IDR_MENU。後續將進行功能表項目的填充。這裡主要就是按照windows記事本中相應的文字填入就可以了，主要存在以下兩個小細節需要注意：

3.1 字母快速鍵

在windows記事本中可以通過快速鍵喚起相應的功能表項目（例如開啟記事本後，可以用alt+F開啟檔案選項，如圖5所示）。

圖5 windows菜單快速鍵

這裡的做法其實很簡單，就是在相應的字母前添加&，例如“檔案(F)”就填寫為“檔案(&F)”，這樣就可以預設開啟快速鍵。對於“檔案”選項下面的開啟、儲存等快速鍵的設定同樣是在對應的字母前添加&。

3.1 構建下拉分割線

在如圖5的檔案下拉式功能表中，可以看到用於分割“另存新檔”和“版面設定”的分割線。那麼如何產生這跟分割線呢，其實也非常簡單，直接在相應的功能表項目右鍵，選擇“Insert Separator”，如圖6所示(因為我的機器上VS2008是英文版的所示功能表項目都顯示的英文，對於中文的VS應該可以在同樣的地方找到“插入風格線”的選項吧)：

圖6 添加菜單選項分割線

4. 調起主介面

在主程式中，目前只是為了顯示當前介面的效果，因此直接用DialogBox顯示IDD_MAIN.代碼如下：

/************************************************************************//* file  : main.cpp 整個應用程式的主入口 * 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;}

因為Dialog中的視窗過程函數直接設定為NULL,因為這個視窗在開啟後就無法通過關閉按鍵關閉（可以用資源管理員關閉），當前效果如下7所示：

圖7 錯誤的輸出結果？

從上圖7中可以看出，只是一個空白視窗，說好的菜單選項呢？最大最小化按鈕呢？視窗大小還不可變？？這裡就進入另一個注意點了：在建立了菜單資源並進行了編輯後，這個資源只是存在於工程檔案中，並沒有將其添加到任何一個視窗中。因此，我們需要將菜單資源加入到IDD_MAIN視窗中。同時系統預設建立的對話方塊視窗是沒有最大最小按鈕的，因此也需要在IDD_MAIN的屬性中進行調節，具體操作如下：

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

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

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

4.2 視窗大小可調節

IDD_MAIN的“properties”中的Boader選擇“Resizing”，也就是將邊框的屬性設定為可調節，操作如下圖9所示：

圖9 對話方塊大小可變

介面效果

在添加菜單、最大最小按鈕，同時修改了邊框調節屬性後，整個程式運行後主介面如圖10所示：

圖10 程式UI效果

結論

雖然真正的邏輯功能還沒有開發，但是光是實現這個介面還是了一段時間研究。即使是這樣簡單的介面顯示程式其實也是可以學到一些小的知識點：

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

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

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

說明

這將是一個系列博文，後面會繼續補充邏輯功能的開發的步驟。希望能與更多博友交流。

如果你覺得這篇文章還可以，請點贊，哈哈~~

聲明：未作說明，則本文為年糕原創。注意：轉載須保留全文，如需修改請 聯絡作者。