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

Compact horizontal gauge

4 Answers 135 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Twistur
Top achievements
Rank 1
Twistur asked on 26 Sep 2012, 05:15 PM
Hi,

How do I remove the white empty space or padding around the range? We just want a compact display, no margin/padding; just the range and the space below it for the marker.

Btw, I was able to use HorizontalLinearScale without RadHorizontalLinerGauge so my question pertains to the scale not the gauge.


Thanks

4 Answers, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 27 Sep 2012, 02:47 PM
Hi Gio,

I'm sorry but it is quite difficult to provide you with any valuable feedback having just your description. Could you, please provide us, for example, with image with desirable result or image with current result and comments what you'd like to change?

As quick suggestion I would recommend you to play with RangeLocation and RangeOffset properties of the scale. You also can try the ScaleObject.Location and ScaleObject.Offset attachable properties of the Marker.

All the best,
Andrey Murzov
the Telerik team

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

0
Twistur
Top achievements
Rank 1
answered on 27 Sep 2012, 05:06 PM
Andrey

Bellow is the markup (sorry for the format). I also attached a file showing its rendering. The one in blue enclosure is what I need to achieve. Thanks again

<Border BorderBrush="Black" BorderThickness="2">
            <telerik:HorizontalLinearScale x:Name="gauge" Height="22" Width="100" Grid.Row="1" 
                        Min="0" 
                        Max="100"
                        LabelFormat="" RangeLocation="OverOutside">
                <telerik:HorizontalLinearScale.Ranges>
                    <telerik:GaugeRange 
									Min="0" 
									Max="20"
									Background="Red"
									StrokeThickness="1"
									TickBackground="Red"
									StartWidth=".2"
									EndWidth=".2"/>
                    <telerik:GaugeRange 
									Min="20" 
									Max="80"
									Background="Green"
									StrokeThickness="1"
									TickBackground="Green"
									StartWidth=".2"
									EndWidth=".2"/>
                    <telerik:GaugeRange 
									Min="80" 
									Max="100"
									Background="Red"
									StrokeThickness="1"
									TickBackground="Red"
									StartWidth=".2"
									EndWidth=".2"/>
                </telerik:HorizontalLinearScale.Ranges>
                <telerik:HorizontalLinearScale.Indicators>
                    <telerik:Needle  Value="46"                                 
                                 telerik:ScaleObject.Offset="-0.15*"
                                 telerik:ScaleObject.RelativeWidth="0.02*"
                                 telerik:ScaleObject.RelativeHeight="0.45*" 
                                 telerik:ScaleObject.Location="OverOutside" />
                </telerik:HorizontalLinearScale.Indicators>
            </telerik:HorizontalLinearScale>
        </Border>
0
Andrey
Telerik team
answered on 28 Sep 2012, 08:04 AM
Hello Gio,

1. You've set the Width and Height property on the scale object which you definitely shouldn't do. Set it on the Border element instead.

2. You've set the Grid.Row attachable property on the scale object, but scale object is inside the Border element. So this property doesn't have any effect.

3. All scale objects use relative measurements (see details here: http://www.telerik.com/help/silverlight/radgauge-features-relative-measurements.html). Size of the scale inside the container is controlled by RelativeWidth and RelativeHeight properties. Location of the scale inside container is controlled by RelativeX and RelativeY properties.

4. You have to set StartWidth and EndWidth of the ranges so they fill the rest of the space.

5. You are using Needle indicator with linear gauge. You shouldn't do it. The Needle indicator is designed for the radial gauges. You should use Marker indicator instead.

For example:

<Border BorderBrush="Black"
            BorderThickness="2"
            Height="22" Width="100">
    <telerik:HorizontalLinearScale x:Name="gauge"
                                   Min="0"
                                   Max="100"
                                   LabelFormat=""
                                   RangeLocation="OverOutside"
                                   RelativeHeight="1"
                                   RelativeWidth="1"
                                   RelativeX="0">
        <telerik:HorizontalLinearScale.Ranges>
            <telerik:GaugeRange
                            Min="0"
                            Max="20"
                            Background="Red"
                            StrokeThickness="1"
                            TickBackground="Red"
                            StartWidth=".5"
                            EndWidth=".5"/>
            <telerik:GaugeRange
                            Min="20"
                            Max="80"
                            Background="Green"
                            StrokeThickness="1"
                            TickBackground="Green"
                            StartWidth=".5"
                            EndWidth=".5"/>
            <telerik:GaugeRange
                            Min="80"
                            Max="100"
                            Background="Red"
                            StrokeThickness="1"
                            TickBackground="Red"
                            StartWidth=".5"
                            EndWidth=".5"/>
        </telerik:HorizontalLinearScale.Ranges>
        <telerik:HorizontalLinearScale.Indicators>
            <telerik:Marker  Value="46"                                
                         telerik:ScaleObject.RelativeWidth="0.02*"
                         telerik:ScaleObject.RelativeHeight="1*"
                         telerik:ScaleObject.Location="OverCenter" />
        </telerik:HorizontalLinearScale.Indicators>
    </telerik:HorizontalLinearScale>
</Border>


Kind regards,
Andrey Murzov
the Telerik team

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

0
Twistur
Top achievements
Rank 1
answered on 28 Sep 2012, 05:05 PM
Great pointers! And this is exactly what I need. Thanks so much Andey!
Tags
Gauge
Asked by
Twistur
Top achievements
Rank 1
Answers by
Andrey
Telerik team
Twistur
Top achievements
Rank 1
Share this question
or