views:

484

answers:

2

I have an ItemsControl containing a list of data that I would like to virtualize, however VirtualizingStackPanel.IsVirtualizing="True" does not seem to work with an ItemsControl.

Is this really the case or is there another way of doing this that I am not aware of?

To test I have been using the following block of code:

<ItemsControl 
VirtualizingStackPanel.IsVirtualizing="True" 
ItemsSource="{Binding Path=AccountViews.Tables[0]}">
<ItemsControl.ItemTemplate>
    <DataTemplate>
        <TextBlock Initialized="TextBlock_Initialized"  
                   Margin="5,50,5,50" Text="{Binding Path=Name}" />
    </DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

If I change the ItemsControl to a ListBox, I can see that the Initialized function only runs a handful of times (the huge margins are just so I only have to go through a few records), however as an ItemsControl every item gets initialized. I have tried setting the ItemsControlPanelTemplate to a VirtualizingStackPanel but that doesn't seem to help.

A: 

It is just that the default ItemsPanel isn't a VirtualizingStackPanel. You need to change it:

<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>
Abe Heidebrecht
Thanks, but I already tried this and it didn't work.
Rachel
+4  A: 

There's actually much more to it than just making the ItemsPanelTemplate use VirtualizingStackPanel. The default ControlTemplate for ItemsControl does not have a ScrollViewer, which is the key to virtualization. Adding to the the default control template for ItemsControl (using the control template for ListBox as a template) gives us the following:

<ItemsControl
    VirtualizingStackPanel.IsVirtualizing="True"
    ScrollViewer.CanContentScroll="True"
    ItemsSource="{Binding Path=AccountViews.Tables[0]}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock
                Initialized="TextBlock_Initialized"
                Text="{Binding Path=Name}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Template>
        <ControlTemplate>
        <Border
            BorderThickness="{TemplateBinding Border.BorderThickness}"
            Padding="{TemplateBinding Control.Padding}"
            BorderBrush="{TemplateBinding Border.BorderBrush}"
            Background="{TemplateBinding Panel.Background}"
            SnapsToDevicePixels="True">
                <ScrollViewer
                    Padding="{TemplateBinding Control.Padding}"
                    Focusable="False">
                    <ItemsPresenter
                        SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                </ScrollViewer>
            </Border>
            </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>

(BTW, a great tool for looking at default control templates is Show Me The Template)

Things to notice:

You have to set ScrollViewer.CanContentScroll="True", see here for why.

Also notice that I put VirtualizingStackPanel.VirtualizationMode="Recycling". This will reduce the numbers of times TextBlock_Initialized is called to however many TextBlocks are visible on the screen. You can read more on UI virtualization here .

EDIT: Forgot to state the obvious: as an alternate solution, you can just replace ItemsControl with ListBox :) Also, check out this Optimizing Performance on MSDN page and notice that ItemsControl isn't in the "Controls That Implement Performance Features" table, which is why we need to edit the control template.

DavidN
+1 for the Show Me the Template link. What a great tool!
Metro Smurf
Thank you, that is exactly the sort of thing I was looking for! I was looking for a different kind of selection behavior than a listbox and at the time I thought it would be easiest to do with an items control.
Rachel
ListView works for this also.
Scott A. Lawrence