Question

I have ItemsControl with VirtualizingStackPanel as items panel like this:

<ItemsControl Style="{StaticResource ItemsControl}" Name="itemsControl" 
              Margin="0,100,0,0" HorizontalAlignment="Stretch" Height="80">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBox  />                    
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>                    
                <VirtualizingStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
</ItemsControl>

Style is following:

<Style x:Key="ItemsControl" TargetType="ItemsControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ItemsControl">
                <ScrollViewer VerticalScrollBarVisibility="Hidden" 
                              HorizontalScrollBarVisibility="Visible">
                    <ItemsPresenter />
                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I set a collection with 100.000 elements as ItemsSource and get really good performance. Everything is fine except of one thing. When I input text in one of the text boxes and then start to scroll I see that that text appears everywhere throughout the list!

I understand what the VirtualizingStackPanel does. It’s continuously loading elements that become visible as we scroll. I understand some aspects of it’s virtualizing technique but I have no idea how to understand this strange behavior. I failed to find good doc’s on WPF/Silverlight virtualization, so, please, explain me what is going on

Answer 1

VirtualizingStackPanel does not actually continiously load elements. Instead, it re-uses the existing elements (controls) and simply replaces the DataContext behind them.

So if you have an VirtualizingStackPanel with 100,000 items, and only 10 are visible at a time, it usually renders about 14 items (extra items for a scroll buffer). When you scroll, the DataContext behind those 14 controls gets changed, but the actual controls themselves will never get replaced.

If you do something like enter Text in TextBox #1, and that TextBox.Text is not bound to anything, then the Text will always show up because the control is getting re-used. If you bind the TextBox.Text to a value, then the DataContext will change when you scroll which will replace the displayed Text.