Advanced TrackBar (Slider) Control with MAC Style (C# & VB.NET)

It's nicer when we put this control with other MAC Style controls as below:

Introduction

We think about developing an advanced TrackBar (Slider) control that supports MAC Style and many other features in the time working in ‘MAC-UI Suite' project (a project focus on building a rich library of UI controls with MAC style for .NET).

Main Features

Supports MAC style
Vertical and Horizontal trackbar
Supports many Text Tick styles: None, TopLeft, BottomRight, Both
You can change Text Font, ForeColor for Text Tick
Supports many Tick styles: None, TopLeft, BottomRight, Both
You can change TickColor, TickFrequency, TickHeight
You can change TrackerColor and TrackerSize
You can change TrackLineColor and TrackLineHeight
Easy to Use and Integrate in Visual Studio .NET
100% compatible to the standard control in VS.NET
100% managed code

To explore features of this TrackBar control, just download and run the demo program.

Control Properties

Property	Description
`AutoSize`	Gets or sets a value indicating whether the height or width of the track bar is being automatically sized.
`BorderColor`	Gets or sets the border color of the control.
`BorderStyle`	Gets or sets the border type of the trackbar control.
`IndentHeight`	Gets or sets the height of indent (or Padding-Y).
`IndentWidth`	Gets or sets the width of indent (or Padding-Y).
`LargeChange`	Gets or sets a value to be added to or subtracted from the `Value` property when the slider is moved a large distance.
`Maximum`	Gets or sets the upper limit of the range this `MACTrackBar` is working with.
`Minimum`	Gets or sets the lower limit of the range this `MACTrackBar` is working with.
`Orientation`	Gets or sets a value indicating the horizontal or vertical orientation of the track bar.
`Size`	Gets or sets the height and width of the control.
`SmallChange`	Gets or sets a value to be added to or subtracted from the `Value` property when the slider is moved a small distance.
`TextTickStyle`	Gets or sets the text tick style of the trackbar. There are 4 styles for selection: `None`, `TopLeft`, `BottomRight`, `Both`.
`TickColor`	Gets or sets the tick's Color of the control.
`TickFrequency`	Gets or sets a value that specifies the delta between ticks drawn on the control.
`TickHeight`	Gets or sets the height of tick.
`TickStyle`	Gets or sets the tick style of the trackbar. There are 4 styles for selection: `None`, `TopLeft`, `BottomRight`, `Both`.
`TrackerColor`	Gets or set tracker's color.
`TrackerSize`	Gets or sets the tracker's size. The tracker's width must be greater or equal to tracker's height.
`TrackLineColor`	Gets or sets the color of the track line.
`TrackLineHeight`	Gets or sets the height of track line.
`Value`	Gets or sets a numeric value that represents the current position of the slider on the track bar.

Control Methods

Methods	Description
`Decrement`	Call the `Decrement()` method to decrease the value displayed by an integer you specify
`Increment`	Call the `Increment()` method to increase the value displayed by an integer you specify
`OnScroll`	Raises the `Scroll` event.
`OnValueChanged`	Raises the `ValueChanged` event.
`ResetAppearance`	Reset the appearance properties after the `UIStyle` property.
`SetRange`	Sets the minimum and maximum values for a `TrackBar`.

Control Events

Event	Description
`Scroll`	Occurs when either a mouse or keyboard action moves the slider.
`ValueChanged`	Occurs when the property Value has been changed.

Using the Control

Download the source code and unzip it.
Open VS.NET's Tool menu and select "Add/Remove ToolBox Items".
Click "Browse", and navigate to the MACTrackBar.dll in the bin\Release directory of the source code.
Click Open and then OK, the MACTrackBar control will now be in your ToolBox. Just drag the control onto your form to use it.
Set the control's properties, and coding an event handle, and you press F5 to run your program.

Inside the Code

The calculation for all Orientation of the Tracker may be fairly complex and interesting.

Please read the below methods for more detail:

DrawTickTextLine()
DrawTickLine()
OnMouseDownSlider()
OnMouseUpSlider()
OnMouseMoveSlider()

Conclusion

Basing on this core code, you can build quite easily other UI Style for the TrackBar (e.g. XP Style...). You can draw the Tracker of any style by loading pictures...

We can support easily all tracker shapes as on MAC (by loading and drawing tracker's pictures). However, to optimize the memory usage, currently I didn't add them.

I hope others find this control useful. Please feel free to report errors, issues, or requests.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

NicolNghia

Web Developer

Vietnam

Member

Founder & Manager of X-Component (MAC-UI Suite, XP-UI Suite, IDE-UI Suite...)
URL: http://www.x-component.com

MCP with below MS certifications.
- MFC
- VC++ Desktop
- VC++ Distributed

Article Top