BCGSoft > Developer Area > Controls

How to add BCGControlBar/BCGSuite for MFC controls to dialogs

If you're using our Windows Forms products, there is no problem to add our controls to your form: just drag the required item from the Visual Studio toolbox and drop it into the form. But unfortunately, a life of MFC developers is not so easy: adding a non-standard control to the dialog requires some steps. In this walkthrough we'll try to describe how to do this task. If you don't have enough experience with Visual C++/MFC, please take a look at the following information:

  1. How to add a standard Windows control to a dialog box.
  2. How to add a member variable for a dialog control.

We hope that this walkthrough will help to make your work much more efficient!

Class name Description How to add
CBCGPAnalogClockCtrl Control with embedded analog clock gauge.
  1. Add an empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPAnalogClockCtrl in .H file
CBCGPAnimCtrl Control that displays a set of bitmaps with specified frame rate.
  1. Add an empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPAnimCtrl in .H file
CBCGPButton Control that provides the extended functionality of the standard Windows button controls. It includes the new look & feel styles, the various ways to align text, ability to combine an image and text, set cursor and tooltip.
  1. Add a Button to your dialog box (1)
  2. Define CButton member variable for this control (2)
  3. Replace CButton with CBCGPButton in .H file
CBCGPBrushButton Brush button is derived from the regular pushbutton control and displays a brush preview on left. When user clicks this button, modal brush edit dialog appears.
  1. Add a Button to your dialog box (1)
  2. Define CButton member variable for this control (2)
  3. Replace CButton with CBCGPBrushButton in .H file
CBCGPBreadcrumb Control that allows the user to explore hierarchical data, such as application-defined libraries or file directories. It may be compared to the tree-view control that does not show the whole items tree at once.
  1. Add an Edit control to your dialog box (1)
  2. Define CEdit member variable for this control (2)
  3. Replace CEdit with CBCGPBreadcrumb in .H file
CBCGPCalculator Control that implements the functionality of an arithmetical calculator.
  1. Add invisible empty Picture control (placeholder) to the Dialog Editor (1)
  2. Add CBCGPCalculator member variable to the dialog class (e.g, m_wndCalc)
  3. Create control in OnInitDialog: m_wndCalc.CreateOnPlaceHolder(this, id_of_placeholder, id_of_control, style);
CBCGPCalendar Control that implements the functionality of calendar control. The control can display several months at once. The number of months to display is calculated automatically, according to the control size.
  1. Add invisible empty Picture control (placeholder) to the Dialog Editor (1)
  2. Add CBCGPCalendar member variable to the dialog class (e.g, m_wndCalendar)
  3. Create control in OnInitDialog: m_wndCalendar.CreateOnPlaceHolder(this, id_of_placeholder, id_of_control, style);
CBCGPChartCtrl Control that encapsulates a Chart visual object, which covers the control's client area.
  1. Add an empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPChartCtrl in .H file
CBCGPCheckListBox Extended checked list box control with visual theme, captions and "pinned" items support
  1. Add a List box to your dialog box (1). This control should have "owner-draw" and "has strings" styles.
  2. Define CListBox member variable for this control (2)
  3. Replace CListBox with CBCGPCheckListBox in .H file
CBCGPCircularGaugeCtrl Control with embedded circular gauge.
  1. Add an empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPCircularGaugeCtrl in .H file
CBCGPCircularProgressIndicatorCtrl Control with embedded circular progress indicator.
  1. Add an empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with  CBCGPCircularProgressIndicatorCtrl in .H file
CBCGPColorBar Office-style color palette.
  1. Add invisible empty Picture control (placeholder) to the Dialog Editor (1)
  2. Add CBCGPColorBar member variable to the dialog class (e.g, m_wndColorBar)
  3. Create control in OnInitDialog: m_wndColorBar.CreateOnPlaceHolder(this, id_of_placeholder, id_of_control, style);
CBCGPColorButton Office-style color picker.
  1. Add a Button to your dialog box (1)
  2. Define CButton member variable for this control (2)
  3. Replace CButton with CBCGPColorButton in .H file
CBCGPColorComboBox Control that implements an owner-draw combo box with drop-down list that contains color names with a color box on the left.
  1. Add a Combo box to your dialog box. This control should have "owner-draw" and "has strings" styles.
  2. Define CComboBox member variable for this control (2)
  3. Replace CComboBox with CBCGPColorComboBox in .H file
CBCGPComboBox Control that implements a drawing of a combo box control using Visual Theme. It's also designed to support drawing on "Aero Glass".
  1. Add a Combo box to your dialog box. This control should have "owner-draw" and "has strings" styles.
  2. Define CComboBox member variable for this control (2)
  3. Replace CComboBox with CBCGPComboBox in .H file
CBCGPDateTimeCtrl Date/time picker
  1. Add a Button to your dialog box (1)
  2. Define CButton member variable for this control (2)
  3. Replace CButton with CBCGPDateTimeCtrl in .H file
CBCGPDurationCtrl Time duration control
  1. Add a Button to your dialog box (1)
  2. Define CButton member variable for this control (2)
  3. Replace CButton with CBCGPDurationCtrl in .H file
CBCGPDiagramVisualContainerCtrl Diagram container control
  1. Add an empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPDiagramVisualContainerCtrl in .H file
CBCGPEdit Edit control with a browse button and search box functionality.
  1. Add an Edit control to your dialog box (1)
  2. Define CEdit member variable for this control (2)
  3. Replace CEdit with CBCGPEdit in .H file
CBCGPEditCtrl Advanced edit control with syntax highlighting, markers, outlining (collapsible nodes) and IntelliSense support.
  1. Add invisible empty Picture control (placeholder) to the Dialog Editor (1)
  2. Add CBCGPEditCtrl member variable to the dialog class (e.g, m_wndEdit)
  3. Create control in OnInitDialog: m_wndEdit.CreateOnPlaceHolder(this, id_of_placeholder, id_of_control, style);
CBCGPEditListBox Editable list box with a caption and "New", "Delete", "Up" and "Down" buttons
  1. Add an empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPEditListBox in .H file
CBCGPFontComboBox Font picker control
  1. Add a Combo box to your dialog box
  2. Define CComboBox member variable for this control (2)
  3. Replace CComboBox with CBCGPFontComboBox in .H file
CBCGPGridCtrl Advanced grid and report control
  1. Add invisible empty Picture control (placeholder) to the Dialog Editor (1)
  2. Add CBCGPGridCtrl member variable to the dialog class (e.g, m_wndGrid)
  3. Create control in OnInitDialog: m_wndGrid.CreateOnPlaceHolder(this, id_of_placeholder, id_of_control, style);
CBCGPHotSpotImageCtrl Control with background image containing clickable rectangular areas (hot spots). When the user clicks a hot spot, the control sends the WM_COMMAND message with BN_CLICKED code to the parent.
  1. Add a Button to your dialog box (1)
  2. Define CButton member variable for this control (2)
  3. Replace CButton with CBCGPHotSpotImageCtrl in .H file
CBCGPKnobCtrl Control that emulates the digital knob functionality.
  1. Add an empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPKnobCtrl in .H file
CBCGPLinearGaugeCtrl Control with embedded linear gauge.
  1. Add an empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPLinearGaugeCtrl in .H file
CBCGPLineStyleComboBox A combo box with predefined set of line styles such as solid, dot or dash.
  1. Add a Combo box to your dialog box (1)
  2. Define CComboBox member variable for this control (2)
  3. Replace CComboBox with CBCGPLineStyleComboBox in .H file
CBCGPListBox Extended list box control with visual theme, captions and "pinned" items support
  1. Add a List box to your dialog box (1). This control should have "owner-draw" and "has strings" styles.
  2. Define CListBox member variable for this control (2)
  3. Replace CListBox with CBCGPListBox in .H file
CBCGPListCtrl Extended list control with visual theme support.
  1. Add a List control to your dialog box (1)
  2. Define CListCtrl member variable for this control (2)
  3. Replace CListCtrl with CBCGPListCtrl in .H file
CBCGPMaskEdit Extended edit control that is able to validate typed characters against the specified mask and display them according to specified template.
  1. Add an Edit control to your dialog box (1)
  2. Define CEdit member variable for this control (2)
  3. Replace CEdit with CBCGPMaskEdit in .H file
CBCGPMenuButton Control that provides the functionality of button that shows popup menu when clicked and redirects a selected command to the parent.
  1. Add a Button to your dialog box (1)
  2. Define CButton member variable for this control (2)
  3. Replace CButton with CBCGPMenuButton in .H file
CBCGPProgressCtrl Extended progress control with visual theme support.
  1. Add a Progress control to your dialog box (1)
  2. Define CProgressCtrl member variable for this control (2)
  3. Replace CProgressCtrl with CBCGPProgressCtrl in .H file
CBCGPPropertySheetCtrl Property sheet control.
  1. Add invisible empty Picture control (placeholder) to your dialog box (1)
  2. Add CBCGPPropertySheetCtrl member variable to the dialog class (e.g, m_wndPropSheet)
  3. Add control initialization code to your OnInitDialog:
m_wndPropSheet.m_bIsAutoDestroy = FALSE;
m_wndPropSheet.CreateOnPlaceHolder(this, id_of_placeholder, id_of_control, style);
CBCGPPropList Advanced property grid control with embedded toolbar, search box, multi-level hierarchy, item states, commands and descriptions.
  1. Add invisible empty Picture control (placeholder) to the Dialog Editor (1)
  2. Add CBCGPPropList member variable to the dialog class (e.g, m_wndPropList)
  3. Create control in OnInitDialog: m_wndPropList.CreateOnPlaceHolder(this, id_of_placeholder, id_of_control, style);
CBCGPRotationCtrl Rotation control is derived from Radial menu and intended for 3D object (such as charts in 3D) views.
  1. Add empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPRotationCtrl in .H file
CBCGPRadialMenu Radial menu control
  1. Add empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPRadialMenu in .H file
CBCGPScrollBar Scroll bar control with visual theme support.
  1. Add a Scroll bar to your dialog box (1)
  2. Define CScrollBar member variable for this control (2)
  3. Replace CScrollBar with CBCGPScrollBar in .H file
CBCGPShellBreadcrumb Explorer-style shell breadcrumb control.
  1. Verify that you added a call to "InitShellManager();" at the beginning of your application InitInstance()
  2. Add an Edit control to your dialog box (1)
  3. Define CEdit member variable for this control (2)
  4. Replace CEdit with CBCGPShellBreadcrumb in .H file
CBCGPShellList Explorer-style shell list control.
  1. Verify that you added a call to "InitShellManager();" at the beginning of your application InitInstance()
  2. Add a List control to your dialog box (1)
  3. Define CListCtrl member variable for this control (2)
  4. Replace CListCtrl with CBCGPShellList in .H file
CBCGPShellTree Explorer-style shell tree view.
  1. Verify that you added a call to "InitShellManager();" at the beginning of your application InitInstance()
  2. Add a Tree control to your dialog box (1)
  3. Define CTreeCtrl member variable for this control (2)
  4. Replace CTreeCtrl with CBCGPShellTree in .H file
CBCGPSpinButtonCtrl Spin ("up/down") control with visual theme support.
  1. Add a Spin ("up/down") control to your dialog box (1)
  2. Define CSpinButtonCtrl member variable for this control (2)
  3. Replace CSpinButtonCtrl with CBCGPSpinButtonCtrl in .H file
CBCGPSwitchCtrl "On/Off" gauge with a different shapes and visual themes.
  1. Add an empty Picture control (placeholder) to your dialog box
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPSwitchCtrl in .H file
CBCGPTabCtrl Themed Tab control.
  1. Add a Tab control to your dialog box
  2. Define CTabCtrl member variable for this control (2)
  3. Replace CTabCtrl with CBCGPTabCtrl in .H file
CBCGPTabWnd The Advanced Tab Control provides the functionality that allows to create tabbed widgets.
  1. Add invisible empty Picture control (placeholder) to the Dialog Editor (1)
  2. Add CBCGPTabWnd member variable to the dialog class (e.g, m_wndTab)
  3. Create control in OnInitDialog: m_wndTab.CreateOnPlaceHolder(this, id_of_placeholder, id_of_control, style);
CBCGPTagCloudCtrl Tag Cloud control is a visual representation for text data ("tags") and the importance of each tag is shown with font size or color.
  1. Add an empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPTagCloudCtrl in .H file
CBCGPTreeCtrl Tree control with visual theme support.
  1. Add a Tree control to your dialog box (1)
  2. Define CTreeCtrl member variable for this control (2)
  3. Replace CTreeCtrl with CBCGPTreeCtrl in .H file
CBCGPTreeCtrlEx Extended Tree Control with multiple columns, filter bar and visual theme support.
  1. Add invisible empty Picture control (placeholder) to the Dialog Editor (1)
  2. Add CBCGPTreeCtrlEx member variable to the dialog class (e.g, m_wndTree)
  3. Create control in OnInitDialog: m_wndTree.CreateOnPlaceHolder(this, id_of_placeholder, id_of_control, style);
CBCGPTreeMapCtrl Tree map is a space-constrained visualization of hierarchical structures. It shows attributes of leaf nodes using size and colors.
  1. Add an empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPTreeMapCtrl in .H file
CBCGPURLLinkButton Hyperlink control.
  1. Add a Button to your dialog box (1)
  2. Define CButton member variable for this control (2)
  3. Replace CButton with CBCGPURLLinkButton in .H file
CBCGPWinUITilesCtrl Control that implements Windows 8-like tiles.
  1. Add an empty Picture control (placeholder) to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPWinUITilesCtrl in .H file

 

How to add a standard Windows control to a dialog box:

  1. Open the Dialog Editor (in the "Resource View" pane double-click the Dialog item (e.g., IDD_ABOUT) or add a new dialog/form resource).
  2. Display Visual Studio Toolbox ("View | Toolbox" or Ctrl+Alt+X).
  3. Drag and drop the control from the Toolbox window to the location on your dialog box.
  4. If you're adding an empty Picture control (placeholder), you've to modify the control ID from IDC_STATIC to some "actual" value such as IDC_CHART or IDC_TILES. Otherwise, you cannot add a member variable for this control.

How to add a member variable for a dialog control:

If your working environment is Visual C++ 6.0, Visual Studio 2010 or later, the easiest way to do it is using MFC Class Wizard:

  1. Select control in the Dialog Editor.
  2. Launch MFC Class Wizard ("View | ClassWizard" in VC++ 6.0 or "Project | Class Wizard" in VS 2010-2017).
  3. Switch to "Member Variables" tab.
  4. Select a required control by ID.
  5. Click "Add Variable" button.
  6. Enter a member name, choose "Control" category and click OK button. A new C++ class member associated with the control will be added to your code.

In other Visual Studios versions (such as Visual Studio 2005 or 2008) you can use "Add Variable" context menu item:

  1. Right-click a control in the Dialog Editor
  2. Choose "Add Variable..." menu item - "Add Member Variable" wizard is appear.
  3. Enter the variable name, choose "Control" category and click Finish button. A new C++ class member associated with the control will be added to your code.

If you still have any problems, please don't hesitate to contact our support: http://www.bcgsoft.com/support.htm