Ribbon風格的界面

實現一個Ribbon界面的步驟:

1.新建一個單文檔Office類型的項目

2.然后一直下一步直到(用戶界面功能)這個面板,選擇使用功能區(即Ribbon界面)

3.繼續下一步,一直到高級選項卡中,因為我們關注的重點是Ribbon,故去掉導航窗格和標題欄這兩項,單擊完成即可

編譯運行的效果如下:

4.打開工程項目的資源視圖中的Ribbon這一項

5.刪除掉自帶的Ribbon控件,方法:單擊選中某個Ribbon按鈕,然后單擊Delete鍵就可以刪除了,刪除干凈的效果如下:

6.打開工具箱,向Ribbon框架中添加Ribbon控件,工具欄中的Ribbon控件預覽

7.向Ribbon框架中拖拽Ribbon控件,首先向框架中拖拽類別,然后類別中拖拽面板,然后向面板中拖拽控件

效果如下:

8.給按鈕添加位圖

在easyicon.net網站上尋找自己喜歡的圖標,這里我找的是3張英雄聯盟的圖標,圖標規格32*32

接下來使用IconWorkshop工具制作位圖圖像帶

制作完成的圖像帶的效果如下:

9.將圖像帶添加到視圖資源中

10.給Ribbon中的類別添加圖像帶,方法:選中類別,單擊鼠標右鍵選擇屬性彈出屬性窗口,找到大圖標這一項,通過下拉列表選擇剛剛添加的圖像帶的資源ID

11.給Ribbon按鈕添加位圖

依次選中Ribbon按鈕,單擊鼠標右鍵選擇屬性,修改大圖標索引0,1,2... 我們剛剛添加的圖像帶中一共有三個圖標,索引是由0開始的

效果如下:

12.給Ribbon按鈕添加消息響應

方法:在Ribbon按鈕上面單擊鼠標右鍵選擇添加時間處理程序

這里我簡單的彈出了一個消息框

void CMainFrame::OnButton2()
{
    AfxMessageBox(_T("單擊了Ribbon按鈕1"));
}


void CMainFrame::OnButton3()
{
    AfxMessageBox(_T("單擊了Ribbon按鈕2"));
}


void CMainFrame::OnButton4()
{
    AfxMessageBox(_T("單擊了Ribbon按鈕3"));
}

最終效果如下:

其他Ribbon控件的用法類似