dev, computing and games

Say you're writing a Win32 application. You add a toolbar. Simple enough. Toolbar would look better with some things on it.

You want to, say, add a button to it. Like this

Flip through Petzold.

No chapters for toolbar dropdowns.

No obvious samples to use.

We're on our own, then.


Attempt 1: BTNS_DROPDOWN

You follow some of the sample code, and do the most natural thing. Use the toolbar button style 'BTNS_DROPDOWN'. (By the way, BTNS_DROPDOWN is the updated define for TBSTYLE_DROPDOWN. They mean the same thing.)


    TBBUTTON tbButtons[] =
    {
        { STD_CUT, 0, TBSTATE_ENABLED, BTNS_DROPDOWN, {0}, 0, (INT_PTR)L"Test" },
    };

    m_hwnd = CreateToolbarEx(
        parent,
        WS_CHILD | WS_VISIBLE | CCS_ADJUSTABLE | TBSTYLE_TOOLTIPS,
        0, 
        sizeof(tbButtons) / sizeof(TBBUTTON), //nBitmaps
        HINST_COMMCTRL,
        0, // wBMID
        tbButtons, //lpButtons
        sizeof(tbButtons) / sizeof(TBBUTTON), // iNumButtons
        90, 90, 90, 90,
        sizeof(TBBUTTON)); // uStructSize

    SetWindowLongPtr(m_hwnd, GWLP_USERDATA, (LONG_PTR)this);
    SendMessage(m_hwnd, TB_AUTOSIZE, 0, 0);
    ShowWindow(m_hwnd, TRUE);
 

Compile and run. STD_CUT is your standard built-in Windows scissors 'cut' icon. Result looks like this:

That visually looks fine. But wait. Let's try clicking on it.

Clicking on it doesn't do anything 🙁

It doesn't even show a 'button is pushed' animation. It should at least do that, right?

What gives? It's not disabled.


Attempt 2: TBSTYLE_EX_DRAWDDARROWS

Okay, so maybe our initialization of the dropdown menu was incomplete. Dropdown menus usually have an arrow at the right. Perhaps we need to add the "arrow at the right" extended style? Let's try adding the code

    SendMessage(m_hwnd, TB_SETEXTENDEDSTYLE, 0, TBSTYLE_EX_DRAWDDARROWS);

So that now, it looks like


    TBBUTTON tbButtons[] =
    {
        { STD_CUT, 0, TBSTATE_ENABLED, BTNS_DROPDOWN, {0}, 0, (INT_PTR)L"Test" },
    };

    m_hwnd = CreateToolbarEx(
        parent,
        WS_CHILD | WS_VISIBLE | CCS_ADJUSTABLE | TBSTYLE_TOOLTIPS,
        0, 
        sizeof(tbButtons) / sizeof(TBBUTTON), //nBitmaps
        HINST_COMMCTRL,
        0, // wBMID
        tbButtons, //lpButtons
        sizeof(tbButtons) / sizeof(TBBUTTON), // iNumButtons
        90, 90, 90, 90,
        sizeof(TBBUTTON)); // uStructSize

    SendMessage(m_hwnd, TB_SETEXTENDEDSTYLE, 0, TBSTYLE_EX_DRAWDDARROWS);

    SetWindowLongPtr(m_hwnd, GWLP_USERDATA, (LONG_PTR)this);
    SendMessage(m_hwnd, TB_AUTOSIZE, 0, 0);
    ShowWindow(m_hwnd, TRUE);
 

Let's compile and run it and see what it looks like now.

This looks better. There's an arrow on the right. That should mean something good. Let's try clicking on it.

Clicking on the button itself works.

Clicking on the arrow doesn't 🙁


Attempt 3: BTNS_WHOLEDROPDOWN

Maybe the ticket is WHOLEDROPDOWN. Looking it up in the header, BTNS_WHOLEDROPDOWN purports to

That sounds like it could make the whole button appear responsive, so why not let's try it.

Result looks like this:

The arrow is all merged with the button.

Okay. What if we try to click on it?

Nothing happens 🙁

What to do?


The Answer

The answer: toolbar dropdown menus, by default, don't have any animation for clicking on them. They're not like normal buttons. That's right, the button is still working, there's just no visual feedback unless you explicitly attach some yourself.

To make the toolbar dropdown button do something, you have to just trust that it is set up ok, and attach some behavior to the dropdown notification.

Fortunately you don't have to re-invent the wheel to do that. Here's an easy way to attach a simple pop-up menu to the dropdown.

First, you need to have your WndProc pay attention to WM_NOTIFY. The handler can be something like


    case WM_NOTIFY:
    {
        LPNMTOOLBAR lpnmtb = (LPNMTOOLBAR)lParam;

        if (lpnmtb->hdr.code == TBN_DROPDOWN)
        {
            // Get the coordinates of the button.
            RECT rc;
            SendMessage(lpnmtb->hdr.hwndFrom, TB_GETRECT, (WPARAM)lpnmtb->iItem, (LPARAM)&rc);

            // Convert to screen coordinates.            
            MapWindowPoints(lpnmtb->hdr.hwndFrom, HWND_DESKTOP, (LPPOINT)&rc, 2);

            HMENU hMenuLoaded = LoadMenu(g_hInst, MAKEINTRESOURCE(IDR_MENU1));

            // Get the submenu for the first menu item.
            HMENU hPopupMenu = GetSubMenu(hMenuLoaded, 0);

            TPMPARAMS tpm;
            tpm.cbSize = sizeof(TPMPARAMS);
            tpm.rcExclude = rc;

            TrackPopupMenuEx(hPopupMenu, TPM_LEFTALIGN | TPM_LEFTBUTTON | TPM_VERTICAL, rc.left, rc.bottom, hWnd, &tpm);

            DestroyMenu(hMenuLoaded);
        }
        break;
    }

As for the menu IDR_MENU1, you can point it to a menu you have defined. Or, if you want a placeholder thing, put something like this in your .rc file:

IDR_MENU1 MENU
BEGIN
    POPUP "TEST"
    BEGIN
        MENUITEM "Option 1",                        ID_TEST_OPTION1
        MENUITEM "Option 2",                        ID_TEST_OPTION2
    END
END

That goes along with these defines in the Resources.h coupled to the .rc file:

#define IDR_MENU1                       132
#define ID_TEST_OPTION1                 32777
#define ID_TEST_OPTION2                 32778

Build, and you get this:

In animated form:

The dropdown works. Success!

It so happens if you re-try Attempt 2, TBSTYLE_EX_DRAWDDARROWS with a pop up menu, then it'll provide visual arrow-is-pressed feedback where it didn't before. See:

This is because BTNS_DROPDOWN, TBSTYLE_EX_DRAWDDARROWS, and BTNS_WHOLEDROPDOWN follow a common principle: anything that appeared unresponsive with no pop up menu attached is responsive once a menu is attached.

This system was not super well explained elsewhere, so maybe this will help you.

May 17th, 2022 at 3:17 am | Comments & Trackbacks (0) | Permalink

Am I the only one annoyed by the phrase "buttery smooth UI"? It has this tendency to mean "unnecessary transitions, 2D graphics with surprisingly high cost"

September 24th, 2019 at 7:35 pm | Comments & Trackbacks (0) | Permalink