Home

Track-Based Controls

 

The UpDown Control

 

Overview

A spin button, also called UpDown, is a Windows control equipped with two opposite arrow buttons or . The user clicks one of the arrow buttons at one time to increase or decrease the current value of the control. The value held by the control is also called its position.

The values of a spin button range from a minimum to a maximum. When the up or right arrow is clicked, the value of the control increases. If the user clicks and holds the mouse on the up or right pointing pointing arrow button, the value of the control keeps increasing until it reaches its maximum and then stops. The opposite behavior applies when the user clicks or holds the mouse on the down or left-pointing arrow button.

Because a spin button is only equipped with arrows, it does not inherently show its value. Therefore, this control is usually accompanied by another, text-based, control, usually an edit box, that indicates its position .

Practical Learning Practical Learning: Introducing UpDown Buttons

Pledge Distribution


Characteristics of an UpDown Control

To create an UpDown button, you can use the UpDown control from the Win32 tab of the Tool Palette. Although not required, this control should be accompanied by another object that would display the current value of the updown control. The most commonly used accompanying object is an edit control but you can use any control you judge appropriate.

After adding the UpDown control on a container such as a form, use the Object Inspector to control its properties. The most usual way to add the Edit control is to position it on the left side of the UpDown button If using an edit box or a label, the accompanying control is usually positioned to the left of the updown object:

The UpDown control appears with two arrow buttons pointing up and down, respectively. This feature is controlled by the Orientation property. An alternative is to point the arrows to left and right. To do this, use the Orientation property to set the arrows to your liking.

Probably the most important piece of information you would need from an updown control is the value it is holding at a particular time. As mentioned already, the updown control navigates from a minimum to a maximum values. The values of the control are short integer numbers. These numbers range from a minimum controlled by the Min property to a maximum value controlled by the Max property. By default, a freshly added UpDown control on a form has its Min and Max values set to 0 and 100 respectively. You can set the minimum value of the control to –32768 and the maximum to 32767. These values are set using the Min and Max fields of the Object Inspector. You can change them programmatically as follows:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	UpDown1->Min = -224;
	UpDown1->Max = -1;
}
//---------------------------------------------------------------------------

If you use numbers in the thousands, the control that accompanies the UpDown (such as the edit control) will display the values using the comma to separate the thousands. This is because the UpDown control is configured, by default, to separate the thousands. If you do not want this feature, change the value of the Thousands property from true to false.

When using the UpDown button, the user clicks one of the arrows of the control to increase or decrease the value. By default, the value increases or decreases by 1. If you want the value to augment by more than 1, set an integer value using the Increment property. To set the Increment value programmatically, you can use code as follows:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	UpDown1->Max = 125;
	UpDown1->Min = 10;
	UpDown1->Increment = 5;
}
//---------------------------------------------------------------------------

When an UpDown control is accessed, the value it holds can be set by its Position. You can use this property to specify what value the control would use at startup. It should be an integer between the Min and the Max values. You can also set it programmatically as follows:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	UpDown1->Max = 125;
	UpDown1->Min = 10;
	UpDown1->Increment = 5;
	UpDown1->Position = 55;
}
//---------------------------------------------------------------------------

The Position property also allows you to find out the value of the UpDown control at any time. After setting the Increment value, when the user clicks the arrow buttons, the value would increase accordingly. When the maximum value is reached, the control would use the Wrap property to find out what to do:

  • If the Wrap Boolean property is set to false (the default), the increment would stop at the Max value even if Max is not divisible by the Increment value. The same goes for the Min value
  • If the Wrap property is set to true and if the user increases the value of the control, the incrementing would stop to the last value divisible by the Increment value but less than the Max. The same would apply when decrementing the value of the control.

As mentioned already, an updown control does not visually display its value. Therefore, you can add a text-based or other control to it. This accompanying object is specified using the Associate property. The associated control would display the current value of the UpDown control. To associate a control to the UpDown control, first create or add the desired control to your application. Then, at design time on the Object Inspector, you can click the Associate field to display its combo box. Click the arrow and select the desired control. You can also associate a control programmatically using code such as this:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	UpDown1->Associate = Edit1;
}
//---------------------------------------------------------------------------

The UpDown control usually has its associated control on the left side. This is controlled by the AlignButton property. Alternatively, you can ask it to have the accompanying control on its right side by setting the AlignButton property to udRight. At design time, both controls still display as they are designed. If you change the AlignButton value, the control would apply the value only at runtime.

One of the nicest features that make the UpDown button easy to use is that the user can change its values by pressing the up and down arrow keys of the keyboard. This ability is by default set to true from the Boolean ArrowKeys property. If you want to prevent the user from using the keyboard to increase or decrease the value of the UpDown control, set the ArrowKeys property to false.

Practical Learning Practical Learning: Designing an UpDown control

  1. Start a new project
  2. Save it in a new folder named Pledge1
  3. Save the (first) unit as Exercise
  4. Save the project as Pledge1
  5. Design the form as follows:
     
    Control Text/Caption Name Additional Properties
    Form     BorderIcons: [biSystemMenu,biMinimize,biMaximize]
    BorderStyle: bsDialog
    Label Amount Pledged:    
    Edit 0.00 edtAmountPledged  
    Label Rotherham College:    
    Edit 0 edtRate1  
    UpDown 50 updAmount1 Associate: edtRate1
    Label %    
    Edit 0.00 edtAmount1  
    Label Leicester University:    
    Edit 0 edtRate2  
    UpDown 25 updAmount2 Associate: edtRate2
    Label %    
    Edit 0.00 edtAmount2  
    Label Lars Union Academy:    
    Edit 0 edtRate3  
    UpDown 25 updAmount3  
    Label %    
    TextBox 0.00 edtAmount3  
    Label Message lblMessage  
    BitBtn     Kind: bkClose
  6. Save all

The UpDown Control Methods

The UpDown control is based on the TUpDown class. This class has only two methods: a constructor and a destructor. The TUpDown constructor is used to dynamically create an UpDown button. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	TUpDown *Counter = new TUpDown(this);
	Counter->Parent = this;
	TEdit *Displayer = new TEdit(this);
	Displayer->Parent = this;
	Displayer->Left = 16;
	Displayer->Top = 16;
	Displayer->Width = 32;
	Counter->Left = Displayer->Left + Displayer->Width;
	Counter->Top = Displayer->Top;
	Counter->Min = 12;
	Counter->Max = 248;
	Counter->Increment = 2;
	Counter->Position = 36;
	Counter->Associate = Displayer;
}
//---------------------------------------------------------------------------

The UpDown Control Events

The main event of the UpDown control occurs when the user clicks one of the arrows. Whether the user clicks the up pointing arrow to increase or the down pointing arrow to decrease the value or position of the control, the OnClick() event is fired. The pointing arrows are represented using the TUDBtnType enumerator that has two values. The up or right pointing arrow is recognized as btNext while the down or left pointing arrow is referred to as btPrev.

When the user clicks one of the arrows, you can write code to perform an action depending on the button that was clicked. Using this OnClick() event, you do not have to associate the UpDown control with an edit box to display integers; you can use the event to format the value or configure any other behavior you see fit. For example, instead of displaying an integer, you can display a floating number, a string, anything, that is traditionally not allowed.

When the user clicks one of the arrows of the UpDown control, the operating system is notified just before this action occurs. This notification is done through the OnChanging() event. This allows you to perform a last minute configuration before the value or position of the control changes. You can also use this event to deny changing the value of the control.

The OnChangingEx() event also fires just before the value of the UpDown control changes. This time, you can set a new value for the control if the change is successful.

It is important and professionally convenient to make sure that the user can use the up and down arrow keys of the keyboard to increase or decrease the value of the UpDown control. If the user presses and holds the up arrow key, the UpDown control would be incrementing its value until either the user releases the key or the control reaches its maximum limit. Here is an example of how to track the OnMouseUp mouse event of the UpDown control:

//---------------------------------------------------------------------------
void __fastcall TForm1::UpDown1MouseUp(TObject *Sender, TMouseButton Button,
				       TShiftState Shift, int X, int Y)
{
	ShowMessage("You stopped spinning at " + AnsiString(edtSpin->Text));
}
//---------------------------------------------------------------------------

Practical Learning Practical Learning: Configuring an UpDown control

  1. Double-click each up down control and the Amount Pledged edit box
  2. Implement the events as follows:
     
    //---------------------------------------------------------------------------
    
    #include <vcl.h>
    #pragma hdrstop
    
    #include "Exercise.h"
    //---------------------------------------------------------------------------
    #pragma package(smart_init)
    #pragma resource "*.dfm"
    TForm1 *Form1;
    //---------------------------------------------------------------------------
    __fastcall TForm1::TForm1(TComponent* Owner)
        : TForm(Owner)
    {
    }
    //---------------------------------------------------------------------------
    void __fastcall TForm1::updAmount1Click(TObject *Sender, TUDBtnType Button)
    {
        double AmountPledged,
                    RateAmount1, RateAmount2, RateAmount3,
                    Amount1, Amount2, Amount3,
                    Rest;
    
         AmountPledged = this->edtAmountPledged->Text.ToDouble();
    
         RateAmount2 = static_cast<double>(this->updAmount2->Position);
         RateAmount3 = static_cast<double>(this->updAmount3->Position);
         this->updAmount1->Max = 100 - RateAmount2 - RateAmount3;
         RateAmount1 = static_cast<double>(this->updAmount1->Position);
    
    	 Amount1 = AmountPledged * RateAmount1 / 100;
    	 Amount2 = AmountPledged * RateAmount2 / 100;
    	 Amount3 = AmountPledged * RateAmount3 / 100;
    	 Rest = AmountPledged - Amount1 - Amount2 - Amount3;
    
    	 this->edtAmount1->Text = FloatToStrF(Amount1, ffCurrency, 8, 2);
    	 this->edtAmount2->Text = FloatToStrF(Amount2, ffCurrency, 8, 2);
    	 this->edtAmount3->Text = FloatToStrF(Amount3, ffCurrency, 8, 2);
    
    	 if( Rest > 0 )
         	 this->lblMessage->Caption = FloatToStrF(Rest, 
    						 ffCurrency, 8, 2) + 
    						 " still to be used";
    	 else
    	 	 this->lblMessage->Caption = "";
    }
    //---------------------------------------------------------------------------
    void __fastcall TForm1::updAmount2Click(TObject *Sender, TUDBtnType Button)
    {
        double AmountPledged,
               RateAmount1, RateAmount2, RateAmount3,
    		   Amount1, Amount2, Amount3,
    		   Rest;
    
        AmountPledged = this->edtAmountPledged->Text.ToDouble();
    
    	RateAmount1 = static_cast<double>(this->updAmount1->Position);
    	RateAmount3 = static_cast<double>(this->updAmount3->Position);
    	this->updAmount2->Max = 100 - RateAmount1 - RateAmount3;
    	RateAmount2 = static_cast<double>(this->updAmount2->Position);
    
        Amount1 = AmountPledged * RateAmount1 / 100;
    	Amount2 = AmountPledged * RateAmount2 / 100;
    	Amount3 = AmountPledged * RateAmount3 / 100;
    	Rest = AmountPledged - Amount1 - Amount2 - Amount3;
    
    	this->edtAmount1->Text = FloatToStrF(Amount1, ffCurrency, 8, 2);
    	this->edtAmount2->Text = FloatToStrF(Amount2, ffCurrency, 8, 2);
    	this->edtAmount3->Text = FloatToStrF(Amount3, ffCurrency, 8, 2);
    
    	if( Rest > 0 )
    	    this->lblMessage->Caption = FloatToStrF(Rest,
    					        ffCurrency, 8, 2) + 
    						" still to be used";
        else
    	    this->lblMessage->Caption = "";
    }
    //---------------------------------------------------------------------------
    void __fastcall TForm1::updAmount3Click(TObject *Sender, TUDBtnType Button)
    {
        double AmountPledged,
    	RateAmount1, RateAmount2, RateAmount3,
    	Amount1, Amount2, Amount3,
    	Rest;
    
        AmountPledged = this->edtAmountPledged->Text.ToDouble();
    
        RateAmount1 = static_cast<double>(this->updAmount1->Position);
        RateAmount2 = static_cast<double>(this->updAmount2->Position);
        this->updAmount3->Max = 100 - RateAmount1 - RateAmount2;
        RateAmount3 = static_cast<double>(this->updAmount3->Position);
    
        Amount1 = AmountPledged * RateAmount1 / 100;
        Amount2 = AmountPledged * RateAmount2 / 100;
        Amount3 = AmountPledged * RateAmount3 / 100;
        Rest = AmountPledged - Amount1 - Amount2 - Amount3;
    
        this->edtAmount1->Text = FloatToStrF(Amount1, ffCurrency, 8, 2);
        this->edtAmount2->Text = FloatToStrF(Amount2, ffCurrency, 8, 2);
        this->edtAmount3->Text = FloatToStrF(Amount3, ffCurrency, 8, 2);
    
        if( Rest > 0 )
            this->lblMessage->Caption = FloatToStrF(Rest, 
    						ffCurrency, 8, 2), 
    						" still to be used";
        else
            this->lblMessage->Caption = "";
    }
    //---------------------------------------------------------------------------
    void __fastcall TForm1::edtAmountPledgedChange(TObject *Sender)
    {
        if( this->edtAmountPledged->Text == "" )
        {
            this->updAmount1->Enabled = false;
            this->updAmount2->Enabled = false;
            this->updAmount3->Enabled = false;
        }
        else
        {
            this->updAmount1->Enabled = true;
            this->updAmount2->Enabled = true;
            this->updAmount3->Enabled = true;
        }
    }
    //---------------------------------------------------------------------------
  3. Test the application
     
  4. Close the form and return to your programming environment

The Spin Button

 

Characteristics of a Spin Button

The Spin button is a Windows control used to increase and decrease values by clicking an up or a down buttons. Visually the spin button resembles the UpDown control. There have some differences with regard to their respective configuration.

To add a spin button to your application, use the CSpinButton from the Samples tab of the Tool Palette. You can place the control on a form or any other container.

Two of the properties that differentiate the CSpinButton from the UpDown controls is that the CSpinButton control allows you to add your own button indicators as bitmaps. To specify which bitmap must point up on the control, click the ellipsis button on the UpGlyph field of the Object Inspector. You can also specify a bitmap that would point down using the DownGlyph property:

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 Learning Practical Learning: Introducing the Spin Button

  1. Start a new project with its default form
  2. Save it in a new folder named CDPublisher1
  3. Save the unit as Exercise and save the project as CDPublisher
  4. Change the Caption of the form Compact Disc Publisher
  5. Change its Name to frmMain and set its BorderStyle to bsDialog
  6. Design the form by adding the following controls:
     
    Control Caption/Text Name
    Bevel     
    Label Number of Items:  
    Edit 0 edtQuantity
    Label Unit Price:  
    Edit 20.00 edtUnitPrice
    Label Total Price:  
    Edit 0.00 EdtTotal
    Button Kind = bkClose  
  7. Save all

The Spin Button Methods

The spin button is equipped with a constructor and a destructor. The TCSpinButton class’ constructor is typically used to dynamically create a spin button. To do that, declare a pointer to a TCSpinButton class, specifying the owner of the control and its parent. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TCSpinButton *LetMe = new TCSpinButton(Form1);
	LetMe->Parent = Form1;
}
//---------------------------------------------------------------------------

The Spin Button Events

The biggest difference between an UpDown control and a spin button is the way each handles the incrementing and decrementing of its values. Simply put, the spin button does not have a value to the sense of a progress control; you must set, assign, and configure the value or position of the spin button on your own. While the main event of an UpDown control occurs when the user clicks one of its arrows, to apply a specific behavior, you can either consider the whole event or find out what button was clicked. The spin button uses two different events for each button. Clicking the up pointing arrow fires the OnUpClick() event while the OnDownClick event fires when the user clicks the down pointing arrow.

Practical Learning Practical Learning: Using the Spin Button

  1. On the Tool Palette, click the Samples tab
  2. Click CSpinButton and flick on right side of the Number of Items edit box on the form
  3. On the Object Inspector, change its name to spnQuantity
  4. Display the header file of the form. In the private section of the header file, declare a Value variable of type int. Also, declare a method named EvaluatePrice() of type void that uses __fastcall:
     
    private:
    	int Value;
    	void __fastcall EvaluatePrice(); // User declarations
  5. In the form’s source file, initialize the value to 0 and implement the new method as follows:
     
    //---------------------------------------------------------------------------
    __fastcall TfrmMain::TfrmMain(TComponent* Owner)
    : TForm(Owner)
    {
    	Value = 0;
    }
    //---------------------------------------------------------------------------
    void __fastcall TfrmMain::EvaluatePrice()
    {
    	int Quantity;
    	double UnitPrice, TotalPrice;
    
    	Quantity = edtQuantity->Text.ToInt();
    
    	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;
    
    edtUnitPrice->Text = edtUnitPrice->Text.FormatFloat("#,##0.00", UnitPrice);
    edtTotal->Text = edtTotal->Text.FormatFloat("#,##0.00", TotalPrice);
    }
    //---------------------------------------------------------------------------
  6. On the form, click the SpinButton control to select it. On the Object Inspector, click the Events tab
  7. Double-click the empty field on the right side of OnUpClick and implement the event as follows:
     
    //---------------------------------------------------------------------------
    void __fastcall TfrmMain::spnQuantityUpClick(TObject *Sender)
    {
    	edtQuantity->Text = Value++;
    	EvaluatePrice();
    }
    //---------------------------------------------------------------------------
  8. On the Object Inspector, double-click the field of the OnDownClick event and implement it as follows:
     
    //---------------------------------------------------------------------------
    void __fastcall TfrmMain::spnQuantityDownClick(TObject *Sender)
    {
    	if( Value > 0 )
    		edtQuantity->Text = Value--;
    	else
    		edtQuantity->Text = 0;
    
    	EvaluatePrice();
    }
    //---------------------------------------------------------------------------
  9. To test the form, on the main menu, click Run -> Run

  10. After experimenting with the spin button, close the form

The Spin Edit Control

 

Introduction

Without a doubt, the SpinEdit control is the easiest spin control of the three sets of UpDown controls. There is hardly any configuration to do.

To add a SpinEdit to your application, from the Samples tab of the Tool Palette, click the CSpinEdit button and click in the desired location on the form.

Characteristics of the SpinEdit Control

The CSpinEdit control is used to display integer values in the edit box section of the control. The displaying value is controlled by the MinValue and the MaxValue properties that can be set in the Object Inspector. You can also specify their values programmatically as follows:

//---------------------------------------------------------------------------
void __fastcall TForm1::FormCreate(TObject *Sender)
{
	CSpinEdit1->MinValue = -12;
	CSpinEdit1->MaxValue = 228;
}
//---------------------------------------------------------------------------

By default, the values of a SpinEdit control increase by 1 and decrease by –1. If that value is not appropriate for your application, you can change it using the Increment property in the Object inspector.

When a SpinEdit control appears at startup, the control displays the value 0 even if its MinValue is set to a value other than 0. To set the default position of the SpinEdit control, use the Value property. You can control it at design time or at runtime. If you set the Value property to a value that is less than the MinValue, the value would be automatically set to the minimum value. If you try to set it to a value greater than the MaxValue in the Object Inspector, the Value would be reset to the MaxValue.

The Spin Edit Methods

Like all VCL controls, the CSpinEdit object has a constructor and a destructor, based on the TCSpinEdit class. The constructor is typically used to dynamically create the control at runtime. To do this, declare a pointer to a TCSpinEdit class. You must specify the owner and the parent of the control. You can create such a control in an event or a function. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TCSpinEdit* Staple = new TCSpinEdit(this);
	Staple->Parent = this;
}
//---------------------------------------------------------------------------

You must include the CSPIN.h header file to the form or unit that would be using the Spin Edit control.

Track Bars

 

Introduction

A track bar is a Windows control used to slide a small bar or pointer, also called a thumb, along a continuous line. The following dialog box displays two track bars, each between a Low and a High labels:

To use the track bar, the user can drag the thumb in one of two directions. This changes the position of the thumb. The user can also click a position along the control line to place the thumb at a desired location. Alternatively, when the track bar has focus, the user can use the arrow keys to move the thumb.

As far as positions are concerned, there are two types of track bars, depending on the orientation: horizontal or vertical:

A track bar is configured with a set of values from a minimum to a maximum. Therefore, the user can make a selection included in that range. Optionally, a track bar can be equipped with small marks called ticks. These can visually guide the user for the available positions of the thumb. A track bar can be used as a progress control to help the user monitor an activity. A track bar also allows the user to specify a value that conforms to a range. When equipped with small indicators, also called ticks, a track bar can be used to control exact values that the user can select in a range, preventing the user from setting just any value.

Practical Learning Practical Learning: Introducing Track Bars

  1. Start a new project with its default form
  2. Save it in a new folder named CarInventory1
  3. Save the unit as Exercise and save the project as CarInv
  4. Open Image Editor and design 32 x 32 pixels icon and its 16 x 16 associated icon as follows:
     
  5. Save the icon as CarInvent
  6. Using the Project Options dialog box, set the Title to Car Inventory and set the icon as the above
  7. Change the name of the form to frmMain and change its caption to Car Inventory
  8. Also change its BorderStyle to bsDialog
  9. From the resources that accompany this book, copy the following files from the Pictures folder to the folder of the current project: Civic, Elantra, Escort, Focus, GdMarquis, E350, Navigator, Sentra, and Rio
  10. In the header file of the form, create a structure named TCarInventory and declare its array variable named Car that contains 10 items. Also declare:
     
    //---------------------------------------------------------------------------
    struct TCarInventory
    {
    	AnsiString Make;
    	AnsiString Model;
    	unsigned int CarYear;
    	unsigned int Doors;
    	Graphics::TBitmap *CarPicture;
    };
    //---------------------------------------------------------------------------
    class TfrmMain : public TForm
    {
    __published: // IDE-managed Components
    private:
    	TCarInventory Car[10]; // User declarations
    public: // User declarations
    	__fastcall TfrmMain(TComponent* Owner);
    };
    //---------------------------------------------------------------------------
    extern PACKAGE TfrmMain *frmMain;
    //---------------------------------------------------------------------------
    #endif
  11. In the constructor of the form, initialize the array as follows:
      
    //---------------------------------------------------------------------------
    __fastcall TfrmMain::TfrmMain(TComponent* Owner)
    	: TForm(Owner)
    {
    	Car[0].Make = "Honda"; Car[0].Model = "Civic";
    	Car[0].CarYear = 1998; Car[0].Doors = 4;
    	Car[0].CarPicture = new Graphics::TBitmap;
    	Car[0].CarPicture->LoadFromFile("Civic.bmp");
    
    	Car[1].Make = "Nissan"; Car[1].Model = "Sentra";
    	Car[1].CarYear = 1997; Car[1].Doors = 4;
    	Car[1].CarPicture = new Graphics::TBitmap;
    	Car[1].CarPicture->LoadFromFile("Sentra.bmp");
    
    	Car[2].Make = "Ford"; Car[2].Model = "Focus";
    	Car[2].CarYear = 2002; Car[2].Doors = 4;
    	Car[2].CarPicture = new Graphics::TBitmap;
    	Car[2].CarPicture->LoadFromFile("Focus.bmp");
    
    	Car[3].Make = "Mercury"; Car[3].Model = "Grand Marquis";
    	Car[3].CarYear = 2000; Car[3].Doors = 4;
    	Car[3].CarPicture = new Graphics::TBitmap;
    	Car[3].CarPicture->LoadFromFile("GdMarquis.bmp");
    
    	Car[4].Make = "Kia"; Car[4].Model = "Rio";
    	Car[4].CarYear = 1997; Car[4].Doors = 4;
    	Car[4].CarPicture = new Graphics::TBitmap;
    	Car[4].CarPicture->LoadFromFile("Rio.bmp");
    
    	Car[5].Make = "Ford"; Car[5].Model = "E350";
    	Car[5].CarYear = 2000; Car[5].Doors = 5;
    	Car[5].CarPicture = new Graphics::TBitmap;
    	Car[5].CarPicture->LoadFromFile("E350.bmp");
    
    	Car[6].Make = "Ford"; Car[6].Model = "Escort";
    	Car[6].CarYear = 2002; Car[6].Doors = 4;
    	Car[6].CarPicture = new Graphics::TBitmap;
    	Car[6].CarPicture->LoadFromFile("Escort.bmp");
    
    	Car[7].Make = "Hyundai"; Car[7].Model = "Elantra";
    	Car[7].CarYear = 1999; Car[7].Doors = 4;
    	Car[7].CarPicture = new Graphics::TBitmap;
    	Car[7].CarPicture->LoadFromFile("Elantra.bmp");
    
    	Car[8].Make = "Ford"; Car[8].Model = "Escape";
    	Car[8].CarYear = 2003; Car[8].Doors = 4;
    	Car[8].CarPicture = new Graphics::TBitmap;
    	Car[8].CarPicture->LoadFromFile("Escape.bmp");
    
    	Car[9].Make = "Lincoln"; Car[9].Model = "Navigator";
    	Car[9].CarYear = 2000; Car[9].Doors = 5;
    	Car[9].CarPicture = new Graphics::TBitmap;
    	Car[9].CarPicture->LoadFromFile("Navigator.bmp");
    }
    //---------------------------------------------------------------------------
  12. Design the form by adding the following controls
    Refer to the text in the edit controls for their name
    Add an Image control. Set its Center property to true. Set its Transparent property to true
    Add a BitBtn control and set its Kind to bkClose

  13. Save All

Characteristics of a Track Bar

To add a trackbar to a form, from the Win32 tab of the Tool Palette, double-click the TrackBar button .

After placing a TrackBar control on a form or other container, by default, its assumes a horizontal position. The position of the trackbar is controlled by Orientation property implemented through the TTrackBarOrientation enumerator:

enum TTrackBarOrientation { trHorizontal, trVertical };

To change the direction of the control, on the Object Inspector, set the Orientation property to the desired value. For example, to make it vertical, change the field from trHorizontal to trVertical. To change this property at runtime, assign the desired value to the property. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TrackBar1->Orientation = trVertical;
}
//---------------------------------------------------------------------------

The Min property controls the minimum positional value of the control while the Max value controls the opposite. The user is allowed to slide only between these two values. These two properties are set in Object Inspector using their respective fields. By default, the minimum value is set to 0 and the maximum is 10. As integers, the lowest minimum allowed is INT_MIN which is –2147483647. The maximum allowed value is INT_MAX which is 2147483647. To change the minimum or maximum values programmatically, assign the desired value to the appropriate property. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TrackBar1->Min = -1205;
	TrackBar1->Max = -540;
}
//---------------------------------------------------------------------------

Always make sure that the minimum value is lower than the maximum. This safe measure will allow you to better control the current value of the control. At design time, if you try inversing the values, C++ Builder would reset them. For example, if the Min field is 12 and you try setting it to 48 when the Max field is 25, the Min field would be reset to its original value 12. At runtime, if you try setting wrong values as follows:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TrackBar1->Min = 55;
	TrackBar1->Max = 12;
}
//---------------------------------------------------------------------------

The minimum would be set to the previous minimum value the property had and the new maximum value would be kept. If you do not know for sure which value would be greater due to an intermediary action of the user, you can write a conditional statement that would control the minimum and the maximum values.

When using the track bar, the user can slide the thumb in the desired direction, thus changing the value of the control. While it is moving, you can control the incrementing of the thumb. By default, the thumb advances or regresses by 1 unit each time it is scrolled. This unit is controlled by the Frequency property.

The thumb’s visual display appears as a small standing pentagon with two straight borders. Its size is set using the ThumbLength property; the smaller the value, the narrower the thumb. The visual appearance of the thumb is controlled by the SliderVisible property whose Boolean value is by default set to true. Therefore, if you wish to hide the thumb, set its SliderVisible property to false.

A track bar is also equipped with small bars “|” that serve as indicators of the position occupied by the slider. These bars are called ticks. By default, the tick marks are positioned on the same side the slider is pointing. This conditional position of the ticks is controlled by the value of TickMarks property set from the TTickMark enumerator:

enum TTickMark { tmBottomRight, tmTopLeft, tmBoth };

By default, when you add a new TrackBar control to a form, it is horizontally oriented, the slider points down, the tick marks are positioned under the sliding field. In this setting, the TickMarks property is set to tmBottomRight. To place the tick marks above the sliding field, change the value of the TickMarks property to tmTopLeft; this also has the effect of reversing the direction of the slider. As a third option, you can have the tick marks on both sides of the slider. To get this, set the TickMarks property to tmBoth. With this value, the thumb becomes a small rectangle (changing from its pentagon shape).

The sliding field of a track bar is a rectangle with a background. It stays white even as the user slides the thumb to change the control’s value.

Practical Learning Practical Learning:  Implementing a Track Bar

  1. On the Win32 tab of the Tool Palette, click the TrackBar button and click on the lower-left section of the form
  2. Set its properties as follows:
    Height: 40
    ThumbLength: 16
    TickMarks: tmBoth
     
  3. Save all

Track Bar Events

A track bar is important when you can get its value and use it in a transaction. The most fundamental operation you can do is to display its value in an edit or a label controls. When the value of the track bar changes, we will use its OnChange() event to track its position and display its value on a label.

Practical Learning Practical Learning:  Using Track Bar Events

  1. On the form, double-click the track bar to access its OnChange event
  2. Implement it as follows:
     
    //---------------------------------------------------------------------------
    void __fastcall TfrmMain::TrackBar1Change(TObject *Sender)
    {
    	int CurPos = TrackBar1->Position - 1;
    
    	edtMake->Text = Car[CurPos].Make;
    	edtModel->Text = Car[CurPos].Model;
    	edtYear->Text = IntToStr(Car[CurPos].CarYear);
    	edtDoors->Text = IntToStr(Car[CurPos].Doors);
    
    	Image1->Picture->Bitmap = Car[CurPos].CarPicture;
    }
    //---------------------------------------------------------------------------
  3. On the form, double-click an unoccupied area to access its OnCreate event and implement it as follows:
     
    //---------------------------------------------------------------------------
    void __fastcall TfrmMain::FormCreate(TObject *Sender)
    {
    	edtMake->Text = Car[0].Make;
    	edtModel->Text = Car[0].Model;
    	edtYear->Text = IntToStr(Car[0].CarYear);
    	edtDoors->Text = IntToStr(Car[0].Doors);
    
    	Image1->Picture->Bitmap = Car[0].CarPicture;
    }
    //---------------------------------------------------------------------------
  4. Test the application
     
  5. Close it and return to Borland C++ Builder
  6. Save All

 

Previous Copyright © 2005-2007 Yevol Next