Compact horizontal gauge

[Twistur]

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

[Andrey]

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

[Twistur]

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>

[Andrey]

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

[Twistur]

Great pointers! And this is exactly what I need. Thanks so much Andey!