Home

Windows Controls: The Up-Down Control

 

Introduction to the Up-Down Control

 

Description

Besides the spin control, Microsoft Visual C++ ships with an ActiveX control that provides the same functionality. To use this object, you can add it from the Insert ActiveX Control dialog box and it is named Microsoft UpDown Control. If there are two versions provided, you should select the latest, which usually has a higher version number.

The Microsoft UpDown control is simply a spin control but with true visual accessibility and rapid application development (RAD) concept. Like the spin control, it is equipped with two buttons. Each button has a small picture (a bitmap) that displays an arrow.

The application we are about to develop is for a CD publishing small business. This company manufactures compact discs for self-promoting musicians and small business that want to sell their own CDs. When taking an order of a new CD, the company charges:

  • $20/CD if the customer is ordering less than 20 units
  • $15/CD if the customer is ordering up to 50 units
  • $12/CD if the customer is ordering up to 100 units
  • $8/CD if the customer is ordering up to 500 units
  • $5/CD for any order over 500 units

Practical LearningPractical Learning: Introducing Up-Down Controls

  1. To start a new application, on the main menu, click File -> New Project...
  2. In the middle, click MFC Application and set the name to CDDVDPublisher
  3. Click OK
  4. In the first page of the wizard, click Next
  5. In the second page of the wizard, click Dialog-Based
  6. Click Next
  7. In the third page of the wizard, change the title to CD/DVD Publisher
  8. Click Finish
  9. On the dialog box, click TODO and press Delete
  10. Click OK and press Delete
  11. Click Cancel
  12. In the Properties window, click Caption and type Close
  13. Design the dialog box as follows:
     
    CD - DVD Publisher
     
    Control Align Text Caption ID
    Static Text Static Text   Number of CDs/DVDs:  
    Edit Box Edit Control Right   IDC_QUANTITY
    Static Text Static Text   Unit Price:  
    Edit Box Edit Control Right   IDC_UNIT_PRICE
    Static Text Static Text   Total Price:  
    Edit Box Edit Control Right   IDC_TOTAL_PRICE
    Button Button   Close IDCANCEL
  14. Right-click each edit control and click Add Variable...
  15. Add the member variables as follows:
     
    ID
    Category Type Name
    IDC_QUANTITY Value int m_Quantity
    IDC_UNIT_PRICE Value double m_UnitPrice
    IDC_TOTAL_PRICE Value double m_TotalPrice
  16. In the Solution Explorer, double-click CCDDVDPublisherDlg.cpp
  17. In the constructor, initialize the edit boxes as follows:
    CCDDVDPublisherDlg::CCDDVDPublisherDlg(CWnd* pParent /*=NULL*/)
        : CDialogEx(CCDDVDPublisherDlg::IDD, pParent),
          m_Quantity(1),
          m_UnitPrice(20.00),
          m_TotalPrice(20.00)
    {
        m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME);
    }
  18. Display the dialog box

Using an Up-Down Control

To provide an up-down control to your application, display the Insert ActiveX Control dialog box, select Microsoft UpDown Control 6.0 and click OK. If you plan to refer to the control in your code, you can add a variable for it. When you do this, Microsoft Visual C++ would create and even implement its class, giving all of its code (its header and source files). You can then find out that the up-down control is based on the CUpDown class which itself is based on CWnd, making it convenient to use CWnd properties and member functions.

Practical LearningPractical Learning: Adding an Up-Down Control

  1. Right-click in the middle of the dialog box and click Insert ActiveX Control...
  2. In the list, click Microsoft UpDown Control 6.0 (SP4) (or another version)
     
    Insert ActiveX Control
  3. Click OK
  4. Move the up-down control to the right of the Number of CDs/DVDs edit control
  5. Add a picture control to the dialog box
  6. Complete the design of the dialog box as follows:
     
    CD - DVD Publisher
     
    Control Color ID Modal Frame
    Picture Control Picture Control Etched   True
    UpDown     IDC_SET_QUANTITY  
  7. Right-click the up-down control and click Add Variable...
  8. Set the Variable Name to m_SetQuantity
  9. Click Finish

Characteristics of the Up-Down Control

 

Introduction

Like the spin control, the up-down control cannot display its value to the user. If you want an accompanying control to play that role, you should place the new up-down control next to a text-based control such as an edit box. You have the option of positioning the up-down control to the left or the right side of its buddy control.

The Orientation of an Up-Down Control

After placing the up-down control on the parent window, by default, its arrow buttons point up and down. If you want the arrows to point left and right, change the value of the Orientation property.

The Minimum and Maximum Values

To make the up-down control easier to configure, you can set its range value visually. The minimum value is set using the Min edit box the maximum value is set on the Max edit box. To programmatically change the minimum value, call the SetMin() member function. In the same way, the maximum value can be changed by calling the SetMax() member function. Here is an example:

void CDlgSpin::OnConfigureUpDown()
{
    // TODO: Add your control notification handler code here
    m_UpDown.SetMin(12);
    m_UpDown.SetMax(250);
}

To get the minimum value of an up-down control, call the GetMin() member function. To get the maximum value of an up-down control, call the GetMax() member function.

After setting the minimum and the maximum values, you can specify the initial value the up-down control would hold when the application comes up. This value is set using the Value edit box and it must be in the range (Min, Max). To change the value with code, call the SetValue() member function and pass it the desired but valid value. Here is an example:

void CDlgSpin:: OnConfigureUpDown()
{
    // TODO: Add your control notification handler code here
    m_UpDown.SetMin(12);
    m_UpDown.SetMax(250);

    m_UpDown.SetValue(88);
}

To get the value of an up-down control, call its GetValue() member function.

 
 
 

Practical LearningPractical Learning: Setting the Minimum and Maximum

  1. On the dialog box, click the up-down control
  2. In the Properties window, change the following values
    Min: 1
    Max: 5000

The Increment Value

When using the up-down control by clicking one of its buttons, its value increases or decreases by one. If you want a different incremental value, specify it using the Increment edit box. To programmatically set an incremental value, call the SetIncrement() member function. Here is an example:

void CDlgSpin:: OnConfigureUpDown()
{
    // TODO: Add your control notification handler code here
    m_UpDown.SetMin(12);
    m_UpDown.SetMax(250);

    m_UpDown.SetValue(88);

    m_UpDown.SetIncrement(5);
}

To know what increment value an UpDown control is using, call its GetIncrement() member function.

The Up-Down Control Events

The up-down control makes an object distinction between its button components. For example, when the user clicks the up pointing arrow button, the control fires the UpClick() event. On the other hand, when the user clicks the down pointing arrow button, the control sends a DownClick() event. These allow you to treat each event separately if you want.

If you are more interested in the value of the up-down control, when the user clicks either of its buttons, the value of the control changes. Once the value of the control has been modified, it fires a Change() event.

The up-down control provides bonus events related to the mouse. When the mouse arrives to passes over this control, the MouseMove() event is fired. If the user presses a mouse button on the control. It fires the MouseDown() event. When the user releases the mouse button, the MouseUp() event is fired.

Practical LearningPractical Learning: Configuring an Up-Down Control

  1. On the dialog box, click the up-down control
  2. On the Properties window, click the Events button
  3. Click Change, then click the arrow of the Change combo box and select <Add> ChangeSetQuantity
  4. Implement the event as follows:
    void CCDPublisherDlg::ChangeSetQuantity()
    {
        // TODO: Add your message handler code here
        int Quantity;
        double UnitPrice, TotalPrice;
    
        Quantity = m_SetQuantity.get_Value();
    
        if( Quantity < 20 )
    		UnitPrice = 20;
        else if( Quantity < 50 )
    		UnitPrice = 15;
        else if( Quantity < 100 )
    		UnitPrice = 12;
        else if( Quantity < 500 )
    		UnitPrice = 8;
        else
    		UnitPrice = 5;
    
        TotalPrice = Quantity * UnitPrice;
    
        m_Quantity = Quantity;
        m_UnitPrice = UnitPrice;
        m_TotalPrice = TotalPrice;
    
        UpdateData(FALSE);
    }
  5. To test the application, press F5
     
    CD - DVD Publisher
     
    CD - DVD Publisher
     
    CD - DVD Publisher
     
    CD - DVD Publisher
  6. Close the dialog box and return to your programming environment
 
 
   
 

Home Copyright © 2010-2011 FunctionX, Inc.