Win32工具栏添加ComboBox及按钮自然排列显示问题

需求描述 #

需要在Win32应用的工具栏中实现如下布局：

[--------------------Dropdown-------------------V] | [Cut][Copy][Paste]

• 左侧ComboBox占工具栏宽度的70%
• 右侧自动排列Cut、Copy、Paste按钮，带分隔符，无需手动定位，保持自然流动布局

现有问题 #

原代码直接创建ComboBox后通过SetWindowPos设置尺寸，但ComboBox未显示，仅显示三个按钮，且无法实现按钮自动跟随ComboBox排列。

解决方案 #

要让ComboBox成为工具栏的一部分并实现自动布局，不能直接作为子窗口创建，而是需要通过**工具栏自定义项（TBINSERTSTRUCT）**来嵌入控件，让工具栏管理其布局。核心步骤：

1. 初始化工具栏并设置按钮结构尺寸
2. 插入自定义项占位为ComboBox预留70%宽度的空间
3. 创建ComboBox并绑定到工具栏的自定义项位置
4. 添加分隔符和标准按钮，让工具栏自动排列所有元素
5. 调用TB_AUTOSIZE完成自动布局

修正后的完整代码 #

#include <windows.h>
#include <commctrl.h>

HWND hWndToolbar1;
HIMAGELIST g_hImageList;

#define IDM_CUT 1001
#define IDM_COPY 1002
#define IDM_PASTE 1003

void CreateToolbar1(HWND hWndParent)
{
    const int ImageListID = 0;
    const int numButtons = 3;
    const int bitmapSize = 16;
    const DWORD buttonStyles = BTNS_AUTOSIZE;

    // 创建工具栏，添加CCS_ADJUSTABLE确保自定义项布局正常
    hWndToolbar1 = CreateWindowEx(0, TOOLBARCLASSNAME, NULL,
        WS_CHILD | TBSTYLE_WRAPABLE | TBSTYLE_FLAT | CCS_ADJUSTABLE, 
        0, 0, 0, 0,
        hWndParent, NULL, GetModuleHandle(NULL), NULL);

    // 设置按钮结构尺寸，必须在添加任何项之前调用
    SendMessage(hWndToolbar1, TB_BUTTONSTRUCTSIZE, (WPARAM)sizeof(TBBUTTON), 0);

    // 创建并绑定图像列表
    g_hImageList = ImageList_Create(bitmapSize, bitmapSize,
        ILC_COLOR16 | ILC_MASK, numButtons, 0);
    SendMessage(hWndToolbar1, TB_SETIMAGELIST, (WPARAM)ImageListID, (LPARAM)g_hImageList);
    SendMessage(hWndToolbar1, TB_LOADIMAGES, (WPARAM)IDB_STD_SMALL_COLOR, (LPARAM)HINST_COMMCTRL);

    // --- 插入ComboBox自定义项占位 ---
    RECT rectToolbar;
    SendMessage(hWndToolbar1, TB_GETRECT, 0, (LPARAM)&rectToolbar);
    int toolbarWidth = rectToolbar.right - rectToolbar.left;
    int comboWidth = (int)(toolbarWidth * 0.7);

    TBINSERTSTRUCT tbInsert = {0};
    tbInsert.uFlags = TBIF_BYINDEX | TBIF_CUSTOMSIZE;
    tbInsert.iInsertAfter = 0;
    tbInsert.cx = comboWidth; // 指定ComboBox宽度为工具栏的70%

    // 插入占位并获取索引
    int comboIndex = (int)SendMessage(hWndToolbar1, TB_INSERTITEM, 0, (LPARAM)&tbInsert);

    // 获取占位位置，创建ComboBox
    RECT comboRect;
    SendMessage(hWndToolbar1, TB_GETITEMRECT, comboIndex, (LPARAM)&comboRect);
    HWND hWndDropdown = CreateWindowEx(WS_EX_CLIENTEDGE, WC_COMBOBOXEX, NULL,
        WS_CHILD | WS_VISIBLE | CBS_DROPDOWNLIST,
        comboRect.left, comboRect.top, comboRect.right - comboRect.left, comboRect.bottom - comboRect.top,
        hWndToolbar1, (HMENU)comboIndex, GetModuleHandle(NULL), NULL);

    // 将ComboBox绑定到工具栏的自定义项
    tbInsert.hwnd = hWndDropdown;
    tbInsert.uFlags = TBIF_BYINDEX;
    SendMessage(hWndToolbar1, TB_INSERTITEM, comboIndex, (LPARAM)&tbInsert);

    // --- 添加分隔符 ---
    TBBUTTON sepButton = {0};
    sepButton.fsStyle = TBSTYLE_SEP;
    SendMessage(hWndToolbar1, TB_ADDBUTTONS, 1, (LPARAM)&sepButton);

    // --- 添加Cut/Copy/Paste按钮 ---
    TBBUTTON tbButtons[numButtons] = 
    {
        { MAKELONG(STD_CUT, ImageListID), IDM_CUT, TBSTATE_ENABLED, buttonStyles, {0}, 0, (INT_PTR)L"Cut" },
        { MAKELONG(STD_COPY, ImageListID), IDM_COPY, TBSTATE_ENABLED, buttonStyles, {0}, 0, (INT_PTR)L"Copy"},
        { MAKELONG(STD_PASTE, ImageListID), IDM_PASTE, 0, buttonStyles, {0}, 0, (INT_PTR)L"Paste"}
    };
    SendMessage(hWndToolbar1, TB_ADDBUTTONS, (WPARAM)numButtons, (LPARAM)&tbButtons);

    // 自动调整工具栏尺寸并显示
    SendMessage(hWndToolbar1, TB_AUTOSIZE, 0, 0);
    ShowWindow(hWndToolbar1, TRUE);
}

关键说明 #

• 必须通过TB_INSERTITEM插入自定义项占位，让工具栏为ComboBox管理布局，而非直接创建子窗口
• 利用TB_GETITEMRECT获取工具栏分配的位置，确保ComboBox嵌入到正确区域
• 使用TBSTYLE_SEP样式添加分隔符，实现ComboBox与按钮的视觉区分
• 所有元素添加完成后调用TB_AUTOSIZE，让工具栏自动完成所有项的排列，无需手动定位按钮

内容的提问来源于stack exchange，提问作者gene b.