RadTrackBar minimum size

[Patrick]

I am currently facing two issues using the RadTrackBar control.

First issue:

When the width of the control is smaller then 100px, the text and graphics bar are cut off (see image).

For this reason the control is not usable with a smaller size then 100px

 

Second issue:

When setting label style and tick style to none the control height is automatically set to 16px.

When switching to Material theme, the button shown on mousedown is larger then these 16px and the image is cut-off.

 

For issue 2 there is a workaround, setting minimum size of the control will "fix" this but is there a solution for issue 1?

 

Best regards

Patrick Vossen

[Patrick]

Unable to edit post....

 

I did some more testing. The minimum width of 100px is when maximum value is set to 10. When setting maximum value to 100 the minimum width is 210px.

I want to use the control without labels and ticks.

 

[Hristo]

Hello Patrick,

Regarding the first question, there is is a minimum size set on the main element of the control. You can remove it this way: 

this.radTrackBar1.TrackBarElement.MinSize = new Size(0, 0);

About the Material theme, it defines very large sizes to the controls. Depending on how you have built the layout of the controls on the form, it might be necessary to adjust it.

The trackbar control also has the SmallTickFrequency and LargeTickFrequency properties. They relate to the Minimum and Maximum values set to the control. That is why a greater size is needed when you set the Maximum to 100. It is possible to have such maximum with a smaller size of the control as well but it will be necessary to change its tick frequency properties: 

this.radTrackBar1.Maximum = 100;
this.radTrackBar1.SmallTickFrequency = 2;
this.radTrackBar1.LargeTickFrequency = 10;

Additional information, about these properties is available here: https://docs.telerik.com/devtools/winforms/track-and-status-controls/trackbar/properties-events. The ticks and labels can be completely removed this way: 

this.radTrackBar1.TickStyle = Telerik.WinControls.Enumerations.TickStyles.None;
this.radTrackBar1.LabelStyle = Telerik.WinControls.UI.TrackBarLabelStyle.None;

I hope this helps. Let me know if you have other questions.

Regards,
Hristo
Progress Telerik

[Patrick]

Hi Hristo,

Thanks for your reply, 
Adjusting the SmallTickFrequency, LargeTickFrequency will improve that the control can be smaller than the 210px when using a value of 100, but the control cannot be used smaller than 100px.

I probably can work with this minimum (usable) size.

 

But if you want you can test yourselves by dropping the control to a form

Set :
.Size.Width > 100px
.SmallTickFrequency = 100
.LargeTickFrequency = 100
.TickStyle = None
.LabelStyle = None
.Maximum = 100
.Value = 100

The button will be shown completely to the right size of the control
Now change the width of the control to a value < 100px
The Button and SlideArea will be cut off

When changing all above mentioned values to 10, the Button and SlideArea will still be cut off when width of the control is smaller than 100px.

 

Best regards

Patrick Vossen

[Hristo]

Hello Patrick,

What you are observing right now is a limitation of the control. It actually can be sized to a width of less than 100 px but you will need to remove the MinSize set on the element at run-time. Depending on the Maximum it may also be necessary to adjust the values of the Small and Large tick frequencies. For example, you can test with the following settings: 

public RadForm1()
{
    InitializeComponent();

    this.radTrackBar1.Maximum = 100;
    this.radTrackBar1.SmallTickFrequency = 20;
    this.radTrackBar1.LargeTickFrequency = 100;

    this.radTrackBar1.TrackBarElement.MinSize = new Size(0, 0);
    this.radTrackBar1.TickStyle = Telerik.WinControls.Enumerations.TickStyles.None;
    this.radTrackBar1.LabelStyle = Telerik.WinControls.UI.TrackBarLabelStyle.None;
}

I am attaching my test project as well as a video showing the result on my end. Let 

Regards,
Hristo
Progress Telerik

[Patrick]

Hi Hristo,

Thanks for your solution.

This works great.

Grtz Patrick