How should I change the IMAGE(doesn't matter the type) of the button in the toolbar in MFC applications?

Question

I know that this is stupid problem but I am stuck with it for the past 4 days. Why it is so complicated to just modify the toolbar in the MFC apps?

I create New Visual studio MFC application that is dialog based . I create new Toolbar resource . And then how should I set images(png, bitmap, jpeg...) or whatever type to be used in my toolbar?

I have set size to w50 and h50 and I can draw inside the buttons. But I cant find way to use image.

Instead this 2 buttons that I have just tried if its working, I want to use 8 images that are in bitmap format and in png. I read somewhere that PNG is not supported by MFC applications so I converted to Bitmap.

I load my toolbar in the dialog app like this in the OnInitDialog() method:

    DWORD dwCtrlStyle = TBSTYLE_FLAT | TBSTYLE_TOOLTIPS | CBRS_SIZE_DYNAMIC;
    DWORD dwStyle = AFX_DEFAULT_TOOLBAR_STYLE;
    CMFCToolBar::m_dblLargeImageRatio = 1;

    if (m_ToolBar.CreateEx(this, dwCtrlStyle, dwStyle, CRect(1, 1, 1, 1), IDR_TOOLBAR1))
    {
        dwStyle = CBRS_TOOLTIPS | CBRS_FLYBY | CBRS_SIZE_DYNAMIC;
        m_ToolBar.SetPaneStyle(m_ToolBar.GetPaneStyle() | dwStyle);
        CMFCToolBarInfo info;
        m_ToolBar.LoadToolBarEx(IDR_TOOLBAR1, info, FALSE);
        CSize   sizeToolBar = m_ToolBar.CalcFixedLayout(TRUE, TRUE);
        m_ToolBar.SetWindowPos(NULL, 0, 0, sizeToolBar.cx, sizeToolBar.cy, SWP_NOACTIVATE | 
        SWP_NOZORDER);
        CPoint ptOffset(0, sizeToolBar.cy);
    }

Please if someone can help me I would be really grateful. The image format doesn't matter. I just want to put image in the toolbar.

This is my app currently:

UPDATE: I have tried this way. ID_BUTTON_1 if the first button in the toolbar and i tried to change its image. But with this there is no button in the toolbar at the place for the first button. What I am doing Wrong?

VERIFY(m_toolbar.LoadBitmap(IDB_BITMAP1));
CMFCToolBarButton mbutton;
mbutton.SetImage(m_toolbar.GetImages()->GetCount() - 1);
m_toolbar.ReplaceButton(ID_BUTTON_1, CMFCToolBarButton(ID_BUTTON_1, 0));

Answer 1

I answered this recently and can no longer find my answer. You can use PNG images for your toolbars. Under the hood you still use the BMP version for the resource editor to create your event handlers etc. But you can then add your PNG as a resource and then load it into your dialog.

For example, I call this in my OnInitDialog function:

void CMeetingScheduleAssistantDlg::CreateToolbar()
{
    DWORD dwCtrlStyle = TBSTYLE_FLAT | TBSTYLE_TOOLTIPS | CBRS_SIZE_DYNAMIC;
    DWORD dwStyle = AFX_DEFAULT_TOOLBAR_STYLE;

    CMFCToolBar::m_dblLargeImageRatio = 1; // AJT v20.1.7 Bug fix
    if (m_ToolBar.CreateEx(this, dwCtrlStyle,
        dwStyle, CRect(1, 1, 1, 1), IDR_TOOLBAR))
    {
        dwStyle = CBRS_TOOLTIPS | CBRS_FLYBY | CBRS_SIZE_DYNAMIC;
        m_ToolBar.SetPaneStyle(m_ToolBar.GetPaneStyle() | dwStyle);

        CMFCToolBarInfo info;

        info.m_uiColdResID = IDB_PNG_MAIN_TOOLBAR;
        info.m_uiHotResID = IDB_PNG_MAIN_TOOLBAR;
        info.m_uiLargeColdResID = IDB_PNG_MAIN_TOOLBAR;
        info.m_uiLargeHotResID = IDB_PNG_MAIN_TOOLBAR;

        m_ToolBar.LoadToolBarEx(IDR_TOOLBAR, info, FALSE);

        CSize   sizeToolBar = m_ToolBar.CalcFixedLayout(TRUE, TRUE);
        m_ToolBar.SetWindowPos(NULL, 0, 0, sizeToolBar.cx, sizeToolBar.cy,
            SWP_NOACTIVATE | SWP_NOZORDER);

        // Move all controls down
        CPoint ptOffset(0, sizeToolBar.cy);

        CRect  rcChild;
        CWnd* pwndChild = GetWindow(GW_CHILD);
        while (pwndChild)
        {
            if (pwndChild->GetSafeHwnd() != m_ToolBar.GetSafeHwnd())
            {
                pwndChild->GetWindowRect(rcChild);
                ScreenToClient(rcChild);
                rcChild.OffsetRect(ptOffset);
                pwndChild->MoveWindow(rcChild, FALSE);
            }
            pwndChild = pwndChild->GetNextWindow();
        }

        // Resize the window
        CRect rcWindow;
        GetWindowRect(rcWindow);
        rcWindow.bottom += sizeToolBar.cy;
        MoveWindow(rcWindow, FALSE);

    }
}

I don't know where my previous answer has gone to, else I would have flagged this as duplicate. #confused.