We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

SfLinearGauge padding, border, dynamic color

Thread ID:

Created:

Updated:

Platform:

Replies:

148584 Oct 25,2019 01:41 PM UTC Nov 4,2019 11:04 AM UTC Xamarin.Forms 3
loading
Tags: SfLinearGauge
Nelissen Benoît
Asked On October 25, 2019 01:41 PM UTC

Hi,

I use a SfLinearGauge to see the battery level. I disable labels and ticks on the LinearScale.
But when I put it in a StackLayout there is a huge padding between the element SfLinearGauge and BarPointer. I can't delete it.
How can I do this ?

Is there a way to set a border on LinearScale ? I tried with SfBorder but I can't use it with the padding problem.

I want to set the bar color dynamically based on the value. Example : below 30% red, above 30% green. Is there triggers/threshold ?
I have to set color by code.

Thank you.

Rachel A [Syncfusion]
Replied On October 29, 2019 08:54 AM UTC

Hi Nelissen, 
 
Greetings from Syncfusion. 
 
Query 1: Is there a way to set a border on LinearScale? I tried with SfBorder but I can't use it with the padding problem 
You can remove the horizontal padding (left and right) by setting ScaleOffset property of LinearScale as Zero and you can remove vertical padding (top and bottom) by setting same value for SfLinearGauge’s HeightRequest, LinearScale’s ScaleBarSize and BarPointer’s Thickness property. Please find the snippet below 
 
[XAML]: 
 
<StackLayout VerticalOptions="Center"> 
    <border:SfBorder BorderColor="Black" BorderWidth="2" > 
        <gauge:SfLinearGauge HeightRequest="20"> 
            <gauge:SfLinearGauge.Scales> 
                <gauge:LinearScale MinimumValue="0" 
                                   MaximumValue="100" 
                                   ShowLabels="False" 
                                   ShowTicks="False" 
                                   ScaleBarColor="LightGray" 
                                   ScaleOffset="0" 
                                   ScaleBarSize="20"> 
                    <gauge:LinearScale.Pointers> 
                        <gauge:BarPointer Value="{Binding PointerValue}" 
                                          Color="{Binding PointerValue, Converter={StaticResource ValueToColorConverter}}" 
                                          Thickness="20" 
                                          /> 
                    </gauge:LinearScale.Pointers> 
                </gauge:LinearScale> 
            </gauge:SfLinearGauge.Scales> 
        </gauge:SfLinearGauge> 
    </border:SfBorder> 
 
 
Query 2: I want to set the bar color dynamically based on the value 
There is no any direct way to achieve this. So, we have achieved this requirement by binding converter for BarPointer’s Color property. Please find the below snippet 
 
[XAML]: 
<ContentPage.Resources> 
     <ResourceDictionary> 
         <local:ValueToColorConverter x:Key="ValueToColorConverter"/> 
     </ResourceDictionary> 
</ContentPage.Resources> 
 
 
<gauge:LinearScale.Pointers> 
    <gauge:BarPointer Value="{Binding PointerValue}" 
                      Color="{Binding PointerValue, Converter={StaticResource ValueToColorConverter}}" 
                      /> 
</gauge:LinearScale.Pointers> 
 
 
[C#]: 
 
public class ValueToColorConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        if ((double)value < 30) 
        { 
            return Color.Red; 
        } 
        else 
        { 
            return Color.Green; 
        } 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        return value; 
    } 
} 
 
 
Also, we have prepared the sample for the above requirements. Please find the sample from the below link. 
 
Output: 
Value above 30: 
 
Value below 30: 
 
 
Please let us know if you have any other queries. 
 
Regards, 
Rachel. 


Nelissen Benoît
Replied On November 4, 2019 10:35 AM UTC

Hi,

Thanks a lot. My gauge is looking good now.

Rachel A [Syncfusion]
Replied On November 4, 2019 11:04 AM UTC

Hi Nelissen, 
 
Thank you for your confirmation. 
 
Please let us know if you have any further queries. 
 
Thanks, 
Rachel. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon