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. Image for the cookie policy date

SfLinearGauge padding, border, dynamic color

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.

3 Replies

RA Rachel A Syncfusion Team 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. 



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

Hi,

Thanks a lot. My gauge is looking good now.


RA Rachel A Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon