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

Not Rendering Correctly in an iOS ListView

I'm having an issue with CircularGauges not rendering correctly in iOS ListViews. Each row has it's own gauge, the first couple of gauges show correctly but ones you have to scroll the values shown are incorrect. I've updated to the latest version via NuGet and am running on iOS 9.3 both simulator and device.

I've attached a sample project showing the issue.

Attachment: GaugeSampleTest_b747ca6a.zip

13 Replies

SG Swathi Gopal Syncfusion Team May 13, 2016 12:14 PM UTC

Hi James, 
Thanks for your interest in using Syncfusion products. 
We are able to reproduce the issue with “gauge not rendering correctly when pointer value changes dynamically” with the provided sample. We have already logged an issue report on this. We have analyzed this issue in possible scenarios. As mentioned in the below link, when setting RecycleElement as a caching strategy for ListView, renderers for the ListView childs were re-used thus facing the mentioned issue.  
We are currently working on some other cases to resolve this issue in both sample and control level, but it will take more time than the expected one. Also previously created UI has retained after scrolling the listview in many other cases also, for that please refer the below link,  
Thus we are able to provide a solution for this issue either after find some work around for this (in sample or control level) or else after this issue got resolved by Xamarin. We will let you know once it is fixed.  
We appreciate your patience until then.

Swathi G 

JK James Knibb May 13, 2016 01:54 PM UTC

Hi, thanks for the response. Should the last paragraph be unable to provide a solution rather than able? As if I understand you correctly, you need to wait for Xamarin to fix the issue first? I've tried using Retain and Recycle element with no change.

JO Joy Oyiess Rex  K Syncfusion Team May 16, 2016 12:29 PM UTC

Hi James,

As mentioned earlier we have already logged a report for this in our database, where we need to check the possibilities to overcome the issue with listView available in Xamarin. We have already tried the suggested changes with BindingContextChanged in both caching strategies. As ViewRenderer of certain UI elements are maintained by the list view while using the custom cells for the listView item, the mentioned issue reproduced. As we are facing an issue with Xamarin list view itself in the mentioned scenario, we are able to provide you the solution only after we find the workaround for this. We will let you know, once the implementation has been done. We appreciate your patience until then.

Please let us know, if you need any concerns.

Joy Rex.

JD Jeff Dalby July 13, 2016 12:36 AM UTC

Has any progress been made on this?  I am running into this issue as well.  Also the Gauge is rendering with a Vertical line to the right of the gauge on iOS in a listview.  This doesn't happen on Android.

SP Subburaj Pandian Veluchamy Syncfusion Team July 13, 2016 01:09 PM UTC

Hi Jeff,

Thank you for your interest in Syncfusion products.

Query 1:
We have checked with the latest Xamarin packages the mentioned issue “CircularGauge not rendering properly in ListView” in Xamarin Forms (iOS) not yet resolved with Xamarin. We will let you once the issue got resolved.

Query 2:
we are unable to understand your query with “Gauge is rendering with vertical line to right in ListView” issue, could you please share more details related to this query along with its reproducing procedure and screenshot (if possible) with us? It will be very helpful for us to understand your requirement clearly and update the response.

Subburaj Pandian V.

JD Jeff Dalby July 13, 2016 06:10 PM UTC

Apologies for not being more clear.  

Create a listview.

for the view cell do something like this:

                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="2*"/>
                        <ColumnDefinition Width="1*"/>
                      <ContentView Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"  Padding="1.5" Margin="2" BackgroundColor="Blue">
                        <ContentView BackgroundColor="White" Padding = "5" > <!--this content view is required because sfcirculargauge doesn't support padding-->
                          <gauge:SfCircularGauge HeightRequest="100" WidthRequest="100" BackgroundColor="White">
                            <gauge:Header TextSize="8" Text="{i18n:Translate ToolBoxPageGoalGaugeHeaderText}" Position=".5,.8" ForegroundColor="Blue"/>
                            <gauge:Scale StartAngle="135" SweepAngle="270" StartValue="0" MinorTicksPerInterval="1" EndValue="100" Interval="25" RimThickness="1" LabelFontSize="6" LabelPostfix="%" LabelOffset=".28" RimColor="Blue" LabelColor="Blue">
                                <gauge:NeedlePointer Type="Bar" Color="Blue" KnobRadius="2" KnobColor="Blue" LengthFactor=".65" Thickness="2" Value="{Binding Progress}"></gauge:NeedlePointer>
                                <gauge:TickSettings Color="Blue" Length="3" Thickness="1.5" Offset="0" />
                                <gauge:TickSettings Color="Blue" Length="5" Thickness="2" Offset="0"  />
                      <Label Grid.Row="0" Grid.Column="1" Text="{Binding name}" Margin="2,5,2,5"/>
                      <Label Grid.Row="0" Grid.Column="2" Text="{Binding Deadline, Converter={StaticResource DateTimeConverter}, ConverterParameter=d}" Margin="2,5,2,5"/>
                      <StackLayout Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Margin="0,5,0,5">
                        <Label Text="Test Text" Margin="2,0,2,0"/>
                        <Label Text="MoreTest"/>
                        <Label Text="Yup it's a Test"/>
                        <Label Text="Did you know we are testing?"/>

For that example I've removed a bunch of the bindings and styles we use so it's not the prettiest but it will show the results. Which is something like this:

Notice the vertical line at the right edge of the gauge?   If I replace the gauge with a white boxview it goes away.  To me it seems that the layout code is off by a few pixels or something.  If I don't have that second Content view which is used to add some space between the border created by the outer content view that line is hidden in the border...but it looks bad since the gauge is right against the border.  On Android that vertical line doesn't show up using the same code.

JD Jeff Dalby July 13, 2016 06:41 PM UTC

Just to add one more bit.  IN testing I've found if I add a margin to the SfCircularGauge the spacing will show up, but that line is still there right against the edge of the gauge.  So it's definitely happening within the gauge control.  Also I've got a gauge on another page using that same technique to create a border around it, but that page isn't using a listview. It works fine, so my guess is an issue on laying out within a listview. 

SP Subburaj Pandian Veluchamy Syncfusion Team July 14, 2016 01:47 PM UTC

Hi Jeff,

We have checked with your provided code example and we are unable to reproduce the mentioned issue “Additional vertical line added while adding CircularGauge in the listview” in Xamarin.Forms (iOS) from our side. We are not handling any line oriented scenarios with Gauge and we suspect that the issue may occurs while placing the multiple layouts in the listview. We have prepared the sample with your provided code example and also attached the screenshot for the same. Please find the below sample link,

Sample Link: GaugeCustomSample

Could you please modify the provided sample along with its reproducing procedure? It will be helpful for us to analyze on your requirement and provide you a possible solution.

Subburaj Pandian V.

JD Jeff Dalby July 19, 2016 12:06 AM UTC

Turns out is is related to the other post I had about CircularGauges not rendering with a visibility change.  In this case the listview is in a stack layout that is not visible on startup.  I've attached a modified version that duplicates the issue.  All you have to do is tap the button at the bottom to display the listview and you'll see what I'm talking about.

Attachment: GaugeCustomSample1009681003modified_d5cd1abe.zip

JD Jeff Dalby July 19, 2016 12:12 AM UTC

I should also add I've already worked around this by getting rid of the border I had been trying to make surrounding the gauge, but it would be good to know the cause in case in the future I can't change the design requirements.

SP Subburaj Pandian Veluchamy Syncfusion Team July 19, 2016 07:30 AM UTC

Hi Jeff,

Query 1: “ListView in StackLayout not visible”

We had analyzed your given code example and think that the mentioned issue “ListView in StackLayout not visible in Startup” occurs due to StakLayout visibility sets as false initially (IsVisible="False"). Also, we cannot found any issue with the ListView visibility changing in the StackLayout.

<StackLayout x:Name="MyStack" Grid.Row="0" VerticalOptions="FillAndExpand" Margin="5,0,5,0" BackgroundColor="White" Spacing="5" IsVisible="False">

Query 2: “Additional Vertical line added issue”

For Additional vertical line added in the ListView, it occurs due to setting the Margin in the StackLayout (Margin="5,0,5,0"). By changing or removing the margin from StackLayout, this issue can be resolved.

Both the mentioned issue occurs in the sample has application related. If you have found any Gauge related issue with your requirement, please revert us with more information. It would be helpful to proceed further.

Subburaj Pandian V.

JD Jeff Dalby July 19, 2016 04:20 PM UTC

What you have listed as question one must be some misunderstanding.  I don't have an issue with a listview not appearing in a stacklayout.  I was simply stating that in this case the issue with the horizontal line occurs when I have the listview within a stack layout that initially has its visibility set to false. 

I understand that the line issue is due to the margin setting, This morning I've now run into it outside of a listview when setting a margin on a stacklayout as well. The horizontal line issue only occurs with a SfCircularGauge,  If you swap the gauge out out for a boxview the line goes away.  Do you have plans to fix SfCircularGauge so it can work if there is a View enclosing it which has a Margin setting?

SP Subburaj Pandian Veluchamy Syncfusion Team July 20, 2016 12:01 PM UTC

Hi Jeff,

#Vertical line issue

In your initial query dated July 13, 2016, you had mentioned about a vertical line, but in your previous update you have mention about horizontal line. Could you please once again confirm us on this issue whether you have issue with vertical or horizontal line?

We were able to reproduce the vertical line from the provided code snippet, where gauge control is hosted in a ContentView with some padding. For it you have also specifically set the size for gauge control (through HeightRequest and WidthRequest). So, in order to resolve your issue your code snippet can be modified as follows,


<ContentView Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Padding="1.5" Margin="2" BackgroundColor="Blue">
<ContentView Padding = "5" HeightRequest="20" WidthRequest="20" BackgroundColor="White" >

<gauge:SfCircularGauge >
<!-- add scale to gauge control based on your requirement-->


#Padding for Circular Gauge

As Padding property represents the distance between an element and its child elements, it is available in Layout and its derived classes, whereas SfCircularGauge control is of type View, so you can use Margin property to achieve your requirement.

If the given solution doesn’t meet your requirement, please give us more information along with screenshots if possible. This will help us to analyze your requirement and provide a solution.

Subburaj Pandian V.

Live Chat Icon For mobile
Up arrow icon