WPF性能优化之UI虚拟化

最新推荐文章于 2024-09-28 17:35:40 发布
最新推荐文章于 2024-09-28 17:35:40 发布
阅读量359 收藏 2
点赞数
分类专栏： 有趣文章 文章标签： wpf 性能优化 ui
原文链接：https://www.cnblogs.com/qs2020/p/18393857
版权

@

目录

  • 前言
  • 一、VirtualizingStackPanel
    • 1.1 虚拟化功能介绍
      • 1、在Window中添加一个ListBox控件。
      • 2、在设计视图中用鼠标选中ListBox控件并右健依次单击“编辑其他模板”－“编辑项的布局模板”－“编辑副本”。
      • 3、查看生成的模板代码。
    • 1.2 虚拟化参数介绍
  • 二、CustomVirtualizingPanel
    • 2.1 基础知识
      • 2.1.1 VirtualizingPanel
      • 2.1.2 IScrollInfo
    • 2.2 实战案例
      • 2.2.1 需求分析
      • 2.2.2 代码实现
      • 2.2.3 运行效果

前言

相信很多WPF开发者都碰到过这种情况，当在一个ItemsControl（或继承自ItemsControl）控件中绑定一个集合的时候，如果集合中的条目过多，那么界面就会变得卡顿甚至停止响应，特别是在容器或窗口大小发生改变时，界面的渲染就会给人一种慢半拍的感觉，体验感非常差，这时我们就可以用虚拟化技术来解决这个问题。

UI虚拟化的核心思想就是只渲染可视范围内的控件，所以它通常会搭配ScrollViewer控件一起使用，通过ScrollViewer控件中的VerticalOffset、HorizontalOffset、ViewportWidth、ViewportHeight等参数可以计算出在可视范围内应该显示的控件，当控件不被显示时将它从Panel中移出，这样就可以保证同一时间只渲染了有限的控件，而不是渲染所有控件，从而达到性能提升的目的。

一、VirtualizingStackPanel

1.1 虚拟化功能介绍

VirtualizingStackPanel是WPF中的一个内置控件，它提供了UI虚拟化的功能，在ListBox、ListView、DataGrid等控件中它是默认布局控件，我们可以通过查看控件模板的方式来看看它是如何定义的。

1、在Window中添加一个ListBox控件。

2、在设计视图中用鼠标选中ListBox控件并右健依次单击“编辑其他模板”－“编辑项的布局模板”－“编辑副本”。

3、查看生成的模板代码。


通过以上代码可以看出，ListBox有一个名为ItemsPanel的属性，在该属性中指定了一个Panel控件，ListBox在渲染时用该Panel来布局子项，我们要实现虚拟化只需要在ItemsPanel中指定VirtualizingStackPanel控件即可。

1.2 虚拟化参数介绍

如果你自己实现一个继承自ItemsControl的控件，并按1.1的步骤操作，你会发现还是无法实现虚拟化功能，原因是没有开启虚拟化功能（ListBox、ListView、DataGrid等控件是默认开启的），要开启ItemsControl控件的虚拟化功能我们还需要设置VirtualizingPanel.IsVirtualizing附加属性，以下为示例：

<ItemsControl VirtualizingPanel.IsVirtualizing="True">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel IsItemsHost="True" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

VirtualizingPanel中除了IsVirtualizing参数以外还有很多其它参数可以控制更多的虚拟化细节，以下是参数说明：

  1. VirtualizingPanel.CacheLength=“10”
    作用：CacheLength 属性指定了在虚拟化过程中，控件需要缓存的项目数。这意味着在视口之外的区域中，面板会保留一定数量的项目以提高滚动平滑度。当用户滚动视图时，缓存的项目可以更快地重新使用，从而减少重新创建和布局的开销。
    值：10 表示视口外会缓存 10 个项目。这是一个相对的值，具体数目可能会根据实际实现有所不同。
  2. VirtualizingPanel.CacheLengthUnit=“Item”
    作用：CacheLengthUnit 属性定义 CacheLength 的单位。可以选择 Pixel 或 Item，其中 Item 表示缓存的长度以项目的数量为单位，Pixel 表示缓存的长度以像素为单位。
    值：Item 表示缓存的长度是以项目的数量为单位。这适用于项目大小固定或数据量较小的情况。
  3. VirtualizingPanel.IsContainerVirtualizable=“True”
    作用：IsContainerVirtualizable 属性指示面板是否允许对其子项的容器进行虚拟化。设置为 True 表示面板可以对其容器进行虚拟化，从而优化性能，特别是在处理大量数据时。
    值：True 表示启用容器虚拟化。
  4. VirtualizingPanel.IsVirtualizing=“True”
    作用：IsVirtualizing 属性指示面板是否启用虚拟化。这是虚拟化的核心设置，设置为 True 表示面板会仅对视口内的项目进行渲染和处理，而不是一次性加载所有项目。
    值：True 表示启用虚拟化，减少不必要的控件实例化和布局计算。
  5. VirtualizingPanel.IsVirtualizingWhenGrouping=“True”
    作用：IsVirtualizingWhenGrouping 属性控制面板在分组时是否继续进行虚拟化。当设置为 True 时，面板在分组数据时仍然会应用虚拟化策略，以保持性能优化。
    值：True 表示即使在数据分组时，也保持虚拟化。
  6. VirtualizingPanel.ScrollUnit=“Item”
    作用：ScrollUnit 属性定义滚动的单位。可以选择 Item 或 Pixel，其中 Item 表示每次滚动一个项目，Pixel 表示每次滚动一定像素。
    值：Item 表示每次滚动一个项目的单位，而不是固定像素数，这对于项目高度一致的情况尤其有效。
  7. VirtualizingPanel.VirtualizationMode=“Recycling”
    作用：VirtualizationMode 属性指定虚拟化模式。Recycling 模式表示控件会重用已经不再可见的项目的容器，而不是销毁它们。这种方式可以减少控件的创建和销毁开销，从而提升性能。
    值：Recycling 表示启用重用模式，使面板更高效地管理控件实例，适合动态数据变化的场景。

二、CustomVirtualizingPanel

2.1 基础知识

要开发自己的虚拟化Panel我们需要继承自VirtualizingPanel类，并实现IScrollInfo接口，VirtualizingPanel中提供了操作Panel子控件的相关的方法，IScrollInfo接口定义了ScrollViewer控件的自定义行为，我们实现了IScrollInfo就可以接管ScrollViewer控件的相关操作。
代码如下（示例）：

public class CustomVirtualizingPanel : VirtualizingPanel, IScrollInfo
{
}

2.1.1 VirtualizingPanel

VirtualizingPanel中有一个名为“ItemContainerGenerator”的属性，该属性提供了对虚拟化Panel子控件创建及销毁的方法，它的工作流程大致如下：

  1. 当ScrollViewer控件滚动条移动时，获取滚动条的偏移量，通过偏移量和视口大小计算出Panel中应该显示的子控件位置；
  2. 调用ItemContainerGenerator.GenerateNext();从指定位置生成Panel子控件；
  3. 调用ItemContainerGenerator.Remove();删除可见范围以外的Panel子控件；

2.1.2 IScrollInfo

public class CustomVirtualizingPanel : VirtualizingPanel, IScrollInfo
{
    public ScrollViewer ScrollOwner { get; set; }   //当前ScrollViewer控件
    public bool CanVerticallyScroll { get; set; }   //是否可以在垂直方向滚动
    public bool CanHorizontallyScroll { get; set; } //是否可以在水平方向滚动

    public double ExtentWidth { get; }              //滚动内容的总宽度(包括可见部分和不可见部分）
    public double ExtentHeight { get; }             //滚动内容的总高度(包括可见部分和不可见部分）
    public double ViewportWidth { get; }            // ScrollViewer控件可以看到的那部分区域的宽度
    public double ViewportHeight { get; }           //ScrollViewer控件可以看到的那部分区域的高度
    public double HorizontalOffset { get; }         //水平滚动条的偏移量
    public double VerticalOffset { get; }           //垂直滚动条的偏移量

    public void LineDown() { }                      //鼠标点击滚动条下箭头的操作
    public void LineLeft() { }                      //鼠标点击滚动条左箭头的操作
    public void LineRight() { }                     //鼠标点击滚动条右箭头的操作
    public void LineUp() { }                        //鼠标点击滚动条上箭头的操作

    public void MouseWheelDown() { }                //鼠标滚轮向下时的操作
    public void MouseWheelLeft() { }                //鼠标滚轮向左时的操作
    public void MouseWheelRight() { }               //鼠标滚轮向右时的操作
    public void MouseWheelUp() { }                  //鼠标滚轮向上时的操作

    public void PageDown() { }                      //在滚动条上按键盘上下页的操作
    public void PageLeft() { }                      //在滚动条上按键盘上左页的操作
    public void PageRight() { }                     //在滚动条上按键盘上右页的操作
    public void PageUp() { }                        //在滚动条上按键盘上上页的操作

    public void SetHorizontalOffset(double offset) { }                          //设置滚动条水平偏移量
    public void SetVerticalOffset(double offset) { }                            //设置滚动条垂直偏移量
    public Rect MakeVisible(Visual visual, Rect rectangle) { return default; }  //强制滚动Panel子控件（比如只有部分区域显示在可视范围内，点击之后完全滚动到可视范围内）
}

2.2 实战案例

2.2.1 需求分析

  1. CustomVirtualizingPanel应该具有高度的灵活性，以最小的代价满足不同的虚拟化布局需求，不需要每次都要重写一个CustomVirtualizingPanel控件。
  2. 最好是可以通过属性切换布局，这样可以实现布局切换时的过渡效果。

2.2.2 代码实现

通过分析要想实现以上效果，最好的方法就是将CustomVirtualizingPanel中需要计算的关键部分抽象出来做成一个接口，当需要布局计算的时候我们可以直接通过接口获取到关键计算结果。
1) 定义接口

public interface IVirtualizingPanelBuilder 
{     
	void Initialize(CustomVirtualizingPanel virtualizingPanel);     
	double GetItemWidth(Size availableSize);     
	double GetItemHeight(Size availableSize);     
	int CalculateItemsPerRowCount(Size availableSize);     
	int CalculateRowCount(Size availableSize);     
	Size CalculateExtent(Size availableSize);     
	ItemRange CalculateItemRange(Size availableSize); 
}

2) 在CustomVirtualizingPanel类中添加属性VirtualizingPanelBuilder

public IVirtualizingPanelBuilder VirtualizingPanelBuilder 
{     
	get { return (IVirtualizingPanelBuilder)GetValue(VirtualizingPanelBuilderProperty); }     
	set { SetValue(VirtualizingPanelBuilderProperty, value); } 
}

3) 实现VirtualizingPanelBuilder

public class VirtualizingStackPanelBuilder : DependencyObject, IVirtualizingPanelBuilder
{
    /// <summary>
    /// 虚拟面板
    /// </summary>
    private CustomVirtualizingPanel _virtualizingPanel;

    /// <summary>
    /// 初始化
    /// </summary>
    /// <param name="virtualizingPanel"></param>
    public void Initialize(CustomVirtualizingPanel virtualizingPanel)
    {
        _virtualizingPanel = virtualizingPanel;
    }
    /// <summary>
    /// 获取Item高度
    /// </summary>
    /// <param name="availableSize"></param>
    /// <returns></returns>
    public double GetItemHeight(Size availableSize)
    {
        if (ItemHeight > 0)
            return ItemHeight;
        else if (_virtualizingPanel.Children.Count != 0)
            return _virtualizingPanel.Children[0].DesiredSize.Height;
        else
            return _virtualizingPanel.CalculateChildSize(availableSize).Height;
    }
    /// <summary>
    /// 获取Item宽度
    /// </summary>
    /// <param name="availableSize"></param>
    /// <returns></returns>
    public double GetItemWidth(Size availableSize)
    {
        return availableSize.Width;
    }
    /// <summary>
    /// 计算每行显示的Item数
    /// </summary>
    /// <param name="availableSize"></param>
    /// <returns></returns>
    public int CalculateItemsPerRowCount(Size availableSize)
    {
        return 1;
    }
    /// <summary>
    /// 计算行数
    /// </summary>
    /// <param name="availableSize"></param>
    /// <returns></returns>
    public int CalculateRowCount(Size availableSize)
    {
        return _virtualizingPanel.Items.Count;
    }
    /// <summary>
    /// 计算滚动面积
    /// </summary>
    /// <param name="availableSize"></param>
    /// <returns></returns>
    public Size CalculateExtent(Size availableSize)
    {
        var height = GetItemHeight(availableSize);
        var rowCount = CalculateRowCount(availableSize);
        return new Size(availableSize.Width, height * rowCount);
    }
    /// <summary>
    /// 计算可见区域内的Item范围
    /// </summary>
    /// <param name="availableSize"></param>
    /// <returns></returns>
    public ItemRange CalculateItemRange(Size availableSize)
    {
        if (!this._virtualizingPanel.IsVirtualizing)
        {
            return new ItemRange(0, this._virtualizingPanel.Items.Count - 1);
        }

        var viewportHeight = _virtualizingPanel.ViewportHeight;
        var offsetY = _virtualizingPanel.VerticalOffset;

        var rowCount = this.CalculateRowCount(availableSize);
        var itemHeight = this.GetItemHeight(availableSize);

        var firstVisibleItemIndex = (int)Math.Floor(offsetY / itemHeight);
        var lastVisibleItemIndex = (int)Math.Ceiling((offsetY + viewportHeight) / itemHeight) - 1;

        if (lastVisibleItemIndex >= rowCount)
            lastVisibleItemIndex = rowCount - 1;
        return new ItemRange(firstVisibleItemIndex, lastVisibleItemIndex);
    }

    /// <summary>
    /// Item高度
    /// </summary>
    public double ItemHeight
    {
        get { return (double)GetValue(ItemHeightProperty); }
        set { SetValue(ItemHeightProperty, value); }
    }

    public static readonly DependencyProperty ItemHeightProperty =
        DependencyProperty.Register("ItemHeight", typeof(double), typeof(VirtualizingStackPanelBuilder), new PropertyMetadata(ItemHeightPropertyChangedCallback));

    public static void ItemHeightPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((VirtualizingStackPanelBuilder)d)._virtualizingPanel?.InvalidateVisual();
    }
}

4) 设置参数

<local:CustomVirtualizingPanel>     
  <local:CustomVirtualizingPanel.VirtualizingPanelBuilder>         
    <local:VirtualizingStackPanelBuilder ItemHeight="100" />     
  </local:CustomVirtualizingPanel.VirtualizingPanelBuilder> 
</local:CustomVirtualizingPanel>

2.2.3 运行效果

为了能够演示布局切换的过渡效果，这里除了上面的StackPanel布局以外还实现了UniformGrid布局，以下分别演示１亿条数据布局切换及非虚拟化状态下的布局切换过渡效果。
1) 虚拟化切换布局

2) 非虚拟化切换过渡效果

本文转自 https://www.cnblogs.com/qs2020/p/18393857

子不语
关注
专栏目录
WPF中的虚拟化是什么
琅嬛福地
11-15 911
WPF（Windows Presentation Foundation）中的虚拟化是一种性能优化技术，它主要用于提高大量数据展示的效率。在WPF中，如果你有一个包含大量项的（例如ListBoxListView或DataGrid等），不使用虚拟化就意味着无论这些项是否在视图中，WPF都会为每个项生成一个UI元素。对于包含数千甚至数万个项的控件来说，这会导致显著的性能问题，因为会占用大量内存，并且加载和渲染速度会很慢。
WPF UI虚拟化Demo
10-27
WPF UI虚拟化Demo
WPF之UI进阶--完整了解wpf的控件和布局容器及应用
最新发布
河西~石头
09-28 2223
无论是winform还是wfp，布局容器都是属于控件的一种，只不过说布局容器是一种“装控件的控件”。这里我们来梳理一下他们的关系和使用方法，并且详细介绍他们的使用及注意事项。
WPF之UI虚拟化
weixin_33704591的博客
07-06 244
在WPF应用程序开发过程中，大数据量的数据展现通常都要考虑性能问题。有下面一种常见的情况:原始数据源数据量很大，但是某一时刻数据容器中的可见元素个数是有限的，剩余大多数元素都处于不可见状态，如果一次性将所有的数据元素都渲染出来则会非常的消耗性能。因而可以考虑只渲染当前可视区域内的元素，当可视区域内的元素需要发生改变时，再渲染即将展现的元素，最后将不再需要展现的元素清除掉，这样可以大大提高性能。 对...
WPF的UI虚拟化
weixin_33724570的博客
01-03 189
许多时候，我们的界面上会呈现大量的数据，如包含数千条记录的表格或包含数百张照片的相册。由于呈现UI是一件开销比较大的动作，一次性呈现数百张照片就目前的电脑性能来说是需要占用大量内存和时间的。因此需要对其进行优化。以前采用的方案大多数是翻页，翻页在某种程度上造成用户浏览的中断，因此现在往往采用一种新的方案——UI虚拟化。 UI虚拟化的原理是：但是由于显示器和人眼的限制，用户往往只会同时看到其中的数...
WPF UI虚拟化
gang148375的博客
07-07 1116
WPF UI虚拟化
wpf UI虚拟化
大黄鸭在发光的专栏
01-24 866
wpf UI虚拟化
WPF UI虚拟化 DEMO
09-15
WPF UI虚拟化 DEMO，包含文件常见展示形式，开源原代码地址：https://www.codeproject.com/Articles/64865/Enable-MultiSelect-in-WPF-ListView-2?msg=4796178#xx4796178xx
【WPF】UI虚拟化之------自定义VirtualizingWrapPanel-附件资源
03-02
【WPF】UI虚拟化之------自定义VirtualizingWrapPanel-附件资源
wpf 数据虚拟化
02-01
在Windows Presentation Foundation (WPF) 中，数据虚拟化是一种优化技术，特别适用于处理大量数据集时，以提高UI性能和响应速度。它允许只在需要时加载数据，而不是一次性加载整个数据集到内存中，从而减少了对系统...
WPF 虚拟化技术
flysh05的专栏
06-13 839
WPF 虚拟化技术
wpf WrapPanel虚拟化
09-29
网上找了个虚拟化的WrapPanel，自己又改了下，可以设置每个Item的大小，上下间距，每次的滚动距离。
WPF Virtualization
weixin_30824277的博客
08-31 290
WPF虚拟化技术分为UI 虚拟化和数据虚拟化 第一种方法被称为"UI 虚拟化"。支持虚拟化用户界面的控件是足够聪明来创建只显示的是实际在屏幕上可见的数据项目所需的 UI 元素。例如，假设我们有一个滚动的列表框是绑定到 1,000,000 项目的数据，但在任何时候是可见的只有 100。没有 UI 虚拟化，列表框将创建 100 万 ListBoxItems — — 一个缓慢的过程 — — 并包括他们...
WPF中实现自定义虚拟容器(实现VirtualizingPanel)
weixin_30877755的博客
09-07 454
在WPF应用程序开发过程中，大数据量的数据展现通常都要考虑性能问题。有下面一种常见的情况:原始数据源数据量很大，但是某一时刻数据容器中的可见元素个数是有限的，剩余大多数元素都处于不可见状态，如果一次性将所有的数据元素都渲染出来则会非常的消耗性能。因而可以考虑只渲染当前可视区域内的元素，当可视区域内的元素需要发生改变时，再渲染即将展现的元素，最后将不再需要展现的元素清除掉，这样可以大大提高性能。在W...
WPF 列表开启虚拟化的方式
weixin_33816821的博客
05-24 1188
正确开启虚拟化的方式 列表如ListBox,ListView,TreeView,GridView等，开启虚拟化 ScrollViewer设置CanContentScroll=True 直接在模板中，设置CanContentScroll="True" 如模板中未设置CanContentScroll属性，可以在列表添加属性ScrollViewer.Can...
WPF性能优化点
冰河の泥鱼的专栏
01-30 1304
WPF性能优化点在建立漂亮UI的同时，我们还需要关注应用程序的性能，WPF尤其如此。下面从MS的文档中总结出了一些有用的性能优化点。在实际编写的过程中，可以参考。这个Post非完全原创，是根据一些文档总结出来的。 1、建立逻辑树的时候，尽量考虑从父结点到子结点的顺序构建。因为当逻辑树的一个结点发生变化时（比如添加或删除），它的父结点和所有的子结点都会激发Invalidation。我们应该避
WPF篇（4）- VirtualizingStackPanel （虚拟化元素）+Canvas控件（绝对布局）
一个人的江湖
08-06 1036
VirtualizingStackPanel 类（虚拟化元素）和StackPanel 类在用法上几乎差不多。其作用是在水平或垂直的一行中排列并显示内容。它继承于一个叫VirtualizingPanel的抽象类，而这个VirtualizingPanel抽象类继承于Panel布局基类。
如何通过代码优化WPF TabControl的切换性能？
09-27
在WPF中，优化TabControl的切换性能通常涉及以下几个方面： 1. **禁用或简化动画**： 可以在TabControl的`TabItem`上设置`Transition`属性为`None`，关闭默认的切换动画，以减少渲染开销。如果你仍然想保留动画，可以选择更轻量级的过渡效果。 ```xml <TabItem Transition="Fade"> ``` 变为： ```xml <TabItem Transition="None" /> ``` 2. **使用`IsSynchronizedWithCurrentItem`**： 设置TabControl的`IsSynchronizedWithCurrentItem`属性为`False`，这样每次点击选项卡时，只会切换当前选中的子项，而不是整个TabControl。 ```csharp TabControl.IsSynchronizedWithCurrentItem = false; ``` 3. **异步加载内容**： 如果每个选项卡的内容是从外部加载的，使用`DataTemplate`和`DynamicResource`配合`AsyncDisplayText`或`RelayCommand`实现异步加载内容，避免阻塞UI。 4. **虚拟化**： 对于大型列表，启用`TabControl.ItemContainerStyle`的`VirtualizingStackPanel`或`VirtualizingPanel`，这将仅渲染可见的部分，降低内存和CPU需求。 5. **缓存策略**： 对于动态生成或远程获取的内容，考虑缓存策略，比如在内存中存储已加载过的数据，下次切换时不重复加载。 6. **监视性能**： 使用Visual Studio的Performance Profiler工具分析代码，找出性能瓶颈所在，针对性地优化。 记得在实际应用中测试优化的效果，并确保它不会引入新的问题，如隐藏的信息丢失等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值