在ListCollectionView上慢速wpf ItemsControl刷新

Question

我遇到的问题是我的listcollectionview需要3-4秒才能更新。我想我已经正确配置了虚拟化;但是，请指出它是否不正确。我将itemssource绑定到ICollectionView。

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

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

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

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

由于您要对集合进行排序，因此必须先实例化集合中的所有项目，然后控件才能显示其中任何项目。构建所有4,000个对象需要很长时间才是固定成本。

测试此方法的一种简单方法是创建构建对象集合的命令，以及显示绑定到集合的项目控件的第二个命令。然后，您可以在用户界面中观看，看看分别完成这些事情需要多长时间。

如果这实际上是问题所在，您可以专注于加速对象创建（例如，对访问耗时的属性使用延迟评估，假设它们没有被排序使用），或者可能填充在后台收集。

Answer 2

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

希望这有帮助。

Answer 3

根据这篇文章，好吧：

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>