Forums Ultimate UI for Xamarin
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Dan Wager
15
Linear Gauge Formatting Help
posted

I'm trying to use a linear gauge in Xamarin Forms and make it look like this:

So far I've been able to get it like this (I know the purple isn't above, but I made it to show the extra space at the end):

But the label text is cut off and the graph border has extra space on each end.  If I make the graph huge then nothing gets cut off,

but that also does not fit my design requirements.  I need help with the label text not getting cut off and eliminating the space and the start and end of the graph.  My XAML code currently is:

<ig:XamLinearGauge NeedleShape="Triangle" NeedleBrush="#FFFFFF" x:Name="TestGauge" FormatLabel="TestGauge_FormatLabel"
                   NeedleBreadth="7" NeedleInnerExtent="0.70" NeedleOuterExtent="0.8" MinimumValue="0"
                   MaximumValue="100" Value="{Binding NeedleValue}" Margin="0"
                   LabelInterval="{Binding NeedleValue}" BackgroundColor="#0070b9"
                   BackingOutline="#FFFFFF" BackingStrokeThickness="1" BackingInnerExtent=".32" BackingOuterExtent=".77"
                   LabelExtent="0.85" HeightRequest="35"
                   Interval="100" TickStartExtent=".5" TickEndExtent="1" TickBrush="#00FFFFFF" MinorTickCount="0"
                   BackingBrush="#0070b9" FontBrush="#FFFFFF" NeedleOutline="#00FFFFFF">
    <ig:XamLinearGauge.Ranges>
        <ig:LinearGraphRange StartValue="0" EndValue="35" Brush="#4BBF81" />
        <ig:LinearGraphRange StartValue="35" 
                             EndValue="75" Brush="#ffcc66" />
        <ig:LinearGraphRange StartValue="75" 
                             EndValue="100" Brush="#592c82" />
        </ig:XamLinearGauge.Ranges>
    </ig:XamLinearGauge>

I do have an event in the code behind to change the label text.  Any help would be appreciated.

Parents
  • 34430
    Verified Answer
    Offline posted

    Hello Dan,

    I have been investigating into your requirements with the XamLinearGauge in Xamarin.Forms and I have some information for you on this matter.

    First, in order to remove the space at the start and end of the graph, I would recommend setting the ScaleStartExtent and the ScaleEndExtent properties. For example, if you were to set these properties to 0 and 1, respectively, this would make your XamLinearGauge take up all available horizontal space.

    Regarding the Label, you can move the range area of the XamLinearGauge by providing a RangeInnerExtent and RangeOuterExtent property. These properties take values between -1 and 1. For example, if you were to set the RangeInnerExtent to -1 and the RangeOuterExtent to 0, this would have the XamLinearGauge’s ranges extent from the bottom of its container to the halfway point.

    I would recommend playing with these properties to see where a good fit for the XamLinearGauge is for you.

    Please let me know if you have any other questions or concerns on this matter.

Reply Children
No Data