튀어 오르는 이미지 (Hot image)

 

인터넷 익스플로러 4.0을 동작시켜 툴바 위로 마우스 커서를 이동하면, 마우스 커서가 단추 위로 이동할 때 툴바의 단추는 생생한 색으로 튀어 오른다. 이 비주얼한 현상이 툴바 컨트롤의 '핫 이미지' 기능이다.

 위의 그림에서 "저장"의 툴바 이미지가 색이 다른 것을 확인할 수 있을 것이다.

AppWizard는 버튼의 모양을 나타내기 위해서 툴바 리소스를 사용하고, 각 버튼과 커맨드 식별자를 연결한다. 툴바 리소스는 LoadToolBar()로 여러개의 비트맵을 이미지 목록으로 변환한다. 튀어 오르는 이미지를 표시하기 위해서는 원래의 툴바 리소스 외에 또 하나의 이미지가 필요하다. 이를 위해 SetHotImageList() 함수를 이용한다.

 

1. 이를 구현하기 위해 MainFrm.cpp 파일의 OnCreate() 함수에서 다음 굵은 글씨 부분을 추가한다.

 모양새를 위해 "툴바에 툴팁 대신에 텍스트 라벨로 표시" 부분을 참조하여 툴바에 라벨을 출력하도록 하는 부분을 추가하였다.(보라색 글씨)

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
        if (CFrameWnd::OnCreate(lpCreateStruct) == -1)
                return -1;
        
        if (!m_wndToolBar.CreateEx(this, TBSTYLE_FLAT, WS_CHILD | WS_VISIBLE | CBRS_TOP
                | CBRS_GRIPPER | CBRS_FLYBY | CBRS_SIZE_DYNAMIC) ||
                !m_wndToolBar.LoadToolBar(IDR_MAINFRAME))
        {
                TRACE0("Failed to create toolbar\n");
                return -1;      // fail to create
        }

        CImageList img;
        if(!img.Create(IDB_MAINFRAME,16,0,RGB(128,128,128))) {
                TRACE0("Failed to load hot images\n");
                return -1;
        }
        m_wndToolBar.GetToolBarCtrl().SetHotImageList(&img);
        img.Detach();
        
        if (!m_wndStatusBar.Create(this) ||
                !m_wndStatusBar.SetIndicators(indicators,
                  sizeof(indicators)/sizeof(UINT)))
        {
                TRACE0("Failed to create status bar\n");
                return -1;      // fail to create
        }

        // Add Text to each button
        for(int i=0; i<m_wndToolBar.GetCount(); i++) {
                UINT id = m_wndToolBar.GetItemID(i);
                CString s;
                if(!s.LoadString(id)) continue;
                int j = s.Find(_T('\n'));
                if(j<0) continue;
                s = s.Right(s.GetLength()-j-1);
                m_wndToolBar.SetButtonText(i, s);
        }

        // Adjust sizes to include text
        CRect rect;
        m_wndToolBar.GetItemRect(0, &rect);
        m_wndToolBar.SetSizes(rect.Size(), CSize(16, 15));

        // TODO: Delete these three lines if you don't want the toolbar to
        //  be dockable

        m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
        EnableDocking(CBRS_ALIGN_ANY);
        DockControlBar(&m_wndToolBar);

        return 0;
}

 

2. res 폴더에 있는 툴바 이미지인 ToolBar.bmp 파일을 ToolBar1.bmp 로 복사하여 ID가 IDB_MAINFRAME 인 비트맵 리소스로 import 한다. 이 이미지가 마우스 버튼이 툴바 버튼 위로 올라 왔을 때 나타날 그림이므로 적당히 색을 바꾼다. 필요하다면 원래의 툴바 이미지를 색이 없도록 만들고, 새로운 이미지를 원래대로 색이 있도록 해 두는 것도 좋을 것이다.

- the end of this article -