WP7 Listbox items out of sync when scrolling

Question

I have a page that has a listbox with the following item template as follows:

<ListBox x:Name="test">
    <ListBox.ItemTemplate>
        <DataTemplate>
                <Grid MaxHeight="108" Margin="0,0,0,10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="4" />
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Rectangle Height="108" Grid.Column="0" Fill="{Binding Color}"/>
                    <Image Source="{Binding Image}" Height="108" Width="108" Grid.Column="1" HorizontalAlignment="Left" Stretch="UniformToFill"/>
                    <StackPanel Grid.Column="2">
                        <TextBlock Text="{Binding Title}" TextWrapping="NoWrap" />
                        <TextBlock Text="{Binding SubHeading}" TextWrapping="NoWrap" />
                        <TextBlock Text="{Binding Body}" TextWrapping="Wrap" />
                    </StackPanel>
                </Grid>
         </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

On the OnNavigatedTo event of the page, I set the item source of the list box to an observable collection of about 20 items.

All is well and the list is populated, however when I scroll up or down the list, the items appear to look out of sync on the UI. e.g the text that was shown on the first list item appears on the last item in the list box, sometimes there's duplicates, and everytime you swipe up or down the items are different.

I have debugged the listbox items, and I can see that correct objects are being bound to the right items. So it's only what is shown on the UI that is incorrect.

I have also tried explicitly using the standard stackpanel as opposed to a virtualizationstackpanel and that works around the issue by making sure all items are loaded in memory.

I don't believe that removing virtualization is the answer. There must be a root cause. However it may be acceptable as my listbox will never really contain more than 30 items.

On another page, I do the same thing with the silverlight toolkit longlistselector, and have the same issue. However I am not sure of how to remove virtualization on a longlistselector.

So to summarize, what might be the underlying issue that causes the listbox items to not update the UI properly when scrolling? If removing virtualization is the only answer, how may I do this on the longlistselector?

Thanks for anyhelp on this.

Answer 1

As it turns out, it was a binding issue, and nothing to to with the listbox whatsoever.

I was (unknowingly) removing the binding of some properties in the item template, after I had bound to them (in some other bit of code) Therefore every time the listbox recycled the containers for new items, it could not update it with the correct info.

Thanks all for your help