Advanced TrackBar (Slider) Control with MAC Style (C#)

Advanced TrackBar (Slider) Control with MAC Style (C#)

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

Introduction

Think about developing an advanced TrackBar (Slider) control that supports MAC Style and many other features, at the same time working in the MAC-UI Suite project (a project focused on building a rich library of UI controls in .NET with MAC style—always a favorite of many people!).

Main Features

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

To explore the 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 four styles: None, TopLeft, BottomRight, or 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 four styles: None, TopLeft, BottomRight, or Both.
TrackerColor Gets or sets the tracker's color.
TrackerSize Gets or sets the tracker's size. The tracker's width must be greater than or equal to the 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

Method Description
Decrement Calls the Decrement() method to decrease the value displayed by an integer you specify.
Increment Calls the Increment() method to increase the value displayed by an integer you specify.
OnScroll Raises the Scroll event.
OnValueChanged Raises the ValueChanged event.
ResetAppearance Resets 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

  1. Download the source code and unzip it.
  2. Open VS.NET's Tool menu and select "Add/Remove ToolBox Items".
  3. Click "Browse" and navigate to the MACTrackBar.dll in the bin\Release directory of the source code.
  4. Click Open and then OK; the MACTrackBar control will now be in your ToolBox. Just drag the control onto your form to use it.
  5. Set the control's properties, code an event handle, and then 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 following methods for more detail:

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

Conclusion

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

You easily can support all tracker shapes as on MAC (by loading and drawing the tracker's pictures). However, to optimize the memory usage, I haven't currently added them. I hope others find this control useful. Please feel free to report errors, issues, or requests.



About the Author

Nicol Nghia

Founder & Manager of X-Component. http://www.x-component.com MCP with below MS certifications. - MFC - VC++ Desktop - VC++ Distributed

Downloads

Comments

  • Different colors of track line on both sides of tracker

    Posted by Topvis Liu on 07/25/2013 07:31am

    Great control! Can I set different colors for track line on the left side and right side of the tracker? - Dapeng

    Reply
  • change layout to right

    Posted by Isaac on 11/11/2012 01:28am

    hello how can i change layout to right to left regards

    Reply
  • Licence

    Posted by aldo_praherda on 07/05/2009 11:55pm

    Nice job man. i like it. may i use it in my application?

    Reply
  • Brilliant!

    Posted by Sirius Trouble on 11/01/2006 04:26pm

    Excellent example of making a user drawn control in .NET. Taught me alot!

    Reply
  • Great Job!

    Posted by HenryJane on 06/16/2006 04:15am

    This article helped me a lot, Thanks! Henry

    Reply
  • Its ok for MAC lovers.

    Posted by Sheesh on 06/15/2006 11:54pm

    I think the control looks nice, although it would look kind of silly in any software I design, as I would have one MAC-style control with several Windows controls. If the whole collection is available I would be more interested. It is an interesting solution.

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: November 20, 2014 @ 2:00 p.m. ET / 11:00 a.m. PT Are you wanting to target two or more platforms such as iOS, Android, and/or Windows? You are not alone. 90% of enterprises today are targeting two or more platforms. Attend this eSeminar to discover how mobile app developers can rely on one IDE to create applications across platforms and approaches (web, native, and/or hybrid), saving time, money, and effort and introducing apps to market faster. You'll learn the trade-offs for gaining long …

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds