Vertical RadSlider Tick Labels

[Charlie]

When using the slider in vertical, the tick text displays vertical as well, how can I make the text horizontal so its actually readable?

 

<telerik:RadSlider x:Name="uxSlider"
                   IsDeferredDraggingEnabled="True"
                   TickPlacement="BottomRight"
                   Orientation="Vertical">
    <telerik:RadSlider.TickTemplate>
        <DataTemplate>
            <Label Content="{Binding}" />
        </DataTemplate>
    </telerik:RadSlider.TickTemplate>
</telerik:RadSlider>

 

 

 

[Kiril Vandov]

Hello Charlie,

You could apply LayoutTransform to the Label in your TickTemplate and rotate the text to any direction you desire. Here is a sample code-snippet rotating the text vertically:

...
<telerik:RadSlider.TickTemplate>
    <DataTemplate>
        <Label Content="{Binding}" >
            <Label.LayoutTransform>
                <RotateTransform Angle="90" />
            </Label.LayoutTransform>
        </Label>
    </DataTemplate>
</telerik:RadSlider.TickTemplate>
...

I hope this information helps. Please let us know if it works for you.

Regards,
Kiril Vandov
Telerik

[Charlie]

Thanks, how do you keep the tick marks as well?

[Kiril Vandov]

Hello Charlie,

Once you change the TickTemplate the the default tick marks are overridden. That is why we could add a rectangle to the TickTemplate to make tick marks, like follows:

<telerik:RadSlider.TickTemplate>
    <DataTemplate>
        <StackPanel Orientation="Vertical">
            <Rectangle Width="1" Height="5" Fill="Black" />
            <Label Content="{Binding}" >
                <Label.LayoutTransform>
                    <RotateTransform Angle="90" />
                </Label.LayoutTransform>
            </Label>
        </StackPanel>
    </DataTemplate>
</telerik:RadSlider.TickTemplate>

I hope this information helps.

Regards,
Kiril Vandov
Telerik

[Charlie]

With this solution, the ticks and labels don't line up well. I have tried modifying the alignments, heights and widths, but the rotation of the text seems to get in the way. How do you make this solution look good and get the ticks to line up with each other correctly with properly spaced labels?

[Kiril Vandov]

Hello Charlie,

Could you provide us with more information on how do you expect the ticks and labels to be aligned. The provided solution centers the tick in the middle of the label on our side. Also please let us know if you add margin/padding which can cause alignment problems.

Thank you for your cooperation in advance.

King regards,
Kiril Vandov
Telerik

[Charlie]

In the attached image, I have displayed the 4 scenarios possible with simple configuration.

1. TickPlacement=TopLeft, Tick first
   Ticks are away from the slider and tick and label are not vertically centered with each other
2. TickPlacement=TopLeft, Label first
   Ticks are not right aligned properly and tick and label are not vertically centered
3. TickPlacement=BottomRight, Label first
   Ticks are away from slider and tick and label are not vertically aligned
4. TickPlacement=BottomRight, Tick first
   This is closest solution, although we are unable to right align the text and format it with "0.00". The top tick touches the handle, the bottom tick appears above the handle. Tick and labels are not vertically aligned

What we would like to see is the ticks on the left side of the slider, correctly right aligned, with the label to the left of the tick also right aligned with format of "0.00". I would also accept the tick on right side as long as we could right align and format the labels as "0.00".

Thanks for your help so far.

[Kiril Vandov]

Hello Charlie,

Unfortunately currently this kind of alignment is not supported by the RadSlider out of the box. However we will consider the implementation of such alignment logic. That is why I created a feature request in our PITS system and you can vote and track its progress here.

In the meantime as a workaround you could use Grid with two columns in your TickTemplate. One of the columns will contain the tick and the other one - the label. The downside of that approach is that you will need to specify the label width explicitly in order to properly align all elements. Also if you want the numbers to be in "0.00" format you could use Converter and round the numbers to the desired precision.

I also attached a sample project implementing all scenarios displayed in the provided screenshot (with applied alignments) for your convenience.

I hope this information helps.

King regards,
Kiril Vandov
Telerik