Win32 - Button images appear in wrong order in toolbar - c++

Question

I am creating a simple Paint application using win32 api (in visual studio). I have created a toolbar and added a bitmap for 10 toolbar images (TBbuttons.bmp - size: 160x16 pixel - 4bpp indexed format) as below:
However the button images do not appear in the correct order as shown above and, moreover, some images have a black line above them (which is not what i intended):
Here is the code i use to create the toolbar as well as those buttons:
InitCommonControls();
//create initial buttons
TBBUTTON tbButtons[] =
{
{ STD_FILENEW, IDM_NEW, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0},
{ STD_FILEOPEN, IDM_OPEN, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0},
{ STD_FILESAVE, IDM_SAVE, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0}
};
//Create toolbar window
HWND hToolBarWnd = CreateToolbarEx(hWndParent,
WS_CHILD | WS_VISIBLE | CCS_ADJUSTABLE | TBSTYLE_TOOLTIPS,
ID_TOOLBAR, sizeof(tbButtons) / sizeof(TBBUTTON), HINST_COMMCTRL,
0, tbButtons, sizeof(tbButtons) / sizeof(TBBUTTON),
BUTTON_WIDTH, BUTTON_HEIGHT, IMAGE_WIDTH, IMAGE_HEIGHT,
sizeof(TBBUTTON));
//Add more buttons
TBBUTTON buttonsToAdd[] =
{
{ 0, 0, TBSTATE_ENABLED, TBSTYLE_SEP, 0, 0 },
{ STD_CUT, IDM_CUT, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 },
{ STD_COPY, IDM_COPY, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 },
{ STD_PASTE, IDM_PASTE, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 },
{ STD_DELETE, IDM_DELETE, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 }
};
SendMessage(hToolBarWnd, TB_ADDBUTTONS, (WPARAM)sizeof(buttonsToAdd) / sizeof(TBBUTTON),
(LPARAM)(LPTBBUTTON)&buttonsToAdd);
//Create 10 more buttons to draw
TBBUTTON userButtons[] =
{
{ 0, 0, TBSTATE_ENABLED, TBSTYLE_SEP, 0, 0 },
{ 0, IDM_ELLIPSE, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 },
{ 1, IDM_FILLED_ELLIPSE, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 },
{ 2, IDM_RECT, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 },
{ 3, IDM_FILLED_RECT, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 },
{ 4, IDM_CIRCLE, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 },
{ 5, IDM_FILLED_CIRCLE, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 },
{ 6, IDM_SQUARE, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 },
{ 7, IDM_FILLED_SQUARE, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 },
{ 8, IDM_LINE, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 },
{ 9, IDM_TEXT, TBSTATE_ENABLED, TBSTYLE_BUTTON, 0, 0 }
};
TBADDBITMAP tbBitmap = { hInst, IDB_BITMAP1 };
//Add bitmap to toolbar
int idx = SendMessage(hToolBarWnd, TB_ADDBITMAP, (WPARAM)sizeof(tbBitmap) / sizeof(TBADDBITMAP),
(LPARAM)(LPTBADDBITMAP)&tbBitmap);
for (int i = 1; i <= 10; i++) {
userButtons[i].iBitmap += idx;
}
//Add button to toolbar
SendMessage(hToolBarWnd, TB_ADDBUTTONS, (WPARAM)sizeof(userButtons) / sizeof(TBBUTTON),
(LPARAM)(LPTBBUTTON)&userButtons);
I am still new to win32 api and i have no idea what is the cause of this. The application still runs fine but the buttons images are completely wrong. How can i fix this? Is it because of my code or the bitmap i created that caused the issue?
EDIT: I added a new bitmap i found from the Internet (TBbitmap2.bmp) as a test and created anew another bitmap (TBbitmap3.bmp) similar to the first one. Of all 3 bitmaps, the first one produced the problem in the question and the other 2 bitmaps worked fine. Here is the link to all 3 bitmaps. The question remains why the first bitmap kept producing the problem but the other 2 worked? (they have the same properties just different size).

Answer 1

I tried to create a sample and used the bitmap.
It does have some weird behavior. After I built the project for the first time, it did produce the problem you said. But after I rebuilt, the problem disappeared:
I think the bitmap was not loaded correctly during the build process, maybe you can try to rebuild the project and run the program.