Home

Example Application: Car Inventory

 

Car Inventory

Introduction

This application explores the characteristics of a track bar, also called a slider control. It uses a class that holds various pieces of information about cars. One of the track bars allows the user to navigate from one car to another. When the position of that track bar changes, the compiler refers to an array of car to locate the object to display. When this happens, the default picture of the car also displays.

A vertical track bar allows the user to show other pictures of a car, in case other pictures are available.

Windows Controls:

Practical LearningPractical Learning: Introducing Track Bars

  1. Start a new Windows Application named CarInventory1
  2. Copy the pictures of the cars and paste them in the CarInventory1\CarInventory1\bin\debug folder of the current project
  3. On the main menu, click Project -> Add Class...
  4. Set the Name to Car and click Add
  5. Create the following members of the class:
     
    using System;
    
    namespace CarInventory1
    {
        public class Car
        {
            public string Make;
            public string Model;
            public int Year;
            public double Price;
            public string Picture;
        }
    }
  6. Save all
  1. Design the form as follows:
     
    Car Inventory: Form Design
    Control Text Name Additional Properties
    GroupBox Car Description    
    Label Make:    
    TextBox Honda txtMake  
    Label Model:    
    TextBox   txtModel  
    Label Year:    
    TextBox   txtYear TextAlign: Right
    Label Price:    
    TextBox   txtPrice TextAlign: Right
    PictureBox   pbxCarImage SizeMode: CenterImage
    TrackBar   tbrImages Orientation: Vertical
    TrackBar   tbrReview  
    Button Close btnClose  
  2. Execute the application to test the form
  3. Close the form and return to your programming environment

The Value of a Track Bar

As mentioned already, to use the track bar, the user must change the position of the thumb. To change this position, the user can drag the thumb, click the slider line, press one of the arrow keys, or press the Page Up or Page Down keys. As the user drags the thumb, the control fires a Scroll event. This event is of type EventArgs. Because this is the default event of the control, to generate its skeleton code, you can double-click the track bar on the control

When the user drags the thumb, the control holds a new value known as the Value property. You also can assign a value to this property to change the position of the thumb. The value of the Value property must be an integer. After the user has changed it, to know the value of the track bar, you can access its Value property. Here is an example:

private void InitializeComponent()
{
        tbrSlider = new TrackBar();
        tbrSlider.Location = new Point(12, 12);
        tbrSlider.Width = 180;

        tbrSlider.Value = 6;

        Controls.Add(tbrSlider);
}

This would produce:

Practical LearningPractical Learning: Generating the Scroll Event

  1. On the form, double-click the bottom track bar
  2. Return to the form and double-click the right track bar
  3. Return to the form

The Maximum and the Minimum Values

However the user moves the thumb, it must assume a value between the limits allowed on the control. The Minimum property is the lowest value that the thumb can assume within the track. The Maximum value controls the opposite. The user is allowed to slide only between these two values. These two properties are set in the Properties window using their respective fields. By default, the minimum value is set to 0 and the maximum is 10. To change the minimum or maximum values programmatically, assign the desired value to the appropriate property. Here is an example:

private void InitializeComponent()
{
        tbrSlider = new TrackBar();
        tbrSlider.Location = new Point(12, 12);
        tbrSlider.Width = 480;

        tbrSlider.Minimum = 8;
        tbrSlider.Maximum = 140;

        tbrSlider.Value = 86;

        Controls.Add(tbrSlider);
}

This would produce:

You can also set the minimum and the maximum values by calling the TrackBar.SetRange() method. Its syntax is:

public void SetRange(int minimum, int maximum);

The first argument is the same as the Minimum property and the second argument is the same as the Maximum property. Here is an example:

private void InitializeComponent()
{
        tbrSlider = new TrackBar();
        tbrSlider.Location = new Point(12, 12);
        tbrSlider.Width = 480;

        tbrSlider.SetRange(8, 140);

        tbrSlider.Value = 86;

        Controls.Add(tbrSlider);
}

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 set the Minimum property to a value higher than that of the Maximum, for example setting Minimum to 66 while Maximum=10, the value of the Maximum would be set to that of the Minimum. In this case, both properties would have the same value. This makes the control unusable: if the Minimum and the Maximum properties hold the same values, the user cannot move the thumb. In the same way, at run time, avoid assigning unpractical values to these properties.

The Ticks of a Track Bar

A track bar is equipped with small bars “|” that serve as indicators of the position occupied by the thumb. These bars are called ticks. The ticks are positioned at same distances from each other. The number of ticks available on a track bar, or the number of ticks you can see, depend on the difference between the Minimum and the Maximum values The higher the Maximum - Minimum difference, the more ticks available. The lower this value, the fewer the ticks but this should not be the reason you use a lower Minimum or a higher Maximum.

The Tick Frequency

If the difference between the Maximum and the Minimum properties causes the control to display too many ticks. Consider the following example:

private void InitializeComponent()
{
        tbrSlider = new TrackBar();
        tbrSlider.Location = new Point(12, 12);
        tbrSlider.Width = 400;
        tbrSlider.SetRange(8, 255);
        tbrSlider.Value = 125;

        Controls.Add(tbrSlider);
}
A track bar with too many ticks

When this happens, you can reduce the number of ticks. This is done using the TickFrequency property. Here is an example:

private void InitializeComponent()
{
        tbrSlider = new TrackBar();
        tbrSlider.Location = new Point(12, 12);
        tbrSlider.Width = 400;
        tbrSlider.SetRange(8, 255);
        tbrSlider.Value = 125;

        tbrSlider.TickFrequency = 10;

        Controls.Add(tbrSlider);
}

This would produce:

Track Bar With Tick Frequency

The Tick Style

The thumb’s visual display appears as a small standing pentagon with two straight borders. Its appearance is set using the TickStyle property which is based on the TickStyle enumeration. When you add a new TrackBar control to a form, it is horizontally oriented, the thumb points down, the tick marks are positioned under the sliding field. In this setting, the TickStyle property is set to BottomRight. To place the tick marks above the sliding field, change the value of the TickStyle property to TopLeft; this also has the effect of reversing the direction of the slider. Here is an example:

private void InitializeComponent()
{
        tbrSlider = new TrackBar();
        tbrSlider.Location = new Point(12, 12);
        tbrSlider.Width = 400;
        tbrSlider.SetRange(8, 255);
        tbrSlider.Value = 125;
        tbrSlider.TickFrequency = 10;

        tbrSlider.TickStyle = TickStyle.TopLeft;

        Controls.Add(tbrSlider);
}

This would produce:

Track Bar With Tick Style

As a third option, you can have the tick marks on both sides of the slider. To get this, set the TickStyle property to Both. With this value, the thumb becomes a small rectangle (changing from its pentagon shape):

Track Bar With Tick Style

Practical LearningPractical Learning: Setting the Tick Style

  1. On the form, click the right track bar
  2. In the Properties window, click TickStyle and select Both from its combo box
  3. On the form, click the bottom track bar
  4. In the Properties window, click TickStyle and select TopLeft from its combo box
     
    Car Inventory
  5. Save all

The Small Change

When the user presses one of the arrow keys, the thumb moves by one tick. This unit is known as the SmallChange property. If you want the thumb to move by more than one tick, you can assign the desired value to this property. Alternatively, you can calculate a fraction of the difference between the Minimum and the Maximum values then use it as the SmallChange.

The Large Change

When the user presses either the Page Up (PgUp) or the Page Down (PgDn) keys, the thumb moves by a value represented by the LargeChange property. If the default value of this property is not convenient for your application, you can change it to a new desired value or you can use a fraction of the difference between the Minimum and the Maximum properties then use it as the LargeChange.

Practical LearningPractical Learning: Using a Track Bar

  1. Double-click an unoccupied of the form
  2. Return to the form and double-click the Close button
  3. Change the file as follows:
     
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Text;
    using System.Windows.Forms;
    
    namespace CarInventory1
    {
        public partial class Form1 : Form
        {
            int ReviewPosition;
    
            Car[] Cars = new Car[15];
    
            // We will not use the commented arrays.
            // They are only mentioned here for reference
            string[] pictures0;
            string[] pictures1 = new string[5];
            string[] pictures2 = new string[3];
            //string[] pictures3  = new string[0];
            string[] pictures4 = new string[3];
            string[] pictures5 = new string[3];
            string[] pictures6 = new string[3];
            //string[] pictures7  = new string[0];
            //string[] pictures8  = new string[0];
            //string[] pictures9 = new string[0];
            string[] pictures10 = new string[3];
            string[] pictures11 = new string[4];
            //string[] pictures12 = new string[0];
            string[] pictures13 = new string[7];
            string[] pictures14 = new string[2];
    
            public Form1()
            {
                InitializeComponent();
            }
    
            private void tbrReview_Scroll(object sender, EventArgs e)
            {
                // Get the index of the current value of the track bar
                ReviewPosition = tbrReview.Value;
    
                // Based on the current index, retrieve the values of the
                // current car and assign each to the corresponding control 
                txtMake.Text = Cars[ReviewPosition].Make;
                txtModel.Text = Cars[ReviewPosition].Model;
                txtYear.Text = Cars[ReviewPosition].Year.ToString();
                txtPrice.Text = Cars[ReviewPosition].Price.ToString();
                pbxCarImage.Image = Image.FromFile(Cars[ReviewPosition].Picture);
    
                // To make the right track bar aware of the number
                // of pictures of each car, set its maximum property
                // according to the number of pictures (- 1)
                switch (ReviewPosition)
                {
                    case 0:
                        tbrImages.Maximum = 8;
                        break;
                    case 1:
                        tbrImages.Maximum = 5;
                        break;
                    case 2:
                        tbrImages.Maximum = 3;
                        break;
                    case 3:
                        tbrImages.Maximum = 0;
                        break;
                    case 4:
                        tbrImages.Maximum = 3;
                        break;
                    case 5:
                        tbrImages.Maximum = 3;
                        break;
                    case 6:
                        tbrImages.Maximum = 3;
                        break;
                    case 7:
                        tbrImages.Maximum = 0;
                        break;
                    case 8:
                        tbrImages.Maximum = 0;
                        break;
                    case 9:
                        tbrImages.Maximum = 0;
                        break;
                    case 10:
                        tbrImages.Maximum = 3;
                        break;
                    case 11:
                        tbrImages.Maximum = 4;
                        break;
                    case 12:
                        tbrImages.Maximum = 0;
                        break;
                    case 13:
                        tbrImages.Maximum = 7;
                        break;
                    case 14:
                        tbrImages.Maximum = 1;
                        break;
                    default:
                        break;
                }
    
                tbrImages.Value = 0;
            }
    
            private void tbrImages_Scroll(object sender, EventArgs e)
            {
                // Check the position of the bottom track bar
                // Then, use the value of the right track bar
                // to locate the right picture
                switch (ReviewPosition)
                {
                    case 0:
                        pbxCarImage.Image = Image.FromFile(pictures0[tbrImages.Value]);
                        break;
                    case 1:
                        pbxCarImage.Image = Image.FromFile(pictures1[tbrImages.Value]);
                        break;
                    case 2:
                        pbxCarImage.Image = Image.FromFile(pictures2[tbrImages.Value]);
                        break;
                    case 4:
                        pbxCarImage.Image = Image.FromFile(pictures4[tbrImages.Value]);
                        break;
                    case 5:
                        pbxCarImage.Image = Image.FromFile(pictures5[tbrImages.Value]);
                        break;
                    case 6:
                        pbxCarImage.Image = Image.FromFile(pictures6[tbrImages.Value]);
                        break;
                    case 10:
                        pbxCarImage.Image = Image.FromFile(pictures10[tbrImages.Value]);
                        break;
                    case 11:
                        pbxCarImage.Image = Image.FromFile(pictures11[tbrImages.Value]);
                        break;
                    case 13:
                        pbxCarImage.Image = Image.FromFile(pictures13[tbrImages.Value]);
                        break;
                    case 14:
                        pbxCarImage.Image = Image.FromFile(pictures14[tbrImages.Value]);
                        break;
                    default:
                        break;
                }
            }
    
            private void Form1_Load(object sender, EventArgs e)
            {
                // Create the list of cars
                Cars[0] = new Car();
                Cars[0].Make = "BMW";
                Cars[0].Model = "335i";
                Cars[0].Year = 2007;
                Cars[0].Price = 42580;
                Cars[0].Picture = "335iA.gif";
    
                Cars[1] = new Car();
                Cars[1].Make = "Honda";
                Cars[1].Model = "Accord";
                Cars[1].Year = 2007;
                Cars[1].Price = 24550;
                Cars[1].Picture = "Accord1.gif";
    
                Cars[2] = new Car();
                Cars[2].Make = "Chevrolet";
                Cars[2].Model = "Avalanche";
                Cars[2].Year = 2007;
                Cars[2].Price = 36880;
                Cars[2].Picture = "Avalanche1.gif";
    
                Cars[3] = new Car();
                Cars[3].Make = "Volvo";
                Cars[3].Model = "C70";
                Cars[3].Year = 1997;
                Cars[3].Price = 42320;
                Cars[3].Picture = "C70.gif";
    
                Cars[4] = new Car();
                Cars[4].Make = "Land Rover";
                Cars[4].Model = "LR3";
                Cars[4].Year = 2007;
                Cars[4].Price = 46245;
                Cars[4].Picture = "LR3a.gif";
    
                Cars[5] = new Car();
                Cars[5].Make = "Honda";
                Cars[5].Model = "Civic";
                Cars[5].Year = 2000;
                Cars[5].Price = 22665;
                Cars[5].Picture = "Civic1.gif";
    
                Cars[6] = new Car();
                Cars[6].Make = "Mazda";
                Cars[6].Model = "Mazda5";
                Cars[6].Year = 2007;
                Cars[6].Price = 20845;
                Cars[6].Picture = "Mazda5a.gif";
    
                Cars[7] = new Car();
                Cars[7].Make = "Ford";
                Cars[7].Model = "Escape";
                Cars[7].Year = 1997;
                Cars[7].Price = 22445;
                Cars[7].Picture = "Escape.gif";
    
                Cars[8] = new Car();
                Cars[8].Make = "Acura";
                Cars[8].Model = "TSX";
                Cars[8].Year = 2006;
                Cars[8].Price = 26445;
                Cars[8].Picture = "TSX.gif";
    
                Cars[9] = new Car();
                Cars[9].Make = "Mazda";
                Cars[9].Model = "Miata";
                Cars[9].Year = 2008;
                Cars[9].Price = 24180;
                Cars[9].Picture = "Miata.gif";
    
                Cars[10] = new Car();
                Cars[10].Make = "Ford";
                Cars[10].Model = "F-150";
                Cars[10].Year = 2006;
                Cars[10].Price = 20475;
                Cars[10].Picture = "F150a.gif";
    
                Cars[11] = new Car();
                Cars[11].Make = "Volvo";
                Cars[11].Model = "S40";
                Cars[11].Year = 2008;
                Cars[11].Price = 25285;
                Cars[11].Picture = "S40a.gif";
    
                Cars[12] = new Car();
                Cars[12].Make = "BMW";
                Cars[12].Model = "750i";
                Cars[12].Year = 2007;
                Cars[12].Price = 88925;
                Cars[12].Picture = "750Li.gif";
    
                Cars[13] = new Car();
                Cars[13].Make = "Buick";
                Cars[13].Model = "LaCrosse";
                Cars[13].Year = 2002;
                Cars[13].Price = 28685;
                Cars[13].Picture = "LaCrosse1.gif";
    
                Cars[14] = new Car();
                Cars[14].Make = "Ford";
                Cars[14].Model = "E-150 XL";
                Cars[14].Year = 2002;
                Cars[14].Price = 26660;
                Cars[14].Picture = "E150XLa.gif";
    
                // Create the list of pictures for each car
                pictures0 = new string[9]
                {
                    "335iA.gif", "335iB.gif", "335iC.gif",
                    "335iD.gif", "335iE.gif", "335iF.gif",
                    "335iG.gif", "335iH.gif", "335iI.gif"
                };
                pictures1 = new string[]
                {
                    "Accord1.gif", "Accord2.gif", "Accord3.gif",
                    "Accord4.gif", "Accord5.gif", "Accord6.gif"
                };
                pictures2 = new string[]
                {
                    "Avalanche1.gif", "Avalanche2.gif",
                    "Avalanche3.gif", "Avalanche4.gif"
                };
                pictures4 = new string[]
                {
                    "LR3a.gif", "LR3b.gif",
                    "LR3b.gif", "LR3d.gif"
                };
                pictures5 = new string[]
                {
                    "Civic1.gif", "Civic2.gif",
                    "Civic3.gif", "Civic4.gif"
                };
                pictures6 = new string[]
                {
                    "Mazda5a.gif", "Mazda5b.gif",
                    "Mazda5c.gif", "Mazda5d.gif"
                };
                pictures10 = new string[]
                {
                    "F150a.gif", "F150b.gif",
                    "F150c.gif", "F150d.gif"
                };
                pictures11 = new string[]
                {
                    "S40a.gif", "S40b.gif",
                    "S40c.gif", "S40d.gif", "S40e.gif"
                };
                pictures13 = new string[]
                {
                    "LaCrosse1.gif", "LaCrosse2.gif", "LaCrosse3.gif",
                    "LaCrosse4.gif", "LaCrosse5.gif", "LaCrosse6.gif",
                    "LaCrosse7.gif", "LaCrosse8.gif"
                };
                pictures14 = new string[]
                {
                    "E150XLa.gif", "E150XLb.gif"
                };
    
                // Call the Scroll event of the bottom track bar
                // as if it had been scrolled
                tbrReview_Scroll(sender, e);
            }
    
            private void btnClose_Click(object sender, EventArgs e)
            {
                // Close the application
                Close();
            }
        }
    }
  4. Execute the application and test the track bar:
     
    Car Inventory
    Car Inventory
    Car Inventory
  5. Close the form and return to your programming environment

Download

 

Home Copyright © 2007 FunctionX, Inc.