Hi there,
I'm trying to hide the labels of the bar and I want to move the lines to the bottom.
I found out that I can hide labels by setting the LabelUseRangeColor to true. I don't think this is the correct way. Can anyone help me with this?
I also want to move the lines from the top top the bottom of the RadHorizontalLinearGauge.
01.<telerik:RadHorizontalLinearGauge Width="250"02. Height="100"03. telerik:StyleManager.Theme="Windows8">04. <telerik:HorizontalLinearScale Min="0"05. Max="100"06. LabelLocation="CenterInside"07. LabelUseRangeColor="True"> <!-- LabelUseRangeColor turns off the label -->08. <telerik:HorizontalLinearScale.Indicators>09. <telerik:BarIndicator Value="60"10. UseRangeColor="True" />11. </telerik:HorizontalLinearScale.Indicators>12. <telerik:HorizontalLinearScale.CustomItems>13. <Border BorderBrush="#FF606060"14. BorderThickness="1,0"15. telerik:ScaleObject.Value="50"16. telerik:ScaleObject.Location="OverCenter"17. telerik:ScaleObject.RelativeHeight="0.14*"18. telerik:ScaleObject.RelativeWidth="0.8*">19. <Border.LayoutTransform>20. <RotateTransform Angle="90" />21. </Border.LayoutTransform>22. </Border>23. </telerik:HorizontalLinearScale.CustomItems>24. <telerik:HorizontalLinearScale.Ranges>25. <telerik:GaugeRange Min="0"26. Max="20"27. IndicatorBackground="Red" />28. <telerik:GaugeRange Min="20"29. Max="40"30. IndicatorBackground="OrangeRed" />31. <telerik:GaugeRange Min="40"32. Max="100"33. IndicatorBackground="LimeGreen" />34. </telerik:HorizontalLinearScale.Ranges>35. </telerik:HorizontalLinearScale>36.</telerik:RadHorizontalLinearGauge>5 Answers, 1 is accepted
0
Hello Robin,
Another way to hide the labels is to set the LabelFormat property of the HorizontalLinearScale to an empty string.
As for moving the tick lines to the bottom, you can set the MajorTickLocation, MinorTickLocation and MiddleTickLocation properties of the scale to Inside.
Please let me know if this provides the expected result.
Regards,
Dilyan Traykov
Progress Telerik
Another way to hide the labels is to set the LabelFormat property of the HorizontalLinearScale to an empty string.
<telerik:HorizontalLinearScale Min="0" Max="100" LabelFormat="" LabelLocation="CenterInside">As for moving the tick lines to the bottom, you can set the MajorTickLocation, MinorTickLocation and MiddleTickLocation properties of the scale to Inside.
<telerik:HorizontalLinearScale Min="0" Max="100" LabelFormat="" LabelLocation="CenterInside" MajorTickLocation="Inside" MinorTickLocation="Inside" MiddleTickLocation="Inside">Please let me know if this provides the expected result.
Regards,
Dilyan Traykov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Robin
Top achievements
Rank 1
Rank 1
answered on 25 Jul 2018, 02:13 PM
Thanks mate! That solved the problem :-)
Do you also know how I can get the following two lines also above the bar? (see the red circle)
0
Hello Robin,
Could you please share the setup with which these lines appear at your end as they're not visible when using the code snippet from your first reply?
Thanks in advance for your cooperation on the matter.
Regards,
Dilyan Traykov
Progress Telerik
Could you please share the setup with which these lines appear at your end as they're not visible when using the code snippet from your first reply?
Thanks in advance for your cooperation on the matter.
Regards,
Dilyan Traykov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Robin
Top achievements
Rank 1
Rank 1
answered on 26 Jul 2018, 06:18 AM
I now have the following code:
01.<telerik:RadHorizontalLinearGauge Width="250"02. Height="100"03. telerik:StyleManager.Theme="Windows8">04. <telerik:HorizontalLinearScale Min="0"05. Max="100"06. LabelFormat=""07. LabelLocation="CenterInside"08. MinorTickLocation="Inside"09. MiddleTickLocation="Inside"10. MajorTickLocation="Inside">11. <telerik:HorizontalLinearScale.Indicators>12. <telerik:BarIndicator Value="100"13. UseRangeColor="True" />14. </telerik:HorizontalLinearScale.Indicators>15. <telerik:HorizontalLinearScale.CustomItems>16. <Border BorderBrush="#FF606060"17. BorderThickness="1,0"18. telerik:ScaleObject.Value="50"19. telerik:ScaleObject.Location="OverCenter"20. telerik:ScaleObject.RelativeHeight="0.14*"21. telerik:ScaleObject.RelativeWidth="0.8*">22. <Border.LayoutTransform>23. <RotateTransform Angle="90" />24. </Border.LayoutTransform>25. </Border>26. </telerik:HorizontalLinearScale.CustomItems>27. <telerik:HorizontalLinearScale.Ranges>28. <telerik:GaugeRange Min="0"29. Max="20"30. IndicatorBackground="Red" />31. <telerik:GaugeRange Min="20"32. Max="40"33. IndicatorBackground="OrangeRed" />34. <telerik:GaugeRange Min="40"35. Max="100"36. IndicatorBackground="LimeGreen" />37. </telerik:HorizontalLinearScale.Ranges>38. </telerik:HorizontalLinearScale>39. </telerik:RadHorizontalLinearGauge>0
Hello Robin,
I'm attaching the result I observe with the code snipped you provided.
Could you please check whether there are any styles or code-behind which may be displaying those markers?
Regards,
Dilyan Traykov
Progress Telerik
I'm attaching the result I observe with the code snipped you provided.
Could you please check whether there are any styles or code-behind which may be displaying those markers?
Regards,
Dilyan Traykov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.