Doesn't Render Properly When INotifyPropertyChanged Has Less Items Than Previous

[Richard Crane]

I have a scenario where I binding to the SfListView using the MVVM pattern.  I do a search which changes the items the list is bound too.  Everything changed; however, it looks like the control does not get cleared out properly.  It almost seems like a UI virtualization issue.  Here is the scenario.

Step #1 - Search returns a list of 1 item.

Result:  One item shown in list.

Step #2 - Search returns a list of 100 items.

Result: 100 items shown in the list.  List is scrollable for all items.

Step #3 - Repeat Step #1 search.

Result:  Many items shown in the list with the first item being the results from Step #1 and the remaining onscreen items from Step #2.  List is not scrollable since it seems to think that there is only one item (which there should be) in the list but there are many other items shown on screen.

*** XAML below ***

<StackLayout Margin="15">
            <SearchBar x:Name="searchBar"
                       Placeholder="Enter name of swimmer"
                       SearchCommand="{Binding SearchCommand}"
                       SearchCommandParameter="{Binding Source={x:Reference searchBar}, Path=Text}"
                       TextChanged="SearchBar_OnTextChanged"/>

            <sync:SfListView x:Name="listView"
                       Margin="0"
                       Padding="0"
                       SelectionMode="Single"
                       BackgroundColor="#F0F0F0"
                       ItemSpacing="5,5,5,0"
                       IsScrollBarVisible="False"
                       ItemsSource="{Binding Swimmers}">
                <Grid Padding="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0" Grid.Row="0" Text="{Binding FullName}" Style="{DynamicResource TitleStyle}" />
                    <Label Grid.Column="0" Grid.Row="1" Text="{Binding ClubCode}" Style="{DynamicResource SubtitleTextStyle}" />
                </Grid>
                <sync:SfListView.ItemSize>
                    <OnPlatform x:TypeArguments="x:Double">
                        <OnPlatform.Android>
                            <OnIdiom x:TypeArguments="x:Double"
                                     Phone="60"
                                     Tablet="60" />
                        </OnPlatform.Android>
                        <OnPlatform.iOS>
                            <OnIdiom x:TypeArguments="x:Double"
                                     Phone="60"
                                     Tablet="60" />
                        </OnPlatform.iOS>
                    </OnPlatform>
                </sync:SfListView.ItemSize>
                <sync:SfListView.ItemTemplate>
                    <DataTemplate>
                        <Frame CornerRadius="0" OutlineColor="CornflowerBlue" Padding="8" >
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="20" />
                                    <RowDefinition Height="20" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Label Grid.Column="0" Grid.Row="0" Text="{Binding FullName}" Style="{DynamicResource TitleStyle}" />
                                <Label Grid.Column="0" Grid.Row="1" Text="{Binding ClubCode}" Style="{DynamicResource SubtitleTextStyle}" />
                            </Grid>
                        </Frame>
                    </DataTemplate>
                </sync:SfListView.ItemTemplate>
            </sync:SfListView>
            <!--<ListView ItemsSource="{Binding Swimmers}"
                   HasUnevenRows="true"
                   ItemTapped="OnListViewItemTapped"
                   ItemSelected="OnListViewItemSelected">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid Padding="10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Label Grid.Column="0" Grid.Row="0" Text="{Binding FullName}" Style="{DynamicResource TitleStyle}" />
                                <Label Grid.Column="0" Grid.Row="1" Text="{Binding ClubCode}" Style="{DynamicResource SubtitleTextStyle}" />
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>-->
        </StackLayout>  

*** C# code below ***

public List<Swimmer> Swimmers
        {
            get => _swimmers;
            private set
            {
                _swimmers = value;

                Device.BeginInvokeOnMainThread(() =>
                {
                    RaisePropertyChanged(()=> Swimmers);
                });
            }
        }  

Attachment: Archive_c560b5fd.zip

[Richard Crane]

*** Trim downed the XAML and removed some debugging, problem still exists ***

        <StackLayout Margin="15">
            <SearchBar x:Name="searchBar"
                       Placeholder="Enter name of swimmer"
                       SearchCommand="{Binding SearchCommand}"
                       SearchCommandParameter="{Binding Source={x:Reference searchBar}, Path=Text}"
                       TextChanged="SearchBar_OnTextChanged" />

            <sync:SfListView x:Name="listView"
                       Margin="0"
                       Padding="0"
                       SelectionMode="Single"
                       BackgroundColor="#F0F0F0"
                       ItemSpacing="5,5,5,0"    
                       IsScrollBarVisible="False"
                ItemSize="60"
                       ItemsSource="{Binding Swimmers}">

                <sync:SfListView.ItemTemplate>
                    <DataTemplate>
                        <Frame CornerRadius="0" OutlineColor="CornflowerBlue" Padding="8" >
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="20" />
                                    <RowDefinition Height="20" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Label Grid.Column="0" Grid.Row="0" Text="{Binding FullName}" Style="{DynamicResource ListItemTextStyle}" />
                                <Label Grid.Column="0" Grid.Row="1" Text="{Binding ClubCode}" Style="{DynamicResource ListItemDetailTextStyle}" />
                            </Grid>
                        </Frame>
                    </DataTemplate>
                </sync:SfListView.ItemTemplate>
            </sync:SfListView>
        </StackLayout>  

[Dinesh Babu Yadav]

Hi Richard, 

 

Sorry for the inconvenience. 

 

Based on the given information and code example, we have checked the reported issue with our sample by filtering the items using search bar in both code behind and MVVM pattern using behaviors with similar scenarios. Unfortunately, we could not replicate the reported issue at our end. And, we suspect that the issue may arise by binding the SearchBar and refreshing the items with MVVM pattern. So, we have prepared the sample for your reference to filter the items in SfListView using MVVM pattern (Behaviors) which may guide you to resolve the issue at your end. You can download the sample from the below link. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/135281/ze/Sample-1501959261  

 

Could you please check with the above sample? If the issue still replicates, we suggest you to reproduce the issue in the above sample and share us the replication procedure which would help us to analyze the issue better and update you an appropriate solution. Also, please share the Xamarin Forms and SfListView versions which is used at your application. 

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav 

 

[Richard Crane]

I figured it out.  It was the SfListViewRenderer.Init().

[Muthu Kumaran Gnanavinayagam]

Hi Richard, 

 

Thanks for the valuable response.  

 

Regards, 

G.Muthu kumaran.