Vertical slider with horizontally orientated ticks?

4 posts, 0 answers
  1. Clas Ericson
    Clas Ericson avatar
    31 posts
    Member since:
    Sep 2011

    Posted 07 Aug 2012 Link to this post

    I'm using RadSlider to allow the user to select desired level in my business object hierarchy. I'm also using a TickTemplate and ValueConverter to display each levels name instead of a simple number. The slider needs to have vertical orientation but each tick label should still be horizontal for better readability.

    I've encountered two mishaps when trying to accomplish this.
    1. When using the ValueConverter to display readable names instead of simple integer values, the layout of the ticks gets messed up spreading the ticks too wide, not following the steps on the slider.
    2. When adding a simple RotateTransform in the TickTemplate the string gets cut off only displaying two, three letters.

    In the attached screenshot you can see what it all looks like. I've sketched on it to better explain what you see.

    Does anyone have an idea of how I can solve this?

    Best regards, Clas Ericson
  2. Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 08 Aug 2012 Link to this post

    Hi Clas,

    I have an idea why your text is getting cut off. I've attached an image for you as a guideline. The Radslider's container is clipping off the beginning of your test. This is happening because there is not enough room between the edge of the control and the slider. It was designed for horizontal use and there is a slim margin there.

    This can be easily remedied by increasing the controls height value (because you've rotated the control). If there is not enough room, you may need to edit the ControlTemplate. Let me know if you have trouble doing this and I'll extract the template and make the changes for you.

    I'm not sure what is happening in part one of your question. The telerik staff should be able to help you there.
  3. Clas Ericson
    Clas Ericson avatar
    31 posts
    Member since:
    Sep 2011

    Posted 09 Aug 2012 Link to this post

    Hi Lancelot,
    thanks for your reply! You're right, adjusting the sliders height helped. It also helped to adjust the margins of the TextBlock representing the tick label.

    But still the ticks gets misplaced, spreading too far apart from each other, when I add my TextBlock to the TickTemplate. My workaround for now is to place the slider without text labels next to an itemscontrol generating all text labels and then adjust the positioning of the two controls when loading the view. Not a perfect solution, but it works for now...
  4. Tina Stancheva
    Tina Stancheva avatar
    3299 posts

    Posted 10 Aug 2012 Link to this post

    Hi Clas,

    The labels seem too fart apart because of the default RenderTransformOrigin that is applied on them. This is why you need to change it to make sure that the rotation wont place the TextBlocks away (under or above) from their original position. It's best to set up the RenderTransformOrigin to (0,5 0,5). I attached a sample solution demonstrating this approach, please let me know if it helps.

    All the best,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top