Is it possible to remove the space around the GAUGE

[Mohammed]

Hi,

This the first time I use SF controls, I added circularGauge to my page but it creates huge space around it.

Is possible to remove this space? have a look at attachments.

Thanks 

Attachment: gauge_61cc1c8f.rar

[Michael Prabhu M]

Hi Mohammed, 

 

Query: Need to remove the additional space around the gauge. 

 

By default, gauge will render by taking the entire minimum height/width from the available size. Hence with the default Offset value of 1, gauge will occupy minimum height/width fully. On reducing the offset value there will be an additional extra space around it. 

 

If you need to overcome this, specify the required HeightRequest and WidthRequest to the gauge and set the Offset value to 1. This will remove the additional space around the gauge. 

 

We have prepared a sample for the same. You can download the sample from the below link. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/140098/ze/CircularGaugeSample582627009 

 

Output screenshot: 

 

Thanks, 

Michael 

[Mohammed]

Thank you, Michael, that's exactly what I'm looking for 

[Michael Prabhu M]

Hi Mohammed, 

 

Glad we could help, feel free to contact us anytime if you need any other assistance from us. 

 

Thanks, 

Michael  

[Mark]

I have a similar question with the LinearGauge, i can't find a solution to my problem with. I'd like for the range to take the whole width of the control up. In the picture below, the blue area is the background of the control and I can't work out what controls that:

Here's my code:

<gauges:SfLinearGauge HeightRequest="30" BackgroundColor="Blue" HorizontalOptions="FillAndExpand">

<gauges:SfLinearGauge.Scales>

<gauges:LinearScale ScaleBarColor="Grey" 

CornerRadiusType="Both"

CornerRadius="10"

MaximumValue="100"

MinimumValue="0"

ScaleBarSize="30"

ShowTicks="False"

ShowLabels="False">

<gauges:LinearScale.Pointers>

<gauges:BarPointer Value="5"

   CornerRadiusType="Both"

   CornerRadius="10"

   Thickness="30"/>

</gauges:LinearScale.Pointers>

</gauges:LinearScale>

</gauges:SfLinearGauge.Scales>

</gauges:SfLinearGauge>

[Rachel A]

Hi Mark, 

 

Greetings from Syncfusion. 

 

You can remove the horizontal padding (left and right) by setting ScaleOffset property of LinearScale as Zero. Please find the snippet as below. 

 

[XAML]: 

… 

<gauges:LinearScale ScaleOffset="0" 

                              CornerRadiusType="Both" 

                              CornerRadius="10" 

                              MaximumValue="100" 

                              MinimumValue="0" 

                              ScaleBarSize="30" 

                              ShowTicks="False" 

                              ShowLabels="False"> 

    <gauges:LinearScale.Pointers> 

        <gauges:BarPointer Value="5" 

                                        CornerRadiusType="Both" 

… 

 

Please find the sample from the below link. 

https://www.syncfusion.com/downloads/support/forum/140098/ze/CircularGauge1278669802 

 

Please find the below User Guide link for more information about ScaleOffset property of SfLinearGuage. 

https://help.syncfusion.com/xamarin/linear-gauge/scales#scale-offset 

 

Output: 

 

 

Please let us know if you have any other queries. 

 

Regards, 

Rachel. 

[Mark]

I just came upon this whilst looking for the answer to my question, realised i never finished and said thanks it 

[Ramya Soundar Rajan]

Hi Mark, 

 

If you need any further assistance, please let us know. 

 

Regards, 

Ramya