Export (0) Print
Expand All

Walkthrough: Creating a Windows Forms Control 

Windows Forms controls are components that can be placed in Windows Forms applications (GUI applications that target the Common Language Runtime). Windows Forms applications in Visual C++ use .NET Framework classes and other .NET features with the new Visual C++ syntax.

In this procedure, you create a Windows Forms control that displays a number which increments each time the label is clicked in an application. You will also create a Windows Forms application project to test the control.

This walkthrough covers the following:

  • Creating a New Project

  • Designing the Control

  • Adding a Custom Property to the Control

  • Adding a Project to Test the Control

  • Placing the Control in an Application

  • Running the Application

The Windows Forms Control project template you use in this section creates a User Control, which is a composite control that contains other controls.

Alternatively, you can create a Windows Forms control by deriving a class directly from the Control class (where your code is responsible for drawing the control) or the Component class (a control with no UI).

To create a new Windows Forms control project

  1. On the File menu, click New, and then click Project….

  2. In the Project Types pane, select CLR in the Visual C++ node, then select Windows Forms Control Library in the Visual Studio installed templates pane.

    Type a name for the project, such as clickcounter.

    Type a different name for the solution, such as controlandtestapp.

    You can accept the default location, type in a location or browse to a directory where you want to save the project.

  3. The Windows Forms Designer opens, showing an area where you add the controls you want to place on the control design surface.

In this step, you add a Label control to the control design surface. You then set some properties on the control itself and on the Label control it contains.

To set the properties of a User Control

  1. If the Properties window is not visible, on the View menu, click Properties Window.

    Click on the control to select it and set its properties as follows:

    • Set the Size property to 100, 100.

    • Set the BorderStyle to Fixed3D

      The label boundaries will be visible when the control placed in an application.

  2. If the Toolbox window is not visible, click Toolbox on the View menu.

    Drag a Label control from the Toolbox to the design surface and place it near the middle of the control.

    Set these properties for the label:

    • Set the BorderStyle to FixedSingle.

    • Set the Text to the digit 0 (zero).

    • Set the Autosize to False.

    • Set the Size to 30, 20.

    • Set the TextAlign to MiddleCenter.

    Leave the Name property (how you refer to it in code) unchanged as label1. The control should look like this:

    The layout of the control
  3. Add an event handler for the label Click event (the default event for a label) by double-clicking on the label.

  4. The clickcounter.h file is displayed in the editing area with an empty event handler method generated for you.

    NoteNote

    Close the Toolbox or Properties window if you need more room by clicking on their Close boxes or unpinning them so they auto-hide.

  5. Press Enter after the opening brace of the label1_Click method and type:

    int temp = System::Int32::Parse(label1->Text);
    temp++;
    label1->Text = temp.ToString();
    

    IntelliSense™ displays a list of valid choices after you type a scope resolution operator (::), dot operator (.) or arrow operator (->). You can highlight an item and press Tab or Enter or double-click an item to insert that item into your code.

    Also, when you type an opening parenthesis for a method, Visual Studio displays valid argument types for each overload of the method.

In this step, you define a custom property that allows an application developer to determine whether the number displayed on the control increments when the label is clicked or when any location on the control is clicked.

To add a custom property to a control

  1. Place the cursor after the colon of the first public scope indicator at the top of the clickcounterControl.h file, press Enter, then type the following:

    property bool ClickAnywhere {
        bool get() {
            return (label1->Dock == DockStyle::Fill);
        }
        void set(bool val) {
            if (val) 
                label1->Dock = DockStyle::Fill;
            else 
                label1->Dock = DockStyle::None;
        }
    }
    

    When the ClickAnywhere property of the control is set to true, the Dock property of the label is set to DockStyle::Fill, so the label fills the entire control surface. A click anywhere on the control surface will then cause a label Click event, incrementing the number on the label.

    When the ClickAnywhere property is false (the default), the Dock property of the label is set to DockStyle::None. The label does not fill the control, and a click on the control must be inside the label boundaries to cause a label Click event, incrementing the number.

  2. Build the User Control. On the Build menu, select Build Solution.

    If there are no errors, a Windows Forms control is generated with a file name of clickcounter.dll. You can locate this file in your project directory structure.

In this step, you create a Windows Forms application project where you will place instances of the clickcounter control on a form.

NoteNote

The Windows Forms application you create to test the control can be written with Visual C++ or another .NET language, such as C# or Visual Basic .NET.

To create a Windows Forms application project

  1. On the File menu, click New, and then click Project….

    You can also add a project to the solution by right-clicking on the controlandtestapp solution in Solution Explorer, pointing to Add, then clicking New Project….

  2. In the Project Types pane, select CLR in the Visual C++ node, then select Windows Forms Application in the Visual Studio installed templates pane.

    Type a name for the project, such as testapp.

    Be sure to select Add to Solution instead of accepting the default Create New Solution setting in the Solution drop-down list, then click OK.

  3. The Windows Forms Designer for the new project opens, showing a new form called Form1.

    A newly created form

To add a control to the Toolbox

  1. Add a reference to the control. On the Project menu, click References or right-click on the testapp project in Solution Explorer and click References.

    Click the Add New Reference button, then click the Projects tab (you are adding a reference to another project in this solution) and select the clickcounter project. Click OK twice.

  2. If the Toolbox window is not visible, click Toolbox on the View menu.

  3. Right-click on the Toolbox and click Choose Items.

    Click the Browse button and locate the clickcounter.dll file in your solution directory structure. Select it and click Open.

    The clickcounter control is shown in the.NET Framework Components list with a check mark. Click OK.

    The control appears in the Toolbox with the default "gear" icon.

In this step, you place two instances of the control on an application form and set their properties.

To place instances of a control on a form

  1. Drag two instances of the clickcounter control from the Toolbox. Place them on the form so they don't overlap.

    If you need to make the form wider, click on the form to select it and drag one of the selection handles outward.

  2. If the Properties window is not visible, click Properties on the View menu.

    The ClickAnywhere property is in the Misc. section of the Property Window if properties are organized by category.

  3. Click one instance of the clickcounter control on the form to select it, then set its ClickAnywhere property to true.

  4. Leave the ClickAnywhere property of the other instance of the clickcounter control set to false (the default).

  5. Right-click on the testapp project in Solution Explorer and select Set As StartUp Project.

  6. On the Build menu, click Rebuild Solution.

    You should see that the two projects built with no errors.

In this step, you run the application, and click on the controls to test them.

To place instances of a control on a form

  1. On the Debug menu, click Start Debugging.

    The form appears with the two instances of the control visible.

  2. Run the application and click on both clickcounter controls:

    • Click on the control with ClickAnywhere set to true.

      The number on the label increments when you click anywhere on the control.

    • Click on the control with ClickAnywhere set to false.

      The number on the label increments only when you click within the visible boundary of the label.

Test application showing the controls
  1. Close the test application by clicking its Close box in the upper right corner of the Form1 window.

Community Additions

ADD
Show:
© 2014 Microsoft