《PicSi的实现细节》 第1节 界面的布局

     PicSi是不久前博主利用业余时间编写的一个小工具软件，虽然它的功能十分简单，但却是一个小型软件开发的好例子。PicSi采用Visual Studio 2010 + WTL框架，代码总计700行左右。《PicSi的实现细节》一共分为四节，本文是第一节，希望它能给你带来一点帮助。如果你有任何想法或建议，请与博主联系，谢谢！

1. Why WTL?

    相比于MFC，WTL并不被人们熟知，它其实是Window Template Library的缩写，即窗口模板库，是建立在ATL窗口类之上的图形界面框架。WTL不被Microsoft官方支持，这意味着你无法从MSDN上检索到任何与之相关的信息。然而它却受到业界的亲睐，特别是从Windows API编程时代走过来的那些前辈，对WTL更是倍加推崇。原因在于WTL尽最大可能保留了Windows API编程的原样，因此它是直接的；WTL利用模板的技术实现了图形界面框架，因此它是高效。由于上述原因，笔者选择WTL作为Windows编程的起点，使用WTL编写PicSi这个小软件算作是对WTL的练习吧。

2. 界面的布局

    首先来看界面布局的结果图(如图1)：

图1 PicSi的界面布局

    显然PicSi是Dialog类型，所以在使用WTL Application Wizard时应该选择此类型。在主窗口内使用一个Tab控制用于子窗口的切换。这里需要区分主窗口和上图中显示的Main子窗口：主窗口是程序的外部框架，它包含两个子窗口(Main和About)，也就是说Main窗口只是主窗口的一个子窗口而已，注意不要混淆了。要实现上述界面布局，需要在资源视图中添加两个子窗口，如图2所示：

图2 资源视图中的三个Dialog

    首先在IDD_ABOUTBOX和IDD_DLG_CREATOR的属性面板内，选择它们的风格(style)为child，这样它们才可以作为主窗口的子窗口。窗口还有其它两种风格：popup(默认的)、overlapped。前者我们最为熟悉，即弹出式对话框，后者我们也应该不陌生，主窗口就是overlapped风格。值得注意的是，overlapped风格的对话框也能与其它窗口建立起“父子”关系，此时它与child风格的对话框不同之处在于：overlapped的子窗口在超出父窗口的显示范围后不会被裁减，而child的子窗口在超出父窗口的显示范围后是会被裁减的。

   向三个对话框中拖入所需的控制：IDD_MAINDLG需要1个Tab控制；IDD_DLG_CREATOR需要1个Static控制、1个Edit控制、4个Button控制以及1个Listview控制；IDD_ABOUTBOX需要1个Edit控制。如图3、4、5所示：

图3 主窗口

图4 Main子窗口

图5 About子窗口

    刚刚提到修改两个子窗口的Style属性，实际上对话框属性面板上还有许多Item可以修改。观察上面三张图，容易发现图4、5与图3明显不同，Main和About作为子窗口是不需要边框的，将Border属性修改为None即可。About子窗口主要用于显示帮助说明，使用系统默认的字体不好看，可以修改About子窗口的Font属性选择其它好看的字体。我选择的是Tempus Sans ITC(9)字体，最终的效果如图6所示：

图6 修改对话框Font属性为Tempus Sans ITC

   其它属性，如Accept Files表示窗口是否支持文件的拖拽(Drag and Drop)，不过习惯上一般并不在属性对话框中设置该功能，而是在代码中明确调用方法使之生效。属性面板上的其它属性你若感兴趣，可以修改试试。在资源视图中，你可以选择菜单Format/Test Dialog预览窗口的效果。

   界面的布局就讲到这里，到目前为止程序还不能正常工作。我们还需通过编码来控制这些窗口的行为，如子窗口之间的切换等。博主将在下一节详细介绍窗口Class的定义，敬请期待。