SfLinearGauge padding, border, dynamic color

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.

Reply | Reply with quote

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]:

…

<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>

<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.

Reply | Reply with quote

Nelissen Benoît

Replied On November 4, 2019 10:35 AM UTC

Hi,

Thanks a lot. My gauge is looking good now.

Reply | Reply with quote

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.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148584	Oct 25,2019 01:41 PM UTC	Nov 4,2019 11:04 AM UTC	Xamarin.Forms	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US