RadHorizontalGauge does not take up full horizontal width of container

2 posts, 0 answers
  1. Barry
    Barry avatar
    1 posts
    Member since:
    Apr 2017

    Posted 05 May Link to this post

    Whenever I add a RadHorizontalGauge to a container element, it only takes up about 85% of the horizontal space.  Is there any way of making it take up the full width of the container?  I have a gauge in a StackLayout, and I want the gauge to take up the max available width - here is my XAML...

    <StackLayout BackgroundColor="#ff0000" Padding="10,10,10,0" Spacing="0" VerticalOptions="Start">
        <telerikGauges:RadHorizontalGauge x:Name="profileProgressGauge">
            <telerikGauges:RadGaugeBase.Axis>
                <telerikGauges:GaugeLinearAxis Minimum="0" Maximum="100" Step="5" ShowLabels="False" StrokeThickness="0" />
            </telerikGauges:RadGaugeBase.Axis>
            <telerikGauges:RadGaugeBase.Indicators>
                <telerikGauges:GaugeBarIndicator Value="100" Fill="#ffffff" Position="End" StartCap="Oval" EndCap="Oval" />
                <telerikGauges:GaugeBarIndicator Value="40" Fill="#73d016" Position="End" StartCap="Oval" EndCap="Oval" />
            </telerikGauges:RadGaugeBase.Indicators>
        </telerikGauges:RadHorizontalGauge>
    </StackLayout>

     

    If you look at the first attached picture (the output of the XAML above), the gauge seems to occupy only 85-90% of the available width.  If you look at second attached picture, taken from the latest Progress Telerik UI for Xamarin sample app in the AppStore/GooglePlay, you'll see the same thing - the horizontal gauge doesn't appear to take up all the available horizontal space.

    Is this a bug?

  2. Nikolay Demirev
    Admin
    Nikolay Demirev avatar
    136 posts

    Posted 10 May Link to this post

     Hello Barry,

    I have looked and the Progress Telerik UI for Xamarin sample app and on the first HorizontalGauge there really is some margin. But the margin is intentional. If you look at the tree gauges you will notice that only the first one has that margin and it has a TextIndicator. In order to place the text exactly where it needs to be without cutting it or misplace it the gauge needs margin. You can turn off this behavior by setting the ShowLabels property of the GaugeLinearAxis to False.

    I have tested your sample XAML and it works because the ShowLabels property is set to False.

    I hope this helps.

    Regards,
    Nikolay Demirev
    Telerik by Progress
    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 Feedback Portal and vote to affect the priority of the items
Back to Top