RelativeWidth Gauge Needle Don`t Work

5 posts, 0 answers
  1. Alexandre Vitorelli
    Alexandre Vitorelli avatar
    3 posts
    Member since:
    Jan 2010

    Posted 15 Mar 2010 Link to this post

    Hello,

    I`m try to use two needle in gauge to make a style like a clock but when I add second needle with relativewidth equal 0.1 this needle don`t change width, but if I use relativeheight the needle change height.

    Thank You!

    Alexandre Vitorelli
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 16 Mar 2010 Link to this post

    Hi Alexandre,

    You can find clock style radial gauge example in the Time Monitor example. The RelativeWidth have no effect for the needle indicator. Width of the needle is controlled by its Location and Offset properties (see "Time Monitor" example).

    Kind regards,
    Andrey Murzov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. DevCraft banner
  4. eSightEnergy
    eSightEnergy avatar
    7 posts
    Member since:
    Apr 2008

    Posted 16 Mar 2010 Link to this post

    Im also having trouble with getting a needle to be sized properly but I didnt want to start a new thread on the same issue.

    The code from the example only shows the use of "Offset" being used, but it doesnt seem to do anything on mine, any help?

    Im making a clock, so there are 3 needles on the page and so I would like them to be different sizes

    Page code:

     
            <StackPanel x:Name="uxClockPanel">  
                <control:RadGauge x:Name="uxClockGauge" Width="600" Height="600" Visibility="Collapsed">  
                    <gauge:RadialGauge x:Name="uxClockObject">  
                        <gauge:RadialScale x:Name="uxClockScale12"  
                                           Min="0"  
                                           Max="12"  
                                           LabelRotationMode="None"  
                                           StartAngle="270"  
                                           SweepAngle="359.999"  
                                           StartWidth="0.05"  
                                           EndWidth="0.05"  
                                           StrokeThickness="0"  
                                           MajorTicks="11"  
                                           MiddleTicks="1"  
                                           MinorTicks="1"  
                                           StartTickOffset="1"  
                                           IsLabelRotated="False"  
                                >  
                            <gauge:RadialScale.MinorTick>  
                                <gauge:MinorTickProperties Background="Transparent" Foreground="Transparent" />  
                            </gauge:RadialScale.MinorTick>  
                            <gauge:RadialScale.MiddleTick>  
                                <gauge:MiddleTickProperties />  
                            </gauge:RadialScale.MiddleTick>  
                            <gauge:RadialScale.Label>  
                                <gauge:LabelProperties  
                                    x:Name="uxClockScaleLabelProperties"  
                                    Location="Outside"  
                                    FontFamily="Arial"  
                                    Format="{}{}"  
                                    UseRangeColor="False"  
                                    Offset="0.01"  
                                />  
                            </gauge:RadialScale.Label>  
     
                            <gauge:IndicatorList x:Name="uxClockHourIndicatorList">  
                                <gauge:Needle x:Name="uxClockNeedleHour" IsAnimated="True" Offset="0.25" />  
                            </gauge:IndicatorList>  
                        </gauge:RadialScale>  
                        <gauge:RadialScale x:Name="uxClockScale60"  
                                           Min="0"  
                                           Max="60"  
                                           LabelRotationMode="None"  
                                           StartAngle="270"  
                                           SweepAngle="359.999"  
                                           StartWidth="0.05"  
                                           EndWidth="0.05"  
                                           StrokeThickness="0"  
                                           StartTickOffset="1"  
                                           IsLabelRotated="False"  
                                           Foreground="Transparent"  
                                           >  
                            <!--Hide the numbers-->  
                            <gauge:RadialScale.MajorTick>  
                                <gauge:MajorTickProperties Background="Transparent" Foreground="Transparent" />  
                            </gauge:RadialScale.MajorTick>  
                            <gauge:RadialScale.MinorTick>  
                                <gauge:MinorTickProperties Background="Transparent" Foreground="Transparent" />  
                            </gauge:RadialScale.MinorTick>  
                            <gauge:RadialScale.MiddleTick>  
                                <gauge:MiddleTickProperties Background="Transparent" Foreground="Transparent" />  
                            </gauge:RadialScale.MiddleTick>  
                            <gauge:RadialScale.Label>  
                                <gauge:LabelProperties Foreground="Transparent">  
                                </gauge:LabelProperties>  
                            </gauge:RadialScale.Label>  
                              
                            <gauge:IndicatorList x:Name="uxClockIndicatorList">  
                                <gauge:Needle x:Name="uxClockNeedleMinute" IsAnimated="True" Offset="0.5" />  
                                <gauge:Needle x:Name="uxClockNeedleSecond" IsAnimated="True" Offset="0.1">  
     
                                </gauge:Needle>  
                            </gauge:IndicatorList>  
                        </gauge:RadialScale>  
                    </gauge:RadialGauge>  
                </control:RadGauge>  
            </StackPanel> 

  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 16 Mar 2010 Link to this post

    Hello Stephen,

    This is the expected behavior. When you don't specify Location property for the Needle indicator it uses the OverCenter value by default. This value specifies that arrow of needle must be positioned at the center of the radial scale. The Offset value has no effect in this case, because there is no direction to offset arrow to for this location.
    To be able offset needle you have to choose one of the locations which specify direction of offset: Outside, OverOutside, OverInside, CenterInside, CenterOutside, or Inside.
    For example:
    <gauge:Needle x:Name="uxClockNeedleMinute" IsAnimated="True" Location="CenterInside" Offset="0.3" Value="10" />
    <gauge:Needle x:Name="uxClockNeedleSecond" IsAnimated="True" Location="CenterInside" Offset="0.1" Value="15">

    Greetings,
    Andrey Murzov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Alexandre Vitorelli
    Alexandre Vitorelli avatar
    3 posts
    Member since:
    Jan 2010

    Posted 16 Mar 2010 Link to this post

    Thank You!!! The Offset property was changed and the gauge needle change size.

    Alexandre Vitorelli
Back to Top
DevCraft banner