? Help Desk ↓ My downloads ⤷ Log in
Skip Navigation LinksBCGSoft > Support > Developer Area > How to add our controls to dialogs

How to add our 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!

Control 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 "drop list", "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
CBCGPDateTimeList
Date/time list
  1. Add invisible empty Picture control (placeholder) to the Dialog Editor (1)
  2. Add CBCGPDateTimeList member variable to the dialog class (e.g, m_wndDateTimeList)
  3. Create control in OnInitDialog: m_wndDateTimeList.CreateOnPlaceHolder(this, id_of_placeholder, id_of_control, style);
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
CBCGPExpanderCtrl
Implements a container of the vertically stacked collapsible dialogs.
  1. Add invisible empty Picture control (placeholder) to the Dialog Editor (1)
  2. Add CBCGPExpanderCtrl member variable to the dialog class (e.g, m_wndExpander)
  3. Create control in OnInitDialog: m_wndExpander.CreateOnPlaceHolder(this, id_of_placeholder, id_of_control, style);
CBCGPFontComboBox
Font picker control
  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 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);
CBCGPGroup
Themed group box with optional check box/radio button.
  1. Add a Group box to your dialog box (1)
  2. Define CButton member variable for this control (2)
  3. Replace CButton with CBCGPGroup in .H file
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
CBCGPInfoBoxCtrl
Control that implements an enhanced static text box with caption, icon, color bar and link.
  1. Add a Static text to your dialog box (1)
  2. Define CStatic member variable (e.g., m_wndInfoBox) for this control (2)
  3. Replace CStatic with CBCGPInfoBoxCtrl 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 (e.g., m_wndKnob) 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). This control should have "owner-draw" and "has strings" styles.
  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
CBCGPMultiLinkCtrl
Control that renders marked-up text and notifies the owner window when users click its hyperlink(s).
  1. Add a Static text to your dialog box (1)
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPMultiLinkCtrl 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
CBCGPStatic
Static control with visual theme support.
  1. Add a static control to your dialog box
  2. Define CStatic member variable for this control (2)
  3. Replace CStatic with CBCGPStatic in .H file
If control has a default (IDC_STATIC) ID, you don't have to add this variable.
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
CBCGPTextGaugeCtrl
Text Gauge control is a static text label.
  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 CBCGPTextGaugeCtrl 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
CBCGPVisualContainerCtrl
Gauges/charts and other visual objects 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 CBCGPVisualContainerCtrl in .H file
CBCGPWebView2Ctrl
Microsoft Edge WebView2 wrapper control.
  1. Add invisible empty Picture control (placeholder) to the Dialog Editor (1)
  2. Add CBCGPWebView2Ctrl member variable to the dialog class (e.g, m_wndWebView)
  3. Create control in OnInitDialog: m_wndWebView.CreateOnPlaceHolder(this, id_of_placeholder, id_of_control, style);
CBCGPWinUITilesCtrl
Control that implements Windows 8/10-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-2022).
  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: https://support.bcgsoft.com

Back to the Developer Area