RadControls for WinForms

Properties

Here are the most important RadTrackBar properties that you can use to change its appearance and behavior:

  • The ShowSlideArea property controls whether the line down the middle of the control where the slider rides is drawn. The default value is true. Setting it to false will produce the following result:
    Copy[C#]
    this.radTrackBar1.ShowSlideArea = false;
    Copy[VB.NET]
    Me.RadTrackBar1.ShowSlideArea = False

    track-and-status-controls-trackbar-programming-radtrackbar 001

  • The ShowTicks property controls whether the tick marks are drawn. The default value of this property is true. Setting it to false will produce the following result:
    Copy[C#]
    this.radTrackBar1.ShowTicks = false;
    Copy[VB.NET]
    Me.RadTrackBar1.ShowTicks = False

    track-and-status-controls-trackbar-programming-radtrackbar 002

  • The SlideAreaWidth property sets the width of the slide area in pixels. The default value of this property in the context of our ControlDefault theme is 3. Setting it to 10 will product the following result:
    Copy[C#]
    this.radTrackBar1.SlideAreaWidth = 10;
    Copy[VB.NET]
    Me.RadTrackBar1.SlideAreaWidth = 10

    track-and-status-controls-trackbar-programming-radtrackbar 003

  • The SlideAreaColor1 and SlideAreaColor2 properties control the colors of the sliders area shade.
    Copy[C#]
    this.radTrackBar1.SliderAreaColor1 = Color.Red;
    this.radTrackBar1.SliderAreaColor2 = Color.Black;
    Copy[VB.NET]
    Me.RadTrackBar1.SliderAreaColor1 = Color.Red
    Me.RadTrackBar1.SliderAreaColor2 = Color.Black

    track-and-status-controls-trackbar-programming-radtrackbar 004

  • The SlideAreaGradientAngle controls the direction in which the SlideAreaColor1 and SlideAreaColor2 properties shade the slider area. Setting this property to 90 will direct the shade from top to bottom.
    Copy[C#]
    this.radTrackBar1.SliderAreaGradientAngle = 90;
    Copy[VB.NET]
    Me.RadTrackBar1.SliderAreaGradientAngle = 90

    track-and-status-controls-trackbar-programming-radtrackbar 005

  • The ThumbWidth property sets the width of the slider, for example:
    Copy[C#]
    this.radTrackBar1.ThumbWidth = 20;
    Copy[VB.NET]
    Me.RadTrackBar1.ThumbWidth = 20

    track-and-status-controls-trackbar-programming-radtrackbar 006

  • The TicksColor property sets the color of the tick marks, for example:
    Copy[C#]
    this.radTrackBar1.TicksColor = Color.Red;
    Copy[VB.NET]
    Me.RadTrackBar1.TicksColor = Color.Red

    track-and-status-controls-trackbar-programming-radtrackbar 007

  • The LargeChange property sets the change in value that one click of the mouse outside of the slider makes. Let's say that the position of your thumb is at the beginning of the RadTrackBar (at position 0), the value of this property is 5 and you click on tick number 14. The thumb will reposition itself to tick number 5, following the step determined by the LargeChange property.
    Copy[C#]
    this.radTrackBar1.LargeChange = 5;
    Copy[VB.NET]
    Me.RadTrackBar1.LargeChange = 5
  • The Minimum and Maximum properties set the limits of the Value property for the control.
    Copy[C#]
    this.radTrackBar1.Minimum = 10;
    this.radTrackBar1.Maximum = 120;
    Copy[VB.NET]
    Me.RadTrackBar1.Minimum = 10
    Me.RadTrackBar1.Maximum = 120
  • The Orientation property can be set to Horizontal or Vertical to determine the overall orientation of the control. The default value is Horizontal, but if you set it to Vertical, you will get the following result:
    Copy[C#]
    this.radTrackBar1.Orientation = Orientation.Vertical;
    Copy[VB.NET]
    Me.RadTrackBar1.Orientation = Orientation.Vertical

    track-and-status-controls-trackbar-programming-radtrackbar 008

  • The TickFrequency property sets the spacing of the tick marks. The default value is 1, but if you set it to, let' say 7, you will get only every 7th tick shown:
    Copy[C#]
    this.radTrackBar1.TickFrequency = 7;
    Copy[VB.NET]
    Me.RadTrackBar1.TickFrequency = 7

    track-and-status-controls-trackbar-programming-radtrackbar 009

  • The TickStyle property controls whether the tick marks are drawn on one or both sides of the control. The default value is Both.
    • Setting TickStyle to TopLeft will show only the ticks on the top side, when the Orientation is Horizontal. If the Orientation is set to Vertical, only the ticks on the left side will be shown:

      Copy[C#]
      this.radTrackBar1.TickStyle = Telerik.WinControls.Enumerations.TickStyles.TopLeft;
      Copy[VB.NET]
      Me.RadTrackBar1.TickStyle = Telerik.WinControls.Enumerations.TickStyles.TopLeft

      track-and-status-controls-trackbar-programming-radtrackbar 010

      track-and-status-controls-trackbar-programming-radtrackbar 011

    • Setting TickStyle to BottomRight will show only the ticks on the down side, when the Orientation is Horizontal. If the Orientation is set to Vertical, only the ticks on the right side will be shown:

      Copy[C#]
      this.radTrackBar1.TickStyle = Telerik.WinControls.Enumerations.TickStyles.BottomRight;
      Copy[VB.NET]
      Me.RadTrackBar1.TickStyle = Telerik.WinControls.Enumerations.TickStyles.BottomRight

      track-and-status-controls-trackbar-programming-radtrackbar 012

Events

There are two events that you will find useful in the context of RadTrackBar:

  • ValueChanged event is fired after the user drags the thumb and drops it somewhere on the slider area. In this event, you can get the value of RadTrackBar from its Value property.

  • Scroll event is fired during the dragging operation and its event arguments provide the current state (value) of the thumb, regardless of the fact that the user still holds it with the mouse.

A single drag and drop operation of the thumb in RadTrackbar combined with the following code snippet will produce the result shown below:

Copy[C#]
void radTrackBar1_ValueChanged(object sender, EventArgs e)
{
    Console.WriteLine("ValueChanged: {0}", this.radTrackBar1.Value);
}

void radTrackBar1_Scroll(object sender, ScrollEventArgs e)
{
    Console.WriteLine("Scroll : {0}", e.NewValue);
}
Copy[VB.NET]
Private Sub radTrackBar1_ValueChanged(ByVal sender As Object, ByVal e As EventArgs) Handles RadTrackBar1.ValueChanged
    Console.WriteLine("ValueChanged: {0}", Me.RadTrackBar1.Value)
End Sub

Private Sub radTrackBar1_Scroll(ByVal sender As Object, ByVal e As ScrollEventArgs) Handles RadTrackBar1.Scroll
    Console.WriteLine("Scroll : {0}", e.NewValue)
End Sub
CopyOutput
Scroll : 11
Scroll : 12
Scroll : 13
Scroll : 14
Scroll : 15
Scroll : 16
Scroll : 16
Scroll : 17
Scroll : 18
Scroll : 19
Scroll : 20
Scroll : 21
Scroll : 21
ValueChanged: 21