logo标签列表

ListCollectionView下WPF ItemsControl刷新缓慢

wpf
3
我遇到的问题是我的ListCollectionView更新需要3-4秒。我认为我已经正确配置了虚拟化，但如果有不正确的地方，请指出来。我的ItemsSource绑定到一个ICollectionView。
如果我将循环设置为3000+，即使构建ViewModels只需要不到一秒钟，BindingViewModel UI启动也需要很长时间。
我不知道如何附加文件，所以我会发布所有能够重现此问题的示例代码：
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();
        }
    }
}
3个回答
3

根据此帖子：

虚拟化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>
2
虚拟堆栈面板虚拟化了视觉树中对象的创建，而不是ItemsSource中的对象。如果创建控件绑定的视图模型对象集合需要4秒钟，无论是否使用虚拟化，显示控件都需要4秒钟。 由于正在对集合进行排序，必须在控件可以显示任何内容之前实例化集合中的所有项。构造4000个对象所需的时间成本在此处是固定的。 测试的简单方法是创建一个命令来构建对象集合和一个命令来显示与集合绑定的项控件。然后您可以在UI中观察并查看分别完成这些工作需要多长时间。 如果确实存在问题，则可以专注于加快对象的创建速度（例如，通过对耗时访问的属性使用延迟评估，假设它们未被排序使用），或者可能在后台填充集合。
谢谢回复。我在我的对象创建上放了一个计时器，时间不到一秒钟（大部分是通过引用传递EmailPersonViewModel而没有数据库访问）。我在一个示例项目中重现了这个问题，并将其发布在上面...我将尝试调整UI虚拟化设置，看看会发生什么。 - Dave Hanson
1

我猜这是由于您采取的排序方法造成的。在底层，它使用反射，这是一个瓶颈。考虑使用 ListCollectionView 类的 CustomSort 属性。更多链接请参见 答案。

希望能对您有所帮助。

我添加了CustomSort，它减少了排序时间；然而上面描述的Grid仍需要5秒才能出现。我认为这与对象构造或在datatemplate中使用网格有关。如果我在调用堆栈中的延迟期间按下ctrl+alt+break，我只会得到[external code]。 - Dave Hanson
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接