• Article

Exercise 2: Adding simple controls to an existing Ribbon

Visual Studio 2010 has a new feature called Ribbon Designer for MFC application, which makes it easy to add and edit any Ribbon controls to your application.

In this exercise, you will learn how to drag a control in Ribbon Designer and how to add an event handler easily. For this exercise, you will use the RibbonApp solution from EX02_Starter\Begin\RibbonApp folder.

Task 1 - Adding simple controls to an existing Ribbon

  1. Launch RibbonApp.sln in Visual Studio 2010.

  2. In the Resource View, expand RibbonApp.rc ->Ribbon->IDR_RIBBON node. Double click the file to open the Ribbon Designer. The Resource View panel, Ribbon Bar Designer panel, and Toolbox panel are shown in Figure 2-1.

    Figure 2-1

  3. Drag a Category control from the Toolbox to the Ribbon Bar. In the Designer, you will see a Category named “Category1” and a Panel in Category1 named “Panel1”. Drag two Button controls from the Toolbox to “Panel1”. The buttons are named “Button1” and “Button2” by default. The Ribbon Bar has a new look, which is shown in Figure 2-2.

    Figure 2-2

  4. Right click “Category1”, and select Properties to open the Properties window. As shown in the Property window in Figure 2-3, you can easily rename the Caption to “My Category”, and edit the other properties. In the Property Window, select “IDB_WRITELARGE” from the drop down list of “Large Images”, and select “IDB_WRITESMALL” from the drop-down list of “Small Images”. This defines the image collection for the elements in this category.

    Figure 2-3

  5. Open the Properties window of the buttons you just created, and change the captions to “My Button” and “My Choice”. To add an image to your buttons, open the Properties window of “My Choice” and click “Large Image Index” (you will see a Browse button when you select the value field, which will allow you to browse the image collection). Click the Browse button, and the Image Collection dialog will pop up. Select “0” and edit the other properties as shown in Figure 2-4. Change the value of Large Image Index to “0” to add an image for “My Button”.

    Figure 2-4

  6. Test your Ribbon by clicking the “Test Ribbon” button on the toolbar, as shown in Figure 2-5.

    Figure 2-5

  7. Build and Run your application. Now, it has a new look as shown in Figure 2-6. The two buttons that you created (“My Choice” and “My Button”) are disabled by default. The buttons will be enabled once you add a click event handler for each of them.

    Figure 2-6

Task 2 - Add event handlers to the controls

  1. It is very easy to add event handlers in the Ribbon Designer. Right click the “My Button” Button control, and select “Add Event Handler”. The Event Handler Wizard will open. Select the “Command” message type and “CMainFrame” from the class list, as shown in Figure 2-7.

    Figure 2-7

  2. Click “Add and Edit”. The wizard will generate some functions automatically for you, and then open the source code editor. Here, you will see the empty function CMainFrame::OnMyButton()in MainFrm.cpp.
  3. Add the following line of code to the function OnMyButton() in Mainfrm.cpp.MessageBox(TEXT("This is My Button!"), TEXT("My Button"), MB_OK);

  4. Build and Run your solution. Your application will have a Ribbon Bar with one Category and two buttons. Click the “My Button” button, and test your application as shown in Figure 2-8.

    Figure 2-8

< previous | next >

Contents