SfLinearGauge padding, border, dynamic color

[Nelissen Benoît]

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]

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. 

https://www.syncfusion.com/downloads/support/forum/148584/ze/LinearGauge1165734565  

 

Output: 

Value above 30: 

 

Value below 30: 

 

 

Please let us know if you have any other queries. 

 

Regards, 

Rachel. 

[Nelissen Benoît]

Hi,

Thanks a lot. My gauge is looking good now.

[Rachel A]

Hi Nelissen, 

 

Thank you for your confirmation. 

 

Please let us know if you have any further queries. 

 

Thanks, 

Rachel.