Compact horizontal gauge

5 posts, 0 answers
  1. Twistur
    Twistur avatar
    28 posts
    Member since:
    Jun 2011

    Posted 26 Sep 2012 Link to this post

    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
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 27 Sep 2012 Link to this post

    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.

  3. DevCraft banner
  4. Twistur
    Twistur avatar
    28 posts
    Member since:
    Jun 2011

    Posted 27 Sep 2012 Link to this post

    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>
  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 28 Sep 2012 Link to this post

    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.

  6. Twistur
    Twistur avatar
    28 posts
    Member since:
    Jun 2011

    Posted 28 Sep 2012 Link to this post

    Great pointers! And this is exactly what I need. Thanks so much Andey!
Back to Top
DevCraft banner