How do I set needle thickness in a SemicircleGauge

2 posts, 1 answers
  1. Håkan
    Håkan avatar
    183 posts
    Member since:
    May 2011

    Posted 21 Nov 2014 Link to this post

    Hi,

    I have a RadSemicircleNorthGauge where I want to have a thicker needle.
    I use a tooltip and it is very hard to make it display when the needle is just one pixels wide.

    Here is my XAML:
    <telerik:RadSemicircleNorthGauge OuterBorderBrush="Transparent" OuterBackground="Transparent" InnerBorderBrush="Transparent" InnerBackground="Transparent" Foreground="{StaticResource TextBrush}" Margin="0,0,0,5">
                        <telerik:SemicircleNorthScale Center="0.5,1" Radius="0.9" MajorTickStep="20" Foreground="{StaticResource TextBrush}" FontSize="9" StartAngle="190" SweepAngle="160">
                            <telerik:SemicircleNorthScale.Indicators>
                                <telerik:Needle Name="Needle" Background="{StaticResource SelectedBrush}" IsAnimated="True" Duration="00:00:00.5" TooltipFormat=" {Value|F1} %" />
                                <telerik:BarIndicator x:Name="BarIndicator" Background="{StaticResource ShiftAbsenceBrush}" Value="{Binding Value, ElementName=Needle}" />
                                <telerik:Pinpoint Background="{StaticResource SelectedBrush}" BorderBrush="{StaticResource SelectedBrush}" />
                            </telerik:SemicircleNorthScale.Indicators>
                        </telerik:SemicircleNorthScale>
                    </telerik:RadSemicircleNorthGauge>


    Regards,
    Håkan

  2. Answer
    Sia
    Admin
    Sia avatar
    667 posts

    Posted 24 Nov 2014 Link to this post

    Hello,

    You can use the ScaleObject.RelativeWidth property to specify the width of the needle relatively to the scale. For example:
    <telerik:Needle Name="Needle" Background="Black" IsAnimated="True" Duration="00:00:00.5" TooltipFormat=" {Value|F1} %" telerik:ScaleObject.RelativeWidth ="0.05*" />

    You can also set an integer value, which will be applied:
    <telerik:Needle Name="Needle" Background="Black" IsAnimated="True" Duration="00:00:00.5" TooltipFormat=" {Value|F1} %" telerik:ScaleObject.RelativeWidth ="5" />

    This property accepts XAML notation which is similar to the one that is used for the RowDefinition.Height property. For example:
    1. telerik:ScaleObject.RelativeWidth=”5” sets needle's width to be 5 pixels.
    2. telerik:ScaleObject.RelativeWidth=”0.05*” sets needle's width to be 0.05% of the scale relative width.

    I hope this helps.

    Regards,
    Sia
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
Back to Top