Gauge throws exception on Android with Xamarin.Forms 1.4 (and no binding on iOS)

[Ken Ross]

I'm working with Xamarin Forms 1.4 [upgrade was necessary for other features] and I'm running into serious problems with the gauge control. I was working primarily against iOS and the control renders fine there but I couldn't get the binding to work in order for the needle to correctly show the value from the ViewModel property. I checked all the latest forum posts on this subject and was trying several workarounds involving setting the gauge and pointer BindingContext, etc. Nothing was working.

SO, I then switched over to Android to see if it was working there and much to my surprise it just throws an exception [seems to be related to sizing calculation]. Even a basic gauge like the following throws an exception - comment it out and the app runs:

                <guage:SfCircularGauge>
                    <gauge.SfCircularGauge.Scales>
                        <gauge.Scale StartValue="0" EndValue="100" Interval="10" StartAngle="135" SweepAngle="230"
                                      RimColor="#FFFB0101" RimThickness="10" />
                    </gauge.SfCircularGauge.Scales>
                </guage:SfCircularGauge> 

I'm using the latest Syncfusion assemblies (13.1451.0.21). Obviously this is quite critical - I can't move forward at all on Android and I still have my binding issue on iOS to try and resolve.

Any work-around or patch is GREATLY appreciated.

[Helmut Lubik]

I've the same problems. No binding on iOS.
That's very critical.

[Nijamudeen Mohamed Sulaiman]

Hi Ken Ross,

Thanks for your interest in Syncfusion Products.

1. Regarding Xamarin.Android Exception:

While checking the provided code snippet we have found that gauge has misspelled as “guage” and “.” is used Instead of “:”. We have modified the provided code snippet as follows.

Xaml:
<gauge:SfCircularGauge>

<gauge:SfCircularGauge.Scales>

<gauge:Scale StartValue="0"

EndValue="100" Interval="10"

StartAngle="135" SweepAngle="230"

RimColor="#FFFB0101" RimThickness="10" />

</gauge:SfCircularGauge.Scales>

</gauge:SfCircularGauge>

We have prepare a sample based on your provided information. Please find the sample below.

Sample link: Xamarin_Gauge.zip

2. Regarding Xamarin.iOS Binding Context Issue:

We are unable to reproduce the binding context issue in Xamarin.iOS. We have prepared a sample for Gauge pointers dynamically update the pointer value in SfGauge control (Xamarin.iOS). Please find the sample below.

Sample Link: Xamarin.iOS_Binding.zip

If the provided Samples does not meet your requirement, could you please provide us more details about the issue and its replication procedure along with sample or screenshots (if possible)? It will be very helpful for us to analyse on it and provide you the possible solution.

Please let us know, if there is any queries.

Regards,
Nijamudeen M.

[Helmut Lubik]

Hi Nijamudeen M.,
I've download your Xamarin.iOS_Binding.zip sample and it worked out of the box. But you're using Xamarin.Forms 1.3.1.6296. So I updated XF to the latest stable Version (1.4.1.6349 which I use) and I see only a white screen on iPhone Simulator.

Please Could You attach a newer zip file with the latest XF Version, so I can it try out of the box ???
I'm working with SyncFusion 13.1.0.21

Thanks
Helmut

[Ken Ross]

Thanks for the quick reply - it helped!

For the Android crash issue I was able to use your example to narrow down the root cause. As the exception hinted at, it has to do with size calculations; the gauge isn't able to work out it's sizing within the context of my layout on Android (a few layers of Grids, StackLayout, and ScrollView). This works fine on iOS but on Android it throws. The work-around is to set the HeightRequest of the gauge. I say this is only a work-around because a) the gauge works on iOS without it and b) I need the gauge to automatically size to the available space to account for different screen sizes.

For the iOS binding issue, thanks for the sample but it's not too helpful for my situation. I really need a sample that shows how to accomplish this with a XAML layout; I've tried to adapt your code but it's just too different structurally from a XAML version for me to connect the dots. The sample does prove that binding *can* be done, but doesn't help me understand why the code I have now works fine for binding under Android but doesn't work at all under iOS.

Thanks much!

[Nijamudeen Mohamed Sulaiman]

Hi @Helmut,

Sorry for the inconvenience Caused.

We have updated the Xamarin forms package to the mentioned Version 1.4.1.6349 in the attached sample. We have found that the issue occurred due to the behavior of VerticalOptions property of StackLayout in the specified Xamarin Forms version. Please refer the below code snippet to resolve that issue.

C#
Content = new StackLayout

{

VerticalOptions = LayoutOptions.FillAndExpand,

Children = {

new Gauge()

}

};

We have modified the provided sample and the sample can be downloaded from the below link.

Link: Gauge_iOS_Binding.zip


Please let us know, if you have any queries.

Regards,
Nijamudeen M.

[Nijamudeen Mohamed Sulaiman]

Hi Ken Ross,

Regarding layout behavior of gauge control in Xamarin (Android), Please have follow-up with the related incident. And we will provide the XAML binding sample for SfCircularGauge in Xamarin.Forms in the same incident within one business day (16^th Apr, 2015). We appreciate your patience until then.

Regards,
Nijamudeen M.

[Ken Ross]

Ok, I've created two incidents: 137927 (XAML binding) and 137926 (Circular Gauge sizing). Hopefully we can get both of these resolved quickly...really starting to run into a hard deadline.

Thanks!

Ken

[Nijamudeen Mohamed Sulaiman]

Hi Ken,

Based on the implementation of CircularGauge in Xamarin, it renders in a squarified manner, so while set GaugeType as default, it will occupy the entire space. Therefore while set the StartAngle and SweepAngle of the Scale as 180 there will be an empty space at the bottom of the gauge, when set the GaugeType as "North" with the same StartAngle and SweepAngle the empty space will be shared in the top and bottom portion of the gauge.

In order to add string value in that empty space (anywhere inside the gauge), you can use the Headers support available in the CircularGauge. And also we have bind the slider value to Needle pointer value of SfCircularGauge using XAML for that please refer the below code snippet.

XAML

<StackLayout

VerticalOptions="FillAndExpand"

Orientation="Vertical" >

<gauge:SfCircularGauge x:Name="gauge1"

VerticalOptions="FillAndExpand"

GaugeType="North">

<gauge:SfCircularGauge.Scales>

<gauge:Scale

StartValue="0"

EndValue="100"

Interval="10"

StartAngle="180"

SweepAngle="180"

RimColor="#FFFB0101"

RimThickness="100" LabelColor="White" >

<gauge:Scale.Pointers>

<gauge:NeedlePointer x:Name="needle" Value="60" LengthFactor="0.8"

Color="White" Thickness="5"

KnobColor="White" KnobRadius="20" />

</gauge:Scale.Pointers>

</gauge:Scale>

</gauge:SfCircularGauge.Scales>

</gauge:SfCircularGauge>

<Slider x:Name="slider1" Grid.Column="1" Scale="0.7" BindingContext="{x:Reference Name=needle}" Maximum="100" Value="{Binding Value, Mode=TwoWay}" BackgroundColor="Purple" />

</StackLayout>

If the provided Information does not meet your requirement, could you please provide us more details along with screenshots (if possible)? It will be very helpful for us to analyse on it and provide you the possible solution.

Note: Further Information have follow up with the corresponding incident.

Please let us know, if there is any queries.

Regards,
Nijamudeen M.