WPF性能优化之UI虚拟化

news2024/9/22 11:30:22

文章目录

  • 前言
  • 一、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) 非虚拟化切换过渡效果
在这里插入图片描述

----------------------完-----------------------

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2101679.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

如何提升网站权重？

如何提升网站权重？

提升网站权重的方法有很多&#xff0c;常规的方法包括内容优化、关键词研究、页面结构调整、提高用户体验等。但这些方法往往需要时间来见效。如果你希望在短时间内看到显著的提升&#xff0c;发外链是一个非常有效的策略。 外链是提升网站权重的有效方法&#xff0c;但需要注…
阅读更多...
9月3c++

9月3c++

封装栈和队列 队列 #include <iostream> #include <cstring> using namespace std; class Myqueue { private:int data[256];int size0; public:Myqueue(){}//无参构造~Myqueue(){}//析构//拷贝赋值Myqueue & operator(const Myqueue &other){if(this!&a…
阅读更多...
C++ ─── List的模拟实现

C++ ─── List的模拟实现

一&#xff0c; List的模拟实现 List 是一个双向循环链表,由于List的节点不连续&#xff0c;不能用节点指针直接作为迭代器&#xff0c;因此我们要对结点指针封装&#xff0c;来实现迭代器的作用。 迭代器有两种实现方式&#xff0c;具体应根据容器底层数据结构实现&#xff1…
阅读更多...
15、VSCode自定义Markwown编辑环境

15、VSCode自定义Markwown编辑环境

前言 &#xff1a;Visual Studio Code (VSCode) 是微软推出的一款开源编辑器&#xff0c;使用 Electron 打造&#xff0c;与 Atom 齐名&#xff0c;不过随着 Atom 社区的渐渐缩小&#xff0c;VSCode 的影响力开始越来越大了。VSCode 内置了 Markdown 语言及预览的支持&#xff…
阅读更多...
每周12600元奖金池，邀你与昇腾算力共舞，openMind开发者盛宴启幕！

每周12600元奖金池，邀你与昇腾算力共舞，openMind开发者盛宴启幕！

小伙伴们&#xff0c;是否瞬间被这个标题唤醒了在OpenI启智社区“我为开源打榜狂”黄金时代的温馨记忆&#xff1f;打榜活动虽已谢幕&#xff0c;但大家相伴度过12期的那份激情与创新的共鸣&#xff0c;促使OpenI启智社区在国产算力崛起的浪潮中勇立潮头&#xff0c;推出了“芯…
阅读更多...
JavaScript是什么

JavaScript是什么

前言 初始JavaScript JavaScript是什么 JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行. JavaScript 最初只是为了完成简单的表单验证(验证数据合法性), 结果后…
阅读更多...
git 回滚的三种方式

git 回滚的三种方式

按照从旧到新的顺序 你依次提交了 1 2 3 4 5 现在你想回到1 如何操作 第一种方法 hard reset git reset --hard 执行命令后 你会发现 效果实现了 东西都回到了那次更改 但是2345的更改都没了 并且你会发现 你有更新 这是因为这个hard reset 只会改本地的 远程的不改 一更新就…
阅读更多...
7.Lab Six —— Cow Fork

7.Lab Six —— Cow Fork

首先切换分支到cow git checkout cow make clean Implement copy-on write 实现写时复制&#xff0c;为了测试方案&#xff0c;以及提供了一个cowtest的xv6程序&#xff0c;位于user/cowtest.c当中 课程给了一个合理的攻克计划&#xff1a; 修改uvmcopy()将父进程的物理页映…
阅读更多...
GO 下载依赖改成国内代理

GO 下载依赖改成国内代理

改成我们国内可用的代理地址 在命令提示符输入&#xff1a; 1 go env -w GOPROXYhttps://goproxy.cn 然后再做各种操作就可以成功了 另外一个问题&#xff1a; 手动下载某些依赖包&#xff0c;但是goland一直无法识别。 删掉了GOPATH多余的路径。 另外&#xff0c;启用了…
阅读更多...
STL—vector容器

STL—vector容器

目录 1、简单使用&#xff08;插入数据三种遍历方式&#xff09; 2、介绍 3、常用构造方法 3、扩容reserve和缩容shrink_to_fit 4、insert函数&#xff1a;在某个位置进行插入数据 5、vector使用库里面的find 6、vector< vector > 7、看源代码的技巧 1、简单使用&…
阅读更多...
大二必做项目贪吃蛇超详解之下篇游戏核心逻辑实现

大二必做项目贪吃蛇超详解之下篇游戏核心逻辑实现

贪吃蛇系列文章 上篇win32库介绍中篇设计与分析下篇游戏主逻辑 可以在Gitee上获取贪吃蛇代码。 文章目录 贪吃蛇系列文章5. 核心逻辑实现分析5. 3 GameRun5. 3. 1 PrintScore5. 3. 2 CheckVK5. 3. 3 BuyNewNode5. 3. 4 NextIsFood5. 3. 4 EatFood5. 3. 5 NotFood5. 3. 6 Chec…
阅读更多...
【OpenLayers 进阶】添加滤镜改变底图样式

【OpenLayers 进阶】添加滤镜改变底图样式

目录 一、前言二、准备工作三、实现方式四、总结 一、前言 项目实施过程中&#xff0c;需要根据不同的业务场景需求变换地图样式。如果客户提供的底图服务或自建底图服务是类似Mapbox这种矢量切片&#xff0c;那只要按照需求配置不同的样式文件即可。如果没有矢量切片&#xff…
阅读更多...
浅谈人工智能之Windows：基于ollama进行本地化大模型部署

浅谈人工智能之Windows：基于ollama进行本地化大模型部署

浅谈人工智能之Windows&#xff1a;基于ollama进行本地化大模型部署 引言 随着人工智能技术的飞速发展&#xff0c;大型语言模型&#xff08;LLMs&#xff09;已经成为推动自然语言处理领域进步的关键力量。然而&#xff0c;传统的云部署方式可能带来数据隐私、成本以及访问速…
阅读更多...
pikachu文件包含漏洞靶场通关攻略

pikachu文件包含漏洞靶场通关攻略

本地文件包含 先上传一个jpg文件&#xff0c;内容写上<?php phpinfo();?> 上传成功并且知晓了文件的路径 返回本地上传&#xff0c;并../返回上级目录 可以看到我们的php语句已经生效 远程文件包含 在云服务器上创建一个php文件 然后打开pikachu的远程文件包含靶场&…
阅读更多...
鸿蒙开发培训多少钱？

鸿蒙开发培训多少钱？

随着物联网技术的发展&#xff0c;HarmonyOS(鸿蒙系统)作为华为推出的一款面向全场景的分布式操作系统&#xff0c;正在逐步成为开发者们关注的焦点。对于那些想要进入这个新兴领域的开发者来说&#xff0c;参加鸿蒙开发培训是一个不错的选择。那么&#xff0c;这样的培训究竟需…
阅读更多...
【Hadoop|HDFS篇】HDFS概述

【Hadoop|HDFS篇】HDFS概述

1. HDFS产出背景及定义 1.1 HDFS产生背景 随着数据量越来越大&#xff0c;在一个操作系统存不下所有的数据&#xff0c;那么就分配到更多的操作系 统管理的磁盘中&#xff0c;但是不方便管理和维护&#xff0c;迫切需要一种系统来管理多台机器上的文件&#xff0c;这 就是分布…
阅读更多...
Oracle授权如何购买？多少钱？如何计算？

Oracle授权如何购买？多少钱？如何计算？

前言 作为DBA时常也会遇到一些商务的问题&#xff0c;比如购买Oracle 的授权&#xff0c;比如老板问用oracle有没有法律风险&#xff0c;这个组件是否收费&#xff1f;如何计算授权数&#xff1f;等等&#xff0c;本文根据博主的经验和一些Oracle公开的资料&#xff0c;来做一个…
阅读更多...
DBNET文字检测

DBNET文字检测

原文：DBNET文字检测 - 知乎 (zhihu.com) 一、DBNET介绍 DBNET核心采用的是基于分割的做法进行文本检测，即将每个文本块都进行语义分割，然后对分割概率图进行简单二值化、最终转化得为box或者poly格式的检测结果。除去网络设计方面的差异，最大特点是引入了Differentiable …
阅读更多...
Python 从入门到实战6（二维列表）

Python 从入门到实战6（二维列表）

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;通过熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 之前的文章我们通过举例学习了python 中列表的相关操作&#xff0…
阅读更多...
什么是阿凡达2.0直播模式？

什么是阿凡达2.0直播模式？

要了解什么是什么是阿凡达2.0直播模式,首先要了解什么是的阿凡达直播模式。 我们知道真人直播&#xff0c;播不了几个小时&#xff0c;主播就讲累了。且真人主播的价格又贵&#xff0c;以小时计费。所以很多数字人厂商推出了数字人直播。用数字人代替真人直播。在前几年的时候…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023