在ListCollectionView上缓慢刷新wpf ItemsControl

Question

我遇到的问题是我的列表集合视图需要3-4秒才能更新。我想我的虚拟化配置是正确的；但是，如果不正确，请指出。我将我的itemssource绑定到一个ICollectionView。

如果我在BindingViewModel中将循环设置为3000+，那么UI需要很长时间才能启动，即使构建ViewModels只需要不到一秒钟的时间。

我不知道如何附加文件，所以我将发布重现此问题的所有示例代码：

BigList.Xaml：`

    <Style x:Key="textBlockBaseStyle" TargetType="TextBlock">
        <Setter Property="Foreground" Value="Blue"/>
    </Style>

    <Style x:Key="headerButtonStyle" TargetType="Button">
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Foreground" Value="Blue"/>
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="DarkBlue"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <Style x:Key="borderBaseStyle" TargetType="Border">
        <Setter Property="BorderBrush" Value="Blue"/>
    </Style>

    <!--these two styles let us cascadingly style on the page without having to specify styles
        apparently styles don't cascade into itemscontrols... in the items control we must reference via key -->

    <Style TargetType="TextBlock" BasedOn="{StaticResource textBlockBaseStyle}"/>
    <Style TargetType="Border" BasedOn="{StaticResource borderBaseStyle}"/>

    <!-- hover styles -->
    <Style x:Key="onmouseover" TargetType="{x:Type Border}" BasedOn="{StaticResource borderBaseStyle}">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="DarkBlue"/>
            </Trigger>
        </Style.Triggers>
    </Style>

</UserControl.Resources>
<Grid>
    <StackPanel Width="390">
    <!-- Header-->
    <Border  BorderThickness="1,1,1,1">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="55"/>
                <ColumnDefinition Width="70"/>
                <ColumnDefinition Width="70"/>
                <ColumnDefinition Width="70"/>
                <ColumnDefinition Width="70"/>
            </Grid.ColumnDefinitions>

            <Button Command="{Binding SortFirstNameCommand}" Style="{StaticResource headerButtonStyle}" Grid.Column="1" >
                <TextBlock   TextAlignment="Left" Text="First"/>
            </Button>
            <Button Style="{StaticResource headerButtonStyle}" Grid.Column="2" >
                <TextBlock TextAlignment="Left"  Text="Last"/>
            </Button>
            <Button Style="{StaticResource headerButtonStyle}"  Grid.Column="3" >
                <TextBlock TextAlignment="Left"  Text="Activity"/>
            </Button>
            <Button Style="{StaticResource headerButtonStyle}"  Grid.Column="4">
                <TextBlock TextAlignment="Left"  Text="Last Activity"/>
            </Button>
        </Grid>
    </Border>
    <Border BorderThickness="1,0,1,1">
        <ItemsControl VirtualizingStackPanel.IsVirtualizing="True"  VirtualizingStackPanel.VirtualizationMode="Recycling" ItemsSource="{Binding UsersAvailForEmail}" MaxHeight="400">
            <ItemsControl.Template>
                <ControlTemplate>
                    <ScrollViewer x:Name="ScrollViewer" HorizontalScrollBarVisibility="Disabled" 
                                                          VerticalScrollBarVisibility="Auto" IsDeferredScrollingEnabled="True" Padding="{TemplateBinding Padding}">
                        <ItemsPresenter/>
                    </ScrollViewer>
                </ControlTemplate>
            </ItemsControl.Template>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Style="{StaticResource onmouseover}" BorderThickness="0,0,1,1">
                        <CheckBox Margin="20,5" IsChecked="{Binding IsSelected}">
                            <CheckBox.Content>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Width="20"/>
                                    <TextBlock Width="70" Style="{StaticResource textBlockBaseStyle}" Grid.Column="1" Text="{Binding FirstName}"/>
                                    <TextBlock Width="70" Style="{StaticResource textBlockBaseStyle}" Grid.Column="2" Text="{Binding LastName}"/>
                                    <TextBlock Width="70" Style="{StaticResource textBlockBaseStyle}" Grid.Column="3" Text="{Binding Action}"/>
                                    <TextBlock Width="60" Style="{StaticResource textBlockBaseStyle}" Grid.Column="4" Text="{Binding ActionId}"/>
                                </StackPanel>
                            </CheckBox.Content>
                        </CheckBox>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

    </Border>
</StackPanel>


</Grid>

`

BindingViewModel.cs：

using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Collections.ObjectModel;
using System.Windows.Data;

namespace LargeItemsCollection
{
    public class BindingViewModel : INotifyPropertyChanged
    {
        ObservableCollection<EmailPersonViewModel> _usersAvail = new ObservableCollection<EmailPersonViewModel>();
        ListCollectionView _lvc = null;

        public BindingViewModel()
        {

            for (int i = 0; i < 4000; i++)
            {
                _usersAvail.Add( new EmailPersonViewModel { FirstName = "f" +i.ToString() , LastName= "l" + i.ToString(), Action= "a" + i.ToString(), ActionId="ai" + i.ToString(), IsSelected=true });
            }

             _lvc = new ListCollectionView(_usersAvail);

        }

        public ICollectionView UsersAvailForEmail
        {
            get { return _lvc; }
        }


        /// <summary>
        /// Raised when a property on this object has a new value.
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>
        /// Raises this object's PropertyChanged event.
        /// </summary>
        /// <param name="propertyName">The property that has a new value.</param>
        public virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = this.PropertyChanged;
            if (handler != null)
            {
                var e = new PropertyChangedEventArgs(propertyName);
                handler(this, e);
            }
        }
    }

EmailPersonViewModel.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace LargeItemsCollection
{
    public class EmailPersonViewModel
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Action { get; set; }
        public string ActionId { get; set; }

        public bool IsSelected { get; set; }

        public EmailPersonViewModel()
        {

        }

    }
}

MainWindow.xaml：

<Window x:Class="LargeItemsCollection.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:LargeItemsCollection"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <local:BigList/>
    </Grid>
</Window>

MainWindow.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace LargeItemsCollection
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new BindingViewModel();
        }
    }
}

Answer 1

好的，请看这篇文章：

Virtualizing a WPF ItemsControl

我没有WPF虚拟化中的Scrollviewer.CanScroll='true'堆栈面板似乎没有它就不能工作。

感谢所有发布了解决方案的人，帮助我一路走来。你们没有解决方案，所以我没有把它标记为正确的；但是，我给了你们很高的评价，因为你们两个在这一过程中都提供了帮助。下面是最终的XAML，这样您就可以看到itemscontrol需要的样子：

  <ItemsControl ScrollViewer.CanContentScroll="True"  VirtualizingStackPanel.VirtualizationMode="Recycling" ItemsSource="{Binding UsersAvailForEmail}" MaxHeight="400">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                            <ItemsControl.Template>
                    <ControlTemplate>
                        <ScrollViewer x:Name="ScrollViewer" HorizontalScrollBarVisibility="Disabled" 
                                                              VerticalScrollBarVisibility="Auto" IsDeferredScrollingEnabled="True" Padding="{TemplateBinding Padding}">
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </ControlTemplate>
                </ItemsControl.Template> 
                <ItemsControl.ItemTemplate>
                    <DataTemplate>

                        <Border Style="{StaticResource onmouseover}" BorderThickness="0,0,1,1">
                            <CheckBox Margin="20,5" IsChecked="{Binding IsSelected}">
                                <CheckBox.Content>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Width="20"/>
                                        <TextBlock Width="70" Style="{StaticResource textBlockBaseStyle}" Grid.Column="1" Text="{Binding FirstName}"/>
                                        <TextBlock Width="70" Style="{StaticResource textBlockBaseStyle}" Grid.Column="2" Text="{Binding LastName}"/>
                                        <TextBlock Width="70" Style="{StaticResource textBlockBaseStyle}" Grid.Column="3" Text="{Binding Action}"/>
                                        <TextBlock Width="60" Style="{StaticResource textBlockBaseStyle}" Grid.Column="4" Text="{Binding ActionId}"/>
                                    </StackPanel>
                                </CheckBox.Content>
                            </CheckBox>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

Answer 2

虚拟化堆栈面板虚拟化可视化树中对象的创建，而不是ItemsSource中对象的创建。如果创建控件绑定到的视图模型对象的集合需要4秒，那么无论控件是否使用虚拟化，显示控件都需要4秒。

由于要对集合进行排序，因此必须实例化集合中的所有项，然后控件才能显示其中的任何项。无论构建所有4000个对象需要多长时间，在这里都是固定成本。

测试这一点的一种简单方法是创建一个用于构建对象集合的命令，以及另一个用于显示绑定到该集合的items控件的命令。然后，您可以在UI中查看，并查看分别完成这些操作所需的时间。

如果这确实是问题所在，你可以专注于加速对象的创建(例如，通过对访问耗时的属性使用惰性计算，假设它们不被排序使用)，或者可能在后台填充集合。

Answer 3

我猜这是由于您所采取的排序方法。在底层，它使用反射，这是一个相当大的瓶颈。考虑使用ListCollectionView类的CustomSort属性。此answer中有更多链接。

希望这能有所帮助。