Clas Ericson
Top achievements
Rank 2
Rank 2
Clas Ericson
asked on 07 Aug 2012, 01:30 PM
Hi,
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
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
3 Answers, 1 is accepted
0
Lancelot
Top achievements
Rank 1
Rank 1
answered on 08 Aug 2012, 03:13 PM
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.
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.
0
Clas Ericson
Top achievements
Rank 2
Rank 2
answered on 09 Aug 2012, 06:28 AM
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...
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...
0
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
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.