windows phone 7 - ListBox data virtualization is not taking effect

Question

I had 1000 items from xml and loaded them in a List object. List is databound to ListBox which is horizontally oriented so user can flip through items left to right or right to left. Since number of items are huge my app was quitting probably due to excessive memory usage. If I reduced the items to 50 it worked.

I found this article http://shawnoster.com/blog/post/Improving-ListBox-Performance-in-Silverlight-for-Windows-Phone-7-Data-Virtualization.aspx

and then this article on data virtualization

http://blogs.msdn.com/b/ptorr/archive/2010/08/16/virtualizing-data-in-windows-phone-7-silverlight-applications.aspx

After implementing a virtualized class implementing IList I see no difference. The this[] (below) is being called 1000 times still though I expected to it be called only 30-40 times since I understand UI is already virtualized in Listbox. Why is virtualization not kicking in?

object IList.this[int index]
{
    get
    {
        if (index >= cachedItems.Count)
        {
            //replenish cache code here
        }

        return cachedItems[index];
    }
    set
    {
        throw new NotImplementedException();
    }
}

Here is the XAML portion relevant to the problem. Hope this gives the full picture of the code. Not sure if Width=Auto has anything to do with it but I can't change it otherwise my swiping stops.

<ScrollViewer HorizontalScrollBarVisibility="Auto" Margin="0,0,0,0" Width="auto" x:Name="WordsScrollview" Opacity="1"  Grid.Row="1" RenderTransformOrigin="0.5,0.5">

    <ListBox x:Name="horizontalListBox" Width="auto" Height="Auto" >

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal">
                </StackPanel>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Width="430" Text="{Binding Word}"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" TextAlignment="Center" />
                    <Image Height="290" HorizontalAlignment="Center" Name="image1" Stretch="Fill"  Width="430" Source="{Binding ImageFile}" Margin="10,50,10,0" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>

        <ListBox.Background>
            <SolidColorBrush />
        </ListBox.Background>

    </ListBox>

</ScrollViewer>

Answer 1

Here is the XAML that is causing UI Virtualization to finally kick in.

        <ListBox x:Name="horizontalListBox"   Height="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" >

                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal">

                        </VirtualizingStackPanel>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>

                            <StackPanel>
                                <TextBlock Width="430" Text="{Binding Word}"  TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" TextAlignment="Center" />

                                <Image Height="290" HorizontalAlignment="Center" Name="image1" Stretch="Fill"  Width="430" Source="{Binding ImageFile}" Margin="10,50,10,0" />
                               </StackPanel>

                    </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBox.Background>
                    <SolidColorBrush />
                </ListBox.Background>
            </ListBox>