Vertical RadSlider Tick Labels

8 posts, 0 answers
  1. Charlie
    Charlie avatar
    13 posts
    Member since:
    Apr 2013

    Posted 21 May 2013 Link to this post

    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>

     

     

     

  2. Kiril Vandov
    Admin
    Kiril Vandov avatar
    324 posts

    Posted 22 May 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Charlie
    Charlie avatar
    13 posts
    Member since:
    Apr 2013

    Posted 22 May 2013 Link to this post

    Thanks, how do you keep the tick marks as well?
  5. Kiril Vandov
    Admin
    Kiril Vandov avatar
    324 posts

    Posted 23 May 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Charlie
    Charlie avatar
    13 posts
    Member since:
    Apr 2013

    Posted 23 May 2013 Link to this post

    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?
  7. Kiril Vandov
    Admin
    Kiril Vandov avatar
    324 posts

    Posted 27 May 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Charlie
    Charlie avatar
    13 posts
    Member since:
    Apr 2013

    Posted 28 May 2013 Link to this post

    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.

  9. Kiril Vandov
    Admin
    Kiril Vandov avatar
    324 posts

    Posted 30 May 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
UI for WPF is Visual Studio 2017 Ready