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 the dialog resource.
  2. How to map the control to C++ class member variable.

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 (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (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 (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (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 tool tip.
  1. Add a Button to the Dialog Editor (1)
  2. Map this control to the new CButton member variable (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 the Dialog Editor (1)
  2. Map this control to the new CButton member variable (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 the Dialog Editor (1)
  2. Map this control to the new CEdit member variable (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 (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (2) (e.g, m_wndCalLocation)
  3. Add CBCGPCalculator member variable to the dialog class (e.g, m_wndCalc)
  4. Add control initialization code to your OnInitDialog:
CRect rectCalc;
m_wndCalcLocation.GetWindowRect(&rectCalc);
ScreenToClient(rectCalc);

m_wndCalc.CreateControl(this, rectCalc, id);
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 (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (2)  (e.g, m_wndCalendarLocation)
  3. Add CBCGPCalendar member variable to the dialog class (e.g, m_wndCalendar)
  4. Add control initialization code to your OnInitDialog:
CRect rectCalendar;
m_wndCalendarLocation.GetWindowRect(&rectCalendar);
ScreenToClient(rectCalendar);

m_wndCalendar.Create(WS_CHILD | WS_VISIBLE | WS_BORDER, rectCalendar, this, id);
CBCGPChartCtrl Control that encapsulates a Chart visual object, which covers the control's client area.
  1. Add an empty Picture control (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (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 the Dialog Editor (1)
  2. Add LBS_OWNERDRAWFIXED or LBS_OWNERDRAWVARIABLE and| LBS_HASSTRINGS styles to this control
  3. Map this control to the new CListBox member variable (2)
  4. Replace CListBox with CBCGPCheckListBox in .H file
CBCGPCircularGaugeCtrl Control with embedded circular gauge.
  1. Add an empty Picture control (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (2)
  3. Replace CStatic with CBCGPCircularGaugeCtrl in .H file
CBCGPColorBar Office-style color palette.
  1. Add invisible empty Picture control (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (2)  (e.g, m_wndColorBarLocation)
  3. Add CBCGPColorBar member variable to the dialog class (e.g, m_wndColorBar)
  4. Add control initialization code to your OnInitDialog:
CRect rectColorBar;
m_wndColorBarLocation.GetWindowRect(&rectColorBar);
ScreenToClient(rectColorBar);

m_wndColorBar.CreateControl(this, rectColorBar, id);
CBCGPColorButton Office-style color picker.
  1. Add a Button to the Dialog Editor (1)
  2. Map this control to the new CButton member variable (2)
  3. Replace CButton with CBCGPColorButton 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 the Dialog Editor
  2. Map this control to the new CComboBox member variable (2)
  3. Replace CComboBox with CBCGPComboBox in .H file
CBCGPDateTimeCtrl Date/time picker
  1. Add a Button to the Dialog Editor (1)
  2. Map this control to the new CButton member variable (2)
  3. Replace CButton with CBCGPDateTimeCtrl in .H file
CBCGPDurationCtrl Time duration control
  1. Add a Button to the Dialog Editor (1)
  2. Map this control to the new CButton member variable (2)
  3. Replace CButton with CBCGPDurationCtrl in .H file
CBCGPDiagramVisualContainerCtrl Diagram container control
  1. Add an empty Picture control (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (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 the Dialog Editor (1)
  2. Map this control to the new CEdit member variable (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 (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (2)  (e.g, m_wndEditLocation)
  3. Add CBCGPEditCtrl member variable to the dialog class (e.g, m_wndEdit)
  4. Add control initialization code to your OnInitDialog:
CRect rectEdit;
m_wndEditLocation.GetWindowRect(&rectEdit);
ScreenToClient(rectEdit);

m_wndEdit.Create(WS_CHILD | WS_VISIBLE, rectEdit, this, id);
CBCGPEditListBox Editable list box with a caption and "New", "Delete", "Up" and "Down" buttons
  1. Add an empty Picture control (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (2)
  3. Replace CStatic with CBCGPEditListBox in .H file
CBCGPFontComboBox Font picker control
  1. Add a Combo box to the Dialog Editor
  2. Map this control to the new CComboBox member variable (2)
  3. Replace CComboBox with CBCGPFontComboBox in .H file
CBCGPGridCtrl Advanced grid and report control
  1. Add invisible empty Picture control (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (2)  (e.g, m_wndGridLocation)
  3. Add CBCGPGridCtrl member variable to the dialog class (e.g, m_wndGrid)
  4. Add control initialization code to your OnInitDialog:
CRect rectGrid;
m_wndGridLocation.GetWindowRect(&rectGrid);
ScreenToClient(rectGrid);

m_wndGrid.Create(WS_CHILD | WS_VISIBLE, rectGrid, this, id);
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 the Dialog Editor (1)
  2. Map this control to the new CButton member variable (2)
  3. Replace CButton with CBCGPHotSpotImageCtrl in .H file
CBCGPKnobCtrl Control that emulates the digital knob functionality.
  1. Add an empty Picture control (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (2)
  3. Replace CStatic with CBCGPKnobCtrl in .H file
CBCGPLinearGaugeCtrl Control with embedded linear gauge.
  1. Add an empty Picture control (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (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 the Dialog Editor (1)
  2. Map this control to the new CComboBox member variable (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 the Dialog Editor (1)
  2. Add LBS_OWNERDRAWFIXED or LBS_OWNERDRAWVARIABLE and| LBS_HASSTRINGS styles to this control
  3. Map this control to the new CListBox member variable (2)
  4. Replace CListBox with CBCGPListBox in .H file
CBCGPListCtrl Extended list control control with visual theme support.
  1. Add a List control to the Dialog Editor (1)
  2. Map this control to the new CListCtrl member variable (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 the Dialog Editor (1)
  2. Map this control to the new CEdit member variable (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 the Dialog Editor (1)
  2. Map this control to the new CButton member variable (2)
  3. Replace CButton with CBCGPMenuButton in .H file
CBCGPProgressCtrl Extended progress control control with visual theme support.
  1. Add a Progress control to the Dialog Editor (1)
  2. Map this control to the new CProgressCtrl member variable (2)
  3. Replace CProgressCtrl with CBCGPProgressCtrl in .H file
CBCGPPropList Advanced property grid control with embedded toolbar, search box, multi-level hierarchy, item states, commands and descriptions.
  1. Add invisible empty Picture control (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (2)  (e.g, m_wndPropListLocation)
  3. Add CBCGPPropList member variable to the dialog class (e.g, m_wndPropList)
  4. Add control initialization code to your OnInitDialog:
CRect rectList;
m_wndPropListLocation.GetWindowRect(&rectList);
ScreenToClient(rectList);

m_wndPropList.Create(WS_CHILD | WS_VISIBLE, rectList, this, id);
CBCGPRotationCtrl Rotation control is derived from Radial menu and intended for 3D object (such as charts in 3D) views.
  1. Add empty Picture control (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (2)
  3. Replace CStatic with CBCGPRotationCtrl in .H file
CBCGPRadialMenu Radial menu control
  1. Add empty Picture control (place holder) to the Dialog Editor (1)
  2. Map this control to the new CStatic member variable (2)
  3. Replace CStatic with CBCGPRadialMenu in .H file
CBCGPScrollBar Scroll bar control with visual theme support.
  1. Add a Scroll bar to the Dialog Editor (1)
  2. Map this control to the new CScrollBar member variable (2)
  3. Replace CScrollBar with CBCGPScrollBar in .H file
CBCGPShellBreadcrumb Explorer-style shell breadcrumb control.
  1. Verify that you've call to "InitShellManager();" in the beginning of your application InitInstance()
  2. Add an Edit control to the Dialog Editor (1)
  3. Map this control to the new CEdit member variable (2)
  4. Replace CEdit with CBCGPShellBreadcrumb in .H file
CBCGPShellList Explorer-style shell list control.
  1. Verify that you've call to "InitShellManager();" in the beginning of your application InitInstance()
  2. Add a List control to the Dialog Editor (1)
  3. Map this control to the new CListCtrl member variable (2)
  4. Replace CListCtrl with CBCGPShellList in .H file
CBCGPShellTree Explorer-style shell tree view.
  1. Verify that you've call to "InitShellManager();" in the beginning of your application InitInstance()
  2. Add a Tree control to the Dialog Editor (1)
  3. Map this control to the new CTreeCtrl member variable (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 the Dialog Editor (1)
  2. Map this control to the new CSpinButtonCtrl member variable (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 (place holder) to the Dialog Editor
  2. Map this control to the new CStatic member variable (2)
  3. Replace CStatic with CBCGPSwitchCtrl in .H file
CBCGPTabWnd The Advanced Tab Control provides the functionality that allows to create tabbed widgets.
  • Add invisible empty Picture control (place holder) to the Dialog Editor (1)
  • Map this control to the new CStatic member variable (2)  (e.g, m_wndTabLocation)
  • Add CBCGPTabWnd member variable to the dialog class (e.g, m_wndTab)
  • Add control initialization code to your OnInitDialog:
    • CRect rectTab;
    m_wndTabLocation.GetWindowRect(&rectTab);
    ScreenToClient(rectTab);

    m_wndTab.Create(CBCGPTabWnd::STYLE_3D, rectTab, this, id, CBCGPTabWnd::LOCATION_TOP);
    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 (place holder) to the Dialog Editor (1)
    2. Map this control to the new CStatic member variable (2)
    3. Replace CStatic with CBCGPTagCloudCtrl in .H file
    CBCGPTreeCtrl Extended tree control with visual theme support.
    1. Add a Tree control to the Dialog Editor (1)
    2. Map this control to the new CTreeCtrl member variable (2)
    3. Replace CTreeCtrl with CBCGPTreeCtrl in .H file
    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 (place holder) to the Dialog Editor (1)
    2. Map this control to the new CStatic member variable (2)
    3. Replace CStatic with CBCGPTreeMapCtrl in .H file
    CBCGPURLLinkButton Hyperlink control.
    1. Add a Button to the Dialog Editor (1)
    2. Map this control to the new CButton member variable (2)
    3. Replace CButton with CBCGPURLLinkButton in .H file
    CBCGPWinUITilesCtrl Control that implements Windows 8-like tiles.
    1. Add an empty Picture control (place holder) to the Dialog Editor (1)
    2. Map this control to the new CStatic member variable (2)
    3. Replace CStatic with CBCGPWinUITilesCtrl in .H file

     

    How to add a standard Windows control to the dialog resource:

    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. Activate Visual Studio Toolbox ("View | Toolbox" or Ctrl+Alt+X)
    3. Click a required Toolbox item (e.g., Picture control or Button) and drop it into the dialog.
    4. If you've added an empty Picture control (place holder), you've to modify the control ID from IDC_STATIC to some "actual" value such as IDC_CHART or IDC_TILES. Otherwise, this control cannot be mapped to the class member variable.

    How to map a control to a class member variable:

    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 a required control in the Dialog Editor.
    2. Launch MFC Class Wizard ("View | ClassWizard" in VC++ 6.0 or "Project | Class Wizard" in VS 2010/2012).
    3. Switch to "Member Variables" tab.
    4. Select the required control by ID.
    5. Click "Add Variable" button.
    6. Enter the 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 required 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