This is a migrated thread and some comments may be shown as answers.

RadHorizontalLinearGauge hide labels and move the lines to the bottom

5 Answers 23 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
Robin
Top achievements
Rank 1
Robin asked on 23 Jul 2018, 01:01 PM

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

Sort by
0
Dilyan Traykov
Telerik team
answered on 25 Jul 2018, 02:06 PM
Hello Robin,

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
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
Dilyan Traykov
Telerik team
answered on 25 Jul 2018, 03:11 PM
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
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
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
Dilyan Traykov
Telerik team
answered on 26 Jul 2018, 03:00 PM
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
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.
Tags
Gauges
Asked by
Robin
Top achievements
Rank 1
Answers by
Dilyan Traykov
Telerik team
Robin
Top achievements
Rank 1
Share this question
or