BarIndicator disappear when value = 100

3 posts, 0 answers
  1. TuDN
    TuDN avatar
    6 posts
    Member since:
    Dec 2016

    Posted 05 Jun Link to this post

    Hi, I have problem with RadialGauge. When I set BarIndicator value = 100 and it disappear. Please help me!

     

    <telerik:RadRadialGauge x:Name="radGauge">
                <telerik:RadialScale x:Name="radialScale"
                                     IsInteractive="True"
                                     RangeLocation="OverOutside"
                                     LabelRotationMode="None"
                                     Radius="0.9"
                                     StartAngle="270"
                                     SweepAngle="360"
                                     Max="100"
                                     MinorTickBackground="Transparent"
                                     MiddleTickBackground="Transparent"
                                     MajorTickBackground="Transparent"
                                     ShowLastLabel="False"
                                     LabelTemplate="{StaticResource CustomRadialLabelTemplate}">
                    <telerik:RadialScale.Indicators>
                        <telerik:BarIndicator
                            x:Name="bar"
                            StartWidth="0.15"
                            EndWidth="0.15"
                            EmptyFill="LightGray"
                            telerik:ScaleObject.Location="OverCenter"/>
     
                    </telerik:RadialScale.Indicators>
                </telerik:RadialScale>
            </telerik:RadRadialGauge>
  2. Dinko
    Admin
    Dinko avatar
    412 posts

    Posted 08 Jun Link to this post

    Hello Tu Do Ngoc, 

    Thank you for contacting us.

    You are getting this behavior because the min and max value are position аre positioned one above the other. You can try changing the StartAngle and SweepAngle properties so there is a space between the min and max value. Check the following example:
    <telerik:RadRadialGauge x:Name="radGauge">
        <telerik:RadialScale x:Name="radialScale"
                             IsInteractive="True"
                             RangeLocation="OverOutside"
                             LabelRotationMode="None"
                             Radius="0.9"
                             StartAngle="290"
                             SweepAngle="320"
                             Max="100"
                             MinorTickBackground="Transparent"
                             MiddleTickBackground="Transparent"
                             MajorTickBackground="Transparent"
                             ShowLastLabel="False">
            <telerik:RadialScale.Indicators>
                <telerik:BarIndicator
                    x:Name="bar" Value="100"
                    StartWidth="0.15"
                    EndWidth="0.15"
                    EmptyFill="LightGray"
                    telerik:ScaleObject.Location="OverCenter"/>
     
            </telerik:RadialScale.Indicators>
        </telerik:RadialScale>
    </telerik:RadRadialGauge>

    Give this approach a try and let us know if it works for you.

    Regards,
    Dinko
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. TuDN
    TuDN avatar
    6 posts
    Member since:
    Dec 2016

    Posted 16 Jun Link to this post

    Hello Dinko

    Thank for your answer.

    Actually, I need this Gauge to display process from 0 to 100%. So I cannot have a space between the min and max value because when value is 100, the Gauge will become a cycle. But I think I have to accept this limitation of Radial Gauge

Back to Top