Note that there are some explanatory texts on larger screens.

plurals
  1. POWP7 Listbox items out of sync when scrolling
    text
    copied!<p>I have a page that has a listbox with the following item template as follows:</p> <pre><code>&lt;ListBox x:Name="test"&gt; &lt;ListBox.ItemTemplate&gt; &lt;DataTemplate&gt; &lt;Grid MaxHeight="108" Margin="0,0,0,10"&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="4" /&gt; &lt;ColumnDefinition Width="auto" /&gt; &lt;ColumnDefinition Width="*" /&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;Rectangle Height="108" Grid.Column="0" Fill="{Binding Color}"/&gt; &lt;Image Source="{Binding Image}" Height="108" Width="108" Grid.Column="1" HorizontalAlignment="Left" Stretch="UniformToFill"/&gt; &lt;StackPanel Grid.Column="2"&gt; &lt;TextBlock Text="{Binding Title}" TextWrapping="NoWrap" /&gt; &lt;TextBlock Text="{Binding SubHeading}" TextWrapping="NoWrap" /&gt; &lt;TextBlock Text="{Binding Body}" TextWrapping="Wrap" /&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;/DataTemplate&gt; &lt;/ListBox.ItemTemplate&gt; &lt;/ListBox&gt; </code></pre> <p>On the OnNavigatedTo event of the page, I set the item source of the list box to an observable collection of about 20 items.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>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?</p> <p>Thanks for anyhelp on this.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload