VC++ 2010 创建高级Ribbon界面详解(2)

Ribbon 控件的使用

1、命令按钮

命令按钮可以说是我们最常用的Ribbon控件了，我们通常都是通过命令按钮来发送某个命令，执行某个动作。它代替了过去的菜单命令，成为使用最频繁的Ribbon控件。在Ribbon界面中，主要有三种形式的命令按钮：大图标按钮，小图标按钮以及表示选择的复选按钮(CheckBox)。

图5 命令按钮

按照上回我们介绍的Ribbon界面开发流程，我们需要先准备菜单资源，图标资源，实现消息响应函数等，这里我们就不再赘述这一过程，而把重点放在如何创建Ribbon界面。下面的代码分别演示了这三种按钮的创建过程：

<!--

code by 'http://www.desteps.com'

 -->以下为引用内容：

// 创建一个新的面板，用于放置大图标按钮

CMFCRibbonPanel* pPanel1 = pCategory->AddPanel(_T("Large Buttons"));

// 创建按钮

CMFCRibbonButton* pBtn1 = new CMFCRibbonButton(ID_RIBBON_BTN_1, _T("Button"), 0, 0);

// 指定使用大图标

pBtn1->SetAlwaysLargeImage();

// 将按钮添加到面板中

pPanel1->Add(pBtn1);

CMFCRibbonButton* pBtn2 = new CMFCRibbonButton(ID_RIBBON_BTN_2, _T("Menu Button"), 1, 1);

// 可以通过SetMenu()函数为按钮设置一个子菜单

pBtn2->SetMenu(IDR_RIBBON_MENU_1);

pBtn2->SetAlwaysLargeImage();

pPanel1->Add(pBtn2);

CMFCRibbonButton* pBtn3 = new CMFCRibbonButton(ID_RIBBON_BTN_3, _T("Split Button"), 2, 2);

pBtn3->SetMenu(IDR_RIBBON_MENU_1, TRUE);

pBtn3->SetAlwaysLargeImage();

// 可以通过RemoveSubItem()和AddSubItem()动态地改变按钮的子项目

pBtn3->RemoveSubItem(0);

pBtn3->AddSubItem(new CMFCRibbonButton(ID_RIBBON_MBTN_1, _T("Item 1"), 2), 0);

pPanel1->Add(pBtn3);

// 创建新的面板，用于放置小图标按钮

CMFCRibbonPanel* pPanel2 = pCategory->AddPanel(_T("Small"));

// 创建小图标按钮

CMFCRibbonButton* pBtn4 = new CMFCRibbonButton(ID_RIBBON_BTN_4, _T("Button"), 3);

pPanel2->Add(pBtn4);

CMFCRibbonButton* pBtn5 = new CMFCRibbonButton(ID_RIBBON_BTN_5, _T("Menu Button"), 4);

pBtn5->SetMenu(IDR_RIBBON_MENU_1);

pPanel2->Add(pBtn5);

CMFCRibbonButton* pBtn6 = new CMFCRibbonButton(ID_RIBBON_BTN_6, _T("Split Button"), 5);

pBtn6->SetMenu(IDR_RIBBON_MENU_1, TRUE);

pBtn6->SetAlwaysLargeImage();

pBtn6->RemoveSubItem(1);

pBtn6->AddSubItem(new CMFCRibbonButton(ID_RIBBON_MBTN_2, _T("Item 2"), 5), 1);

pPanel2->Add(pBtn6);

//创建新的面板，用于放置复选按钮

CMFCRibbonPanel* pPanel3 = pCategory->AddPanel(_T("Check Boxes"));

pPanel3->Add(new CMFCRibbonCheckBox(ID_RIBBON_BTN_7, _T("Check Box 1")));

pPanel3->Add(new CMFCRibbonCheckBox(ID_RIBBON_BTN_8, _T("Check Box 2")));

pPanel3->Add(new CMFCRibbonCheckBox(ID_RIBBON_BTN_9, _T("Check Box 3")));

2、工具廊

Ribbon界面的一个重要革新，就是可以通过工具廊(CMFCRibbonGallery)控件，对命令的执行效果进行直观地预览。例如Word 2007的段落格式设置，就是通过工具廊直观地展示了格式的样子，这很大程度上减少了用户通过不断尝试各种参数找到合适格式的过程。

图6 工具廊

下面我们就来看看如何创建工具廊这种新的交互工具。如下的代码，演示了工具廊控件的创建过程：

<!--

code by 'http://www.desteps.com'

 -->以下为引用内容：

CMFCRibbonPanel* pPanel1 = pCategory->AddPanel(_T("Standard"));

// 创建一个标准的工具廊控件，其中IDB_RIBBON_PALETTE_1指定了

// 工具廊中的各个按钮的图标，通过这些图标对命令效果进行预览

pPanel1->Add(new CMFCRibbonGallery(ID_RIBBON_PBTN_1, _T("Embedded"), 0, 0, IDB_RIBBON_PALETTE_1, 64));

// 按钮模式的工具廊控件

// 按钮模式的工具廊控件可以减少对面板空间的占用

CMFCRibbonGallery* pBtn2 = new CMFCRibbonGallery(ID_RIBBON_PBTN_2, _T("Button"), 1, 1, IDB_RIBBON_PALETTE_1, 64);

// 设置面板按钮为按钮模式，默认情况下为画廊(Gallery)模式

pBtn2->SetButtonMode();

pBtn2->SetAlwaysLargeImage();

pPanel1->Add(pBtn2);

CMFCRibbonPanel* pPanel2 = pCategory->AddPanel(_T("Extended"));

// 对工具廊进行布局设置

CMFCRibbonGallery* pBtn3 = new CMFCRibbonGallery(ID_RIBBON_PBTN_3, _T("Resize Vertical"), 2, 2, IDB_RIBBON_PALETTE_1, 64);

pBtn3->SetButtonMode();

// 设置按钮模式下，下拉命令按钮容器(Gallery)的列数

pBtn3->SetIconsInRow(2);

pBtn3->EnableMenuResize(TRUE, TRUE);

pPanel2->Add(pBtn3);

CMFCRibbonGallery* pBtn4 = new CMFCRibbonGallery(ID_RIBBON_PBTN_4, _T("Resize Both"), 3, 3, IDB_RIBBON_PALETTE_1, 64);

pBtn4->SetButtonMode();

// 通过SetIconInRow()和EnableMenuResize()设置命令按钮的布局

pBtn4->SetIconsInRow(4);

pBtn4->EnableMenuResize(TRUE);

pPanel2->Add(pBtn4);

CMFCRibbonGallery* pBtn5 = new CMFCRibbonGallery(ID_RIBBON_PBTN_5, _T("Groups && Subitems"), 4, 4);

// 通过AddGroup()函数，对命令按钮进行分组

pBtn5->AddGroup(_T("Group 1"), IDB_RIBBON_PALETTE_1, 64);

pBtn5->AddGroup(_T("Group 2"), IDB_RIBBON_PALETTE_2, 64);

pBtn5->SetButtonMode();

pBtn5->SetIconsInRow(4);

pBtn5->EnableMenuResize(TRUE);

// 在按钮中添加子项目(按钮)

pBtn5->AddSubItem(new CMFCRibbonButton(ID_RIBBON_MENU_ITEM_1, _T("Item 1")));

pBtn5->AddSubItem(new CMFCRibbonButton(ID_RIBBON_MENU_ITEM_2, _T("Item 2")));

pBtn5->AddSubItem(new CMFCRibbonButton(ID_RIBBON_MENU_ITEM_3, _T("Item 3")));

pPanel2->Add(pBtn5);