有没有办法通过隐藏面板或扩展器使用虚拟化？

Question

我正在尝试提高我的 WPF 应用程序的性能，但我在使用复杂的 ItemsControl 时遇到了问题。虽然我添加了虚拟化，但仍然存在性能问题，我想我已经找到了原因。

每个项目都包含一系列可扩展区域。因此，用户在开始时会看到摘要，但可以通过展开向下钻取以查看更多信息。下面是它的外观：

如您所见，有一些嵌套的 ItemsControl。所以每个顶级项目都有一堆隐藏控件。虚拟化可防止加载屏幕外项目，但不会阻止项目本身内的隐藏项目。结果，相对简单的初始布局需要大量时间。浏览其中一些视图，87% 的时间用于解析和布局，加载需要几秒钟。

当（如果！）用户决定时，我更希望它需要 200 毫秒来展开，而不是 2 秒来加载整个页面。

真心求教。但是，我想不出使用 MVVM 添加控件的好方法。 WPF 中是否支持任何扩展器或基于可见性的虚拟化，或者我会创建自己的实现？

87% 的数字来自诊断：

Answer 1

如果你有

- Expander
      Container
          some bindings
    - Expander
          Container
              some bindings
+ Expander
+ Expander
... invisible items

那么是的，Container 和所有绑定都在视图显示时初始化（ItemsControl 为可见项创建 ContentPresenter）。

如果您想在折叠时虚拟化Expander 的内容，那么您可以使用数据模板

public ObservableCollection<Item> Items = ... // bind ItemsControl.ItemsSource to this

class Item : INotifyPropertyChanged
{
    bool _isExpanded;
    public bool IsExpanded // bind Expander.IsExpanded to this
    {
        get { return _isExpanded; }
        set
        {
            Data = value ? new SubItem(this) : null;
            OnPropertyChanged(nameof(Data));
        }
    }

    public object Data {get; private set;} // bind item Content to this
}

public SubItem: INotifyPropertyChanged { ... }

希望不用解释如何在xaml中对SubItem进行数据模板化。

如果你这样做，那么最初Data == null 并且除了Expander 之外什么都没有加载。一旦它被扩展（由用户或以编程方式）视图将创建视觉效果。

Answer 2

我想我会给出解决方案的细节，这几乎是 Sinatr 答案的直接实现。

我使用了一个内容控件，带有一个非常简单的数据模板选择器。模板选择器只是检查内容项是否为空，并在两个数据模板之间进行选择：

public class VirtualizationNullTemplateSelector : DataTemplateSelector
{
    public DataTemplate NullTemplate { get; set; }
    public DataTemplate Template { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item == null)
        {
            return NullTemplate;
        }
        else
        {
            return Template;

        }
    }
}

原因是我使用的 ContentControl 即使内容为空，仍然会布局数据模板。所以我在xaml中设置了这两个模板：

            <ContentControl Content="{Binding VirtualizedViewModel}"  Grid.Row="1" Grid.ColumnSpan="2" ><!--Visibility="{Binding Expanded}"-->
                <ContentControl.Resources>
                    <DataTemplate x:Key="Template">
                        <StackPanel>
                            ...complex layout that isn't often seen...
                        </StackPanel>
                    </DataTemplate>
                    <DataTemplate x:Key="NullTemplate"/>
                </ContentControl.Resources>
                <ContentControl.ContentTemplateSelector>
                    <Helpers:VirtualizationNullTemplateSelector Template="{StaticResource Template}" NullTemplate="{StaticResource NullTemplate}"/>
                </ContentControl.ContentTemplateSelector>
            </ContentControl>

最后，与其对子项使用全新的类，不如在您的视图模型中创建一个引用“this”的“VirtualizedViewModel”对象：

    private bool expanded;
    public bool Expanded
    {
        get { return expanded; }
        set
        {
            if (expanded != value)
            {
                expanded = value;
                NotifyOfPropertyChange(() => VirtualizedViewModel);
                NotifyOfPropertyChange(() => Expanded);
            }
        }
    }


    public MyViewModel VirtualizedViewModel
    {
        get
        {
            if (Expanded)
            {
                return this;
            }
            else
            {
                return null;
            }
        }
    }

我将 2-3 秒的加载时间减少了大约 75%，现在看起来更合理了。

Answer 3

这个简单的解决方案帮助了我：

<Expander x:Name="exp1">
   <Expander.Header>
     ...
   </Expander.Header>
   <StackPanel
      Margin="10,0,0,0"
      Visibility="{Binding ElementName=exp1, Path=IsExpanded, Converter={StaticResource BooleanToVisibilityConverter}}">
      <Expander x:Name="exp2">
        <Expander.Header>
          ...
        </Expander.Header>
        <StackPanel
          Margin="10,0,0,0"
          Visibility="{Binding ElementName=exp2, Path=IsExpanded, Converter={StaticResource BooleanToVisibilityConverter}}">

Answer 4

实现此目的的更简单方法是将内容的默认可见性更改为已折叠。在这种情况下，WPF 最初不会创建它，但只有在 Trigger 将其设置为 Visible 时才会创建它：

<Trigger Property="IsExpanded" Value="true">
  <Setter Property="Visibility"Value="Visible" TargetName="ExpandSite"/>
</Trigger>

这里的“ExpandSite”是 Expander 控件的默认 ControlTemplate 中的 ContentPresenter。 请注意，这已在 .NET 中得到修复 - 请参阅 github 上 WPF 源中的默认样式。

如果你有旧版本，你仍然可以使用这个固定的控件模板来更新旧的隐式样式。

您可以将相同的技术应用于任何其他面板或控件。

很容易检查控件是否已使用Snoop 创建。将其附加到应用程序后，您可以使用左上角的文本框过滤可视化树。如果在树中没有找到一个控件，则表示它尚未创建。