VS2010/MFC Programming Primer 53 (Ribbon Interface development: Adding controls to the ribbon bar) [Go]

Http://www.jizhuomi.com/software/253.html

The chicken peck rice in the previous section briefly describes how to create a ribbon-style application framework, and this tutorial will give you a preliminary introduction to how to add Ribbon controls to the ribbon bar.

VS2010 provides ribbon Designer for Ribbon interface development through which we can add various Ribbon controls, set control properties, and interface layout for the ribbon bar.

the interface elements of the Ribbon can be categorized into categories, panels, and basic controls (buttons, text-edit boxes, and so on), with categories composed of panels, and panels made up of basic controls such as buttons, text-edit boxes, and so on.

Chicken Peck Rice The method and properties of the Ribbon control are explained in an instance, which is more intuitive. This instance is also modified on the basis of the EXAMPLE52 project created in the previous section.

1, open the EXAMPLE52 project, in the Resource View Resource View, expand Example52->example52.rc->ribbon, under the Ribbon node, we see a system automatically generated Idr_ribbon , double-click the Idr_ribbon node to open the Ribbon Designer in the middle area, such as:

, the entire interface under the Home tab is the category, clipboard and view are the panels, and each panel has some basic controls such as buttons, checkboxes, and so on.

2. If we want to add a control to the Ribbon interface, we also need to drag the selected control from the Ribbon Control list given by toolbox into the ribbon bar. Click Toolbox under the View menu to display the Toolbox view. is the Ribbon Designer Toolbox:

Although it is somewhat different from the toolbox we used before, it is very similar. The category in Toolbox is the class, panel is the faceplate, and most of the others are basic controls.

3. In toolbox, select Category to drag into the ribbon bar, after the home category, you can see its default name is "Category1", and the default with a panel "Panel1". Here we select the "Category1" tab, right-click on "Properties", and in the displayed property page, modify the Caption property to "Function". Then select the "Panel1" Panel and modify its Caption property to "Big button" in the same way.

4. Next, we will add a new panel for the "Function" category. In Toolbox, select the Panel to drag into the Function category, and after the Big button panel, the Caption property is modified to "Small button."

5. Add a button control to the Big button panel. Select the button in Toolbox and drag it into the Big button Panel, caption modify to "Open". Add two button controls to the Small button panel in the same way, caption to "click" and "Check", respectively. The ribbon bar at this point is as follows:

6, through the comparison with the button under the home, we found that the new addition of a few buttons is not very beautiful, because there is no picture added. So how do you add a picture to a button?

It is observed that there are two icons for the buttons under home: Large icons and small icons. in fact, the large icon is a 32x32-pixel icon, and the small icon is a 16x16 icon. Chicken Peck Rice for three buttons made two sets of image sequence, each image sequence consists of three icons, the first image sequence consists of three large icons, the second image sequence consists of three small icons. As in the following two graphs:

Large Icons (newicons-32.bmp)

Small Icons (newicons-16.bmp)

to get such an image sequence, you can first find each icon, and then use tools such as iconworkshop to create an image sequence.

Copy all two pictures to the directory ... \example52\example52\res, then right-click on Example52.rc->bitmap Resource view in the project, select "Add Resource", Pop Up the Add Resource dialog box, select "Bitmap" in the tree on the left side of the Add Resource dialog box, then click the "Import" button, select the Newicons-32.bmp file and then import the large icon file, the ID defaults to Idb_ BITMAP1. Importing small icon files in the same way newicons-16.bmp,id default to IDB_BITMAP2.

In the Properties page of the Function category, you can see the large images and small images two properties that are used to set the large icon sequence and small icon sequence to be used by the control under this category. Here we set the large images property to Idb_bitmap1,small images property to Idb_bitmap2.

Then we set the picture for the Open button. In the properties page of the Open button there are image index and large image index two properties, respectively, its small icon in the small icon sequence and its large icon index in the large icon sequence, here we set its icon for the large icon, and for the large icon sequence in the first one, Then directly set the large Image index property to 0, or you can select the icon by clicking on the browse button that appears after selecting the edit box for the large Image index property, which pops up the Image Collection dialog box.

Then set the small icon for the click button and the Check button. Set the image Index property of the click button to 1,large image The Index property is still -1,check the image Index property of the button is set to 2,large the image Index property also remains-1.

7. Compile and run the program, the function Category view of the final interface is as follows:

Because none of the three buttons above add a response function for any event, they are all grayed out.

This section is about here. You can try adding other controls to see the effect. Chicken Peck Rice Thank you for your support.

VS2010/MFC Programming Primer 53 (Ribbon Interface development: Adding controls to the ribbon bar) [Go]