使用 WPF ItemsControl 虚拟化仅为可见项加载数据答案

【问题标题】：Using WPF ItemsControl Virtualization to load data only for visible items使用 WPF ItemsControl 虚拟化仅为可见项加载数据
【发布时间】：2017-07-24 19:08:36
【问题描述】：

我们有一个像这样的 ItemsControl 设置

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

MainViewModel 为：

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));
        }
    }
}

以及该行的 ViewModel

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++;
    }
}

我们如何实现只更新可见项目？当虚拟面板中的项目被回收时，有什么方法可以得到通知？

【问题讨论】：

我会绑定“IsVisibly”属性，并在必要时基于该启动/停止计时器。

标签： c# wpf virtualization

【解决方案1】：

这可能有效（请参阅：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;
        }
    }
}

使用以下 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>

【讨论】：