The Designer allows you easily create mock ups for real applications. It takes an existing MFC project as an input and generates an XML representation of Ribbon elements along with RC files as an Output. When the designer part of the work has been done you just compile the project, run and see the designed Ribbon control in action.
This guide explains how to take advantage of the Designer tool.
First of all you have to create an MFC or BCGControlBar Pro -based application using the Application Wizard, or select an existing (MFC or BCGPro-based) application.
The application must be either SDI, or MDI, because Ribbon Control can't be created on dialogs.
The designer supports all Visual Studio projects ranging from Visual Studio 6.0 up to Visual Studio 2015.
Note. If you select a pure MFC project, you'll need to perform some additional steps for migration from MFC to BCGControlBar Pro.
Run BCGRibbonDesigner.exe application. It offers you to open an existing project, or open a project from the recent project list. Select the desired project and the environment is ready to work!
An usable Ribbon Control must contain at least one category, therefore the first thing you have to do when you start the design process is to add a Category. To add a new Category select a Category object from the Toolbox, or click the "Add Category" action in the Actions window, or invoke a context menu clicking on the Ribbon Control's design surface. This action shows up the "Add Category" dialog.
When a Category has been added, you can start adding Panels.
To add a Panel select a Panel object from the Toolbox, click a link in the Actions window, or invoke a context menu by clicking right mouse button on the Category's design surface. This action brings the "Add Panel" dialog
To add a new element to a Panel select the appropriate element in the Toolbox window or invoke a context menu by clicking right mouse button on the Panel's design surface. The newly added element is selected in the Designer and its properties can be edited in the Properties window. You can define element's caption, tooltip, tooltip description, keytips, large and small images (if appropriate), width (for combo boxes, edit boxes, slider) and so on.
Element's images can be either selected from image lists specified during the "Add Category" step, or loaded from separate bmp, png or ico file.
Pay attention that the ID property allows you either select the Element's Command ID from a list of existing commands, or specify a new Command ID.
You can always edit the image collection, associated with current Category and / or replace an element's image at design time.
For this purpose select an Element and drop down combo box associated with the "Image" property.
Now you can select a new image from the list, or select <edit...>. This action brings up the "Image Collection" dialog:
When you have filled up Categories and Panels, you can set up the initial state of QAT, e.g. select elements, that will appear on the QAT at the application start up.
Click the QAT arrow on the Designer surface:
You can look through the list of existing Commands and add them to the Quick Access Toolbar. A check box displayed with each command in the "Quick Access Toolbar" list indicates whether the command is visible on the QAT, or available from the QAT's drop down button.
Note, that commands do not show up on the QAT in Designer.
When you have completed the design process, or just want to see the designed Ribbon in action, save the project and perform a couple of steps to setup the application Ribbon Control.
The Designer creates an XML representation of Ribbon Control layout, generates png files with Image Collections, creates an *.rc2 with references to the generated files, and adds definitions of Command IDs created at design time to resource.h file. Also, when the project is being saved, you are offered an option to add a reference to rc2 file to the application's *.rc file.
All Designer's output is located in the res\BCGSoft_ribbon folder.
If you're working with BCGControlBar Pro-based project, perform the following steps to connect your application with newly designed Ribbon control:
Declare the Ribbon Control object in CMainFrame class:
In CMainFrame::OnCreate create and initialize the Ribbon Control: