CODEWITHSUNDEEP
ioslistviewxamarin.formsxamarin.ioschat
user2240342
user2240342

Reputation: 93

Updating listview text binding causes flickering on iOS using Xamarin.Forms

I am working on a Xamarin.Forms chat app which sends/receives text character by character, this means the text binding on a list view row is updated every 1-2 seconds or half second (depending on typing speed), on Android the listview item updates smoothly but on iOS it flickers/ and pulsates like a strobe light with every character entered.

Edit Replication steps: Bound a Listview's ItemSource to an ObservableCollection which updates for every new character typed in an Entry. Use DataTemplate with a label in it which displays the text typed in Entry field.

In Page.xaml

<ListView HasUnevenRows="True" ItemsSource="{Binding ObservableCollection}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.View>
                    <Grid>
                        <Label Text="{Binding Text}"/>
                    </Grid>
                </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
<Entry Text="{Binding UserText}"/>

In PageViewModel.cs

    /// <summary>
    /// Gets or sets the text entered by the user
    /// </summary>
    public string UserText
    {
        get
        {
            return this.userText;
        }

        set
        {
            this.SetProperty(ref this.userText, value);

            // Display text by updating listview
            Device.BeginInvokeOnMainThread(() =>
            {
                this.ObservableCollection.Add(userText);
            });
        }
    }

Upvotes: 1

Views: 891

Answers (2)

Christian Regli
Christian Regli

Reputation: 2256

There is a ListView.RowAnimationsEnabled property. You can use it in xaml

<ContentPage ...
         xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core">
<StackLayout>
    <ListView ... ios:ListView.RowAnimationsEnabled="false">
        ...
    </ListView>
</StackLayout>

or in code

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
...

listView.On<iOS>().SetRowAnimationsEnabled(false);

See https://learn.microsoft.com/en-us/previous-versions/xamarin/xamarin-forms/platform/ios/listview-row-animations

Upvotes: 0

user2240342
user2240342

Reputation: 93

I created a ListViewRenderer on iOS and set AnimationsEnabled = false. The flicking is now gone!

Upvotes: 2

Related Questions