Using WPF ItemsControl Virtualization to load data only for visible items

Question

We have an ItemsControl setup like this

<ScrollViewer>
    <ItemsControl ItemsSource="{Binding Items}" VirtualizingStackPanel.IsVirtualizing="True" VirtualizingStackPanel.VirtualizationMode="Recycling" >
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Data}"></TextBlock>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</ScrollViewer>

with the MainViewModel being:

public class MainViewModel : ViewModelBase
{
    public ObservableCollection<AutoUpdatingItem> Items
    {
        get;
        set;
    }

    public MainViewModel()
    {
        Items = new ObservableCollection<AutoUpdatingItem>();
        for (int i = 0; i < 1000; i++)
        {
            Items.Add(new AutoUpdatingItem(i));
        }
    }
}

and the ViewModel of the row

public class AutoUpdatingItem : ViewModelBase
{
    private readonly DispatcherTimer timer;

    private int data;
    public int Data
    {
        get { return data; }
        set { Set(ref data, value); }
    }

    public AutoUpdatingItem(int i)
    {
        Data = i;
        timer = new DispatcherTimer();
        timer.Interval = TimeSpan.FromMilliseconds(20);
        timer.Start();
        timer.Tick += Timer_Tick;
    }

    private void Timer_Tick(object sender, EventArgs e)
    {
        // Data would be fetched from WebService here
        Data++;
    }
}

How can we achieve that only the visible items are updated? Is there any way to get notified when an item in the virtualized panel is being recycled?

I'd bind 'IsVisibly' property and based on that start/stop timer when it's necessary. — Andrei Orlov, Jul 25 '17 at 03:02

score 0 · Answer 1 · answered Jul 25 '17 at 01:52

This might work (see: In WPF, how can I determine whether a control is visible to the user?):

public class AutoUpdatingItem : INotifyPropertyChanged
{
    private readonly DispatcherTimer timer;

    private int data;
    public int Data
    {
        get { return data; }
        set 
        { 
            data = value; 
            propertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Data))); 
        }
    }

    public AutoUpdatingItem()
    {
        timer = new DispatcherTimer(new TimeSpan(0,0,0,0,200), DispatcherPriority.Background, Tick, Dispatcher.CurrentDispatcher);
        timer.Stop();
    }

    private void Tick(object sender, EventArgs e)
    {
        Data++;
    }

    private event PropertyChangedEventHandler propertyChanged;
    public event PropertyChangedEventHandler PropertyChanged
    {
        add
        {
            propertyChanged += value;
            timer.Start();
        }
        remove
        {
            timer.Stop();
            propertyChanged -= value;
        }
    }
}

With the following XAML:

 <ItemsControl ItemsSource="{Binding Items}"
                  VirtualizingStackPanel.IsVirtualizing="True"
                  VirtualizingStackPanel.VirtualizationMode="Recycling" Height="500">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Data}"  />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.Template>
            <ControlTemplate>
                <Border >
                    <ScrollViewer VerticalScrollBarVisibility="Visible"
                                  CanContentScroll="True">
                        <ItemsPresenter />
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </ItemsControl.Template>
    </ItemsControl>

Using WPF ItemsControl Virtualization to load data only for visible items

1 Answers1