Tool Bar を作成する

VC++ で良く使うコマンドを専用のバー(Tool Bar) にアイコンとして登録します。
ToolBar は良く使うコマンドを専用のバーにアイコン形式で表示して、メニューからいちいち選ばなくても アイコンをクリックするだけで簡単に使えるようにしたものです。
最近ではビジュアル指向が強まって ToolBar が備わっていないプログラムは嫌われるようになってきました。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プロジェクトの設定

  1. ステータスバーとか、ツールバーなどはコモンコントロールといいます。
    コモンコントロールは Windows に含まれるコモンコントロールライブラリで実現されます。
    コモンコントロールを使うには commctrl.hをインクルードして、 Comctl32.libを組み込まなければなりません。
    また、使用前に InitCommonControls() 関数で初期化が必要です。
    このへんは ListView や TreeView の時と同じです。
  2. ツールバーで切り替える6枚の BMP 画像を用意して、その画像を縮小して 256 色に落としたアイコン用の画像を用意して下さい。
    ToolBar に貼り付けるアイコン画像はバラバラにしないで、画像を横一列に並べたものを作成します。
    私はサイズが 32×32 ピクセルのものを横に6枚並べましたが、大きさはあまり気にしなくても良いようです。
    次のファイルをプロジェクトのフォルダーに格納して下さい。
    ファイル名 ファイルの説明
    toolbar.cpp ソースプログラム
    toolbar.rc 自前のリソースファイル
    toolbar.h 自前のヘッダーファイル
    Bmp6.bmp Tool Bar に表示する BMP 画像ファイル
  3. それではリソースファイルから説明して行きましょう。
    今回はリソースファイルとヘッダーファイルは自前で作成します。
    Tool Bar に表示する画像を定義したリソースファイル(toolbar.rc)です。
    リソースエディッタで作成すると長々と記述が続きますが、本当に必要なのは数行だけです。
    bmp6.bmp は ToolBar に表示するアイコン用の画像で、従来の方法ではリソース・エディタで取り込んでいたものです。
    // toolbar.rc
    #include <windows.h>
    #include "toolbar.h"
    
    // Bitmap
    
    ID_BMP                BITMAP  DISCARDABLE     "bmp6.bmp"
    
  4. ヘッダーファイル(toolbar.h)です。
    toolbar.h ではリソースファイルで使われている ID に対して実際の数値を割り当てます。
    「ToolBar と WM_COMMAND と ToolBar のアイコン画像」のIDが定義されています。
    IDM_BMP1 ~ IDM_BMP6 はアイコンをクリックしたときにポストされる WM_COMMAND のIDです。
    //  toolbar.h
    
    #define ID_TOOLBAR  100
    #define IDM_BMP1    101
    #define IDM_BMP2    102
    #define IDM_BMP3    103
    #define IDM_BMP4    104
    #define IDM_BMP5    105
    #define IDM_BMP6    106
    #define ID_BMP      110
    
  5. ソースプログラムの説明です。
    ツールバーのウインドウハンドルを定義します。
    ToolBar に作るボタン(画像)を TBBUTTON 構造体に定義します。
    通常ボタンは複数あるので構造体を配列で定義します。
        HWND    hToolBar;               // ツールバーのウィンドウハンドル
    
        TBBUTTON tbb[]=
        {   {0, IDM_BMP1, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0},
            {1, IDM_BMP2, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0},
            {2, IDM_BMP3, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0},
            {3, IDM_BMP4, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0},
            {4, IDM_BMP5, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0},
            {5, IDM_BMP6, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0}
        };
        
    0, ボタンイメージの番号
    IDM_BMP1 WM_COMMAND にポストされるID
    TBSTATE_ENABLED ボタンの状態
    TBSTYLE_BUTTON ボタンスタイル
    0 アプリケーション定義データ
    0 ボタンストリング
  6. ToolBar で選択された画面の番号を表示するメッセージの定義です。
    BMP_NO が現在選択されている画像です。
        LPSTR   Text[]=
        {       "一枚目の画像です", "二枚目の画像です", "三枚目の画像です",
                "四枚目の画像です", "五枚目の画像です", "六枚目の画像です",
        };
        int     Msg_NO= 0;                  //選択された番号
        
  7. ToolBar を生成するコードです。
    ボタンの幅、高さは0にしておけば自動的にちょうどよい大きさになります。
            case WM_CREATE:
                 InitCommonControls();
                 hToolBar= CreateToolbarEx(
                    hWnd,                   //親ウィンドウ
                    WS_CHILD | WS_VISIBLE,  //ウィンドウスタイル
                    ID_TOOLBAR,             //コントロールID
                    6,                      //イメージの数
                    g_hInst,
                    ID_BMP,
                    tbb,
                    6,                      //ボタンの数
                    0,                      //ボタンの幅
                    0,                      //ボタンの高さ
                    32,                     //イメージの幅
                    32,                     //イメージの高さ
                    sizeof(TBBUTTON));
                 SendMessage(hToolBar,TB_AUTOSIZE,0,0);
                 break;
        
  8. BMP_NO で選択されているメッセージを表示するソースコードです。
            case WM_PAINT:
                 hdc= BeginPaint(hWnd, &ps);
                 TextOut(hdc,10,60,Text[Msg_NO],strlen(Text[Msg_NO]));
                 EndPaint(hWnd, &ps);
                 break;
        
  9. Tool Bar で選択された画像の番号を設定するソースコードです。
    Tool Bar のアイコンをクリックすると、メニューから選択された時と同じように WM_COMMAND: がポストされます。
        case WM_COMMAND:
            switch(LOWORD(wp))
            {   case IDM_BMP1:  BMP_NO= 0;  break;
                case IDM_BMP2:  BMP_NO= 1;  break;
                case IDM_BMP3:  BMP_NO= 2;  break;
                case IDM_BMP4:  BMP_NO= 3;  break;
                case IDM_BMP5:  BMP_NO= 4;  break;
                case IDM_BMP6:  BMP_NO= 5;  break;
            }
            InvalidateRect(hWnd,NULL,TRUE);
            UpdateWindow(hWnd);
            break;
        
  10. WM_SIZE: ではウインドウの大きさに合わせて ToolBar のサイズを設定します。
        case WM_SIZE:
            SendMessage(hToolBar, WM_SIZE, wp, lp);
            break;
        

【演習】

三番目と四番目のアイコンの間に間隔を開けて下さい。
tb が間隔を確保するツールボタンの定義で TB_INSERTBUTTON が間隔の挿入です。
TBBUTTON  tb= {0,0,TBSTATE_ENABLED,TBSTYLE_SEP,0,0};

SendMessage(hToolBar,TB_INSERTBUTTON,3,(LPARAM)&tb);

超初心者のプログラム入門(Win32API C++)