Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

ListView : Items are duplicated

Seb_GlanumSeb_Glanum Member ✭✭

Hello everyone !
Here is my issue, on my ListView I have an button inside, when i'm clicking on it, the color change, but when i'm scrolling further in my list, some others buttons (every 5 or 7 rows) with the new color whereas I didn't do anything.

I'm using in my ListView the RecycleStrategy because I have more than 100 items.

Do you know how can I handle that ? Thanks !

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    This issue is related to the Reuse problem in Listview, You can use MVVM to fix this issue.

    You can add a property MyColor in you Model.

       public class CrossingUIModel: INotifyPropertyChanged
        {
            public int Id { get; set; }
            public string FieldValue { get; set; }
    
    
    
            private Color _myColor;
    
            public Color MyColor
            {
                get { return _myColor; }
                set
                {
                    _myColor = value;
                    OnPropertyChanged(nameof(MyColor));
                }
            }
    
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            protected virtual void OnPropertyChanged(string propertyName)
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
    
        }
    

    Then binding the MyColor to the Button's background color. Then If we want to change the color by click event, We can achieve it by Command

     <ListView x:Name="CrossingView"  HasUnevenRows="True" ItemsSource="{Binding BindCrossingUIModel, Mode=TwoWay}" CachingStrategy="RecycleElement" >
    
    
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                          <StackLayout HorizontalOptions="FillAndExpand">
                            <Entry x:Name="Fields" Text="{Binding FieldValue, Mode=TwoWay}" 
                                           ReturnType="Next" MaxLength="1" Keyboard="Numeric" 
                                           TextChanged="Fields_TextChanged" ></Entry>
                                <Button Text="change" BackgroundColor="{Binding MyColor}" Command="{ Binding BindingContext.ChangeColorCommand, Source={x:Reference Name=CrossingView} }"  CommandParameter="{Binding .}"></Button>
                           </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
    

    Then Achieve it in the viewModel.

       public ICommand ChangeColorCommand { protected set; get; }
            public MyViewModel()
            {
                CreateUI();
    
                ChangeColorCommand = new Command<CrossingUIModel>(async (key) => {
                    CrossingUIModel bill = (CrossingUIModel)key;
                    // await Navigation.PushAsync(new Page2(bill));
                    bill.MyColor = Xamarin.Forms.Color.Red;
    
                });
            }
    

    Here is a runinng gif.

    Here is my demo, you can download it.

  • Seb_GlanumSeb_Glanum Member ✭✭
    edited August 6

    Thank you ! I don't use MVVM in my app at this time but I will give it a try ! but there is a way to not using MVVM ?

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Ok, MVVM is a native development framework, it will help you to uncoupling code.

  • Seb_GlanumSeb_Glanum Member ✭✭

    Hello ! I've done MVVM in my app, I can confirm that my colors are changing ! I have notice another issue only on Android,
    I'm using an horizontal ScrollView in my ListView and it's makes my scroll duplicated in others and I have put in the model the value ScrollX, added a bindable property on my custom ScrollView to update my view with the ScrollX value model. In iOS it's run perfectly I have no cells duplicated, but on Android it's still here, do you have any ideas why I have it ?

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    I'm using an horizontal ScrollView in my ListView

    You can not put the ScrollView in the Listview as it system will confuse scrolling behavior of those two.
    You can open a new thread for this new issue.

  • Seb_GlanumSeb_Glanum Member ✭✭

    @LeonLu said:

    I'm using an horizontal ScrollView in my ListView

    You can not put the ScrollView in the Listview as it system will confuse scrolling behavior of those two.
    You can open a new thread for this new issue.

    It's working very well from my app, but it's weird that the scroll is duplicating only on Android even if I have MVVM pattern, I saw that I can make a custom renderer in android in order to fix it with GetView() to prevent this issue

  • JohnHJohnH GBMember ✭✭✭✭✭

    I would suggest that you follow @LeonLu 's suggestion and remove the scrollview as it can have unpredictable results when it contains a listview. A listview already scrolls, so the scrollview just isn't needed.
    Xamarin.Forms will do what you are asking without hacks or custom renderers. It is often best to keep things simple.

  • Seb_GlanumSeb_Glanum Member ✭✭

    @JohnH said:
    I would suggest that you follow @LeonLu 's suggestion and remove the scrollview as it can have unpredictable results when it contains a listview. A listview already scrolls, so the scrollview just isn't needed.
    Xamarin.Forms will do what you are asking without hacks or custom renderers. It is often best to keep things simple.

    My scrollview which is inside of the ViewCell is with horizontally Scroll.

    ListView has Vertically Scroll so it's not a problem in the first look.

    Replace this Listview for an CollectionView would fix the issue ?

  • JohnHJohnH GBMember ✭✭✭✭✭
    edited August 12

    Thank you for the clarification @Seb_Glanum, yes a horizontal scrollview would be fine in this situation.

    The ListView should be able to do exactly what you are asking for, we use it extensively throughout our apps on iOS, Android and UWP.

  • Seb_GlanumSeb_Glanum Member ✭✭

    Ok thanks your answer @JohnH ! Now as I said, duplicated items with my scrollview are still duplicating in Android and not on iOS. I think maybe I need to make an custom renderer ViewCell on Android plateform. What I see from right now in the shared project is that my ScrollX in a duplicated item has a different value than the property model I made (different that zero), even if I'm trying to set the method ScrollTo with ScrollX at 0 in my BindingContextChanged or OnPropertyChanged in my Custom ViewCell it's still not working.

  • JohnHJohnH GBMember ✭✭✭✭✭

    I would still just go back to basics and create a small project that replicates the issue and upload it here. If it is a bug in XF then it can get fixed and everyone benefits. If it isn't then we can learn from it too. We have many listviews and aren't seeing this issue.

    To go back to your point for a moment, you mentioned that you see duplicate items within the scrollview, you mean the scrollview within the cell right? Can you post the code/xaml for that?

  • Seb_GlanumSeb_Glanum Member ✭✭
    edited August 13

    @JohnH said:
    To go back to your point for a moment, you mentioned that you see duplicate items within the scrollview, you mean the scrollview within the cell right? Can you post the code/xaml for that?

    Yes exactly ! My scrollview is inside my ViewCell, here's a project sample of my solution : https://us.v-cdn.net/5019960/uploads/editor/te/stwva9df5ft2.rar

    I've modified @LeonLu's solution to include ScrollView in XAML MainPage !

    To create the issue with Android : scroll at least 3 differents items, and you'll see one line get duplicated every time you're scrolling to end of the listview. Also make a slow scroll in the listview to see the issue

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Did you get the issue like following GIF? If so, this issue is related to the Android listview re-useable.

  • Seb_GlanumSeb_Glanum Member ✭✭

    Yes exactly ! In the meantime, I've opened a GitHub issue (https://github.com/xamarin/Xamarin.Forms/issues/11782) and I've tried the two options that the contributor gave to me but it still not working as excepted. I've had some suspicion about the Android's ListView. Do you think it's a bug ? Is there a workaround to fix this ?

  • Seb_GlanumSeb_Glanum Member ✭✭

    Also only on iOS, I see that if I want to scroll my ListView with my finger on the button area (you need to scroll it horizontally) it's not working, I believe it's must be because of focus on my ScrollView horizontal, right ?

  • LeonLuLeonLu Member, Xamarin Team Xamurai
    edited August 18

    You open a thread in github, you can wait for DU's update.

Sign In or Register to comment.