VirtualizingStackPanel doesn't clear the text of TextBoxes in the ItemTemplate

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

I had the same problem with radio buttons in datagird and solved it by adding separate edit template for each cell. Thanks to @Rachel, now it's clear how to solve that kind of problems — Samvel Siradeghyan, Oct 04 '11 at 14:42

score 6 · Accepted Answer · answered Oct 04 '11 at 14:16

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.

score 0 · Answer 2 · answered Oct 04 '11 at 14:36

0

Not sure how to turn off recycling directly in a VirtualizingStackPanel but this is the syntax in a ListBox. I would have posted as a comment but I wanted formatted code.

   <ListBox VirtualizingStackPanel.VirtualizationMode="Standard" />

answered Oct 04 '11 at 14:36

paparazzo

44,497
23
105
176

You can still add code lines in comments by using putting a `backtick around your code block`, although it doesn't color it or let you do multiple lines – Rachel Oct 04 '11 at 15:05
It's the key that is above the [Tab] key on a standard US keyboard. It shares a key with the Tilde (`~`). – Rachel Oct 04 '11 at 18:03

VirtualizingStackPanel doesn't clear the text of TextBoxes in the ItemTemplate

2 Answers2