WPF性能优化之UI虚拟化

文章目录

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

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于free5gc模拟5G核心网和UERANSIM模拟5G用户设备的模拟5G网络环境的部署搭建方法总结和解析。

基于free5gc模拟5G核心网和UERANSIM模拟5G用户设备的模拟5G网络环境的部署搭建方法总结和解析。

简介&#xff1a;下文介绍了基于free5gc模拟5G核心网和UERANSIM模拟5G用户设备的模拟5G网络环境的部署搭建方法&#xff0c;并且通过完成相关配置&#xff0c; 简单实现测试5G用户设备接入核心网的注册流程、去注册流程&#xff0c;模拟了一个用户设备通过模拟核心网进行实际的…
阅读更多...
Python输出多位数

Python输出多位数

作者制作不易&#xff0c;关注、点赞、收藏一下吧&#xff01; 1.第一种:正常直接用循环 以三位数为例: for i in range(100, 1000):print(i) 运行结果( 展示一部分 ): 图1-1 2.第二种:特定位数 以三位数为例: for i in range(1, 5): # 括号内指定那个位的范围for j in r…
阅读更多...
STM32F4按键状态机--单击、双击、长按

STM32F4按键状态机--单击、双击、长按

STM32F4按键状态机--单击、双击、长按 一、状态机的三要素二、使用状态机原因2.1资源占用方面2.2 执行效率方面&#xff1a;2.3 按键抖动方面&#xff1a; 三、状态机实现3.1 状态机分析3.1 程序实现 百度解析的状态机概念如下 状态机由状态寄存器和组合逻辑电路构成&#xff0…
阅读更多...
SQL【2】稍稍进阶

SQL【2】稍稍进阶

目录 首先&#xff0c;怎么安装&#xff0c;环境怎么调。 alter——改变&#xff08;此段Al&#xff09; 创建于删除数据库、表格 上一节进阶 预设值default​编辑 关于插入顺序 有条件的删除DELETE FROM 表 WHERE 条件 多种语句组合查看 查看排序​编辑 LIMIT 2只取前…
阅读更多...
Leetcode面试经典150题-221.最大正方形

Leetcode面试经典150题-221.最大正方形

解法都在代码里&#xff0c;不懂就留言或者私信 class Solution {/**本题一看就是典型的动态规划&#xff0c;要找以每个点为右下角的正方形的面积&#xff0c;然后取最大的这个题要注意找规律&#xff0c;我找到的规律如下&#xff1a;1.以第一行为右下角的&#xff0c;因为正…
阅读更多...
ADC——模数转换器

ADC——模数转换器

一、转换流程 在处理器中主要进行ADC 1、AD转换流程 &#xff1a;采样、保持、量化、编码 通过比较器获得的电信号转换数字信号&#xff0c;根据自己需求&#xff0c;如果要求速率就可以使用较多的比较器&#xff0c;不要求速率考虑成本就可以使用较少的比较器&#xff0c;将最…
阅读更多...
Vue学习笔记 二

Vue学习笔记 二

4、Vue基础扩展 4.1 插槽 组件的最大特性就是复用性&#xff0c;而用好插槽能大大提高组件的可复用能力在Vue中插槽是很重要的存在&#xff0c;通过插槽&#xff0c;我们可以把父组件中指定的DOM作用到子组件的任意位置&#xff0c;后面我们坐项目用到的组件库比如element-ui…
阅读更多...
5、Django Admin后台移除“删除所选”操作

5、Django Admin后台移除“删除所选”操作

默认情况下&#xff0c;Django Admin后台的listview模型列表页&#xff0c;会有一个Delete Selected删除所选操作。假设你需要再从Hero管理模型中移除该删除操作。 ModelAdmin.get_actions方法可以返回所有的操作方法。通过覆盖此方法&#xff0c;移除其中delete_selected方法…
阅读更多...
Python 优雅编程：会报恩的代码（五）

Python 优雅编程：会报恩的代码（五）

文章目录 引言从文本搜索指定单词&#xff0c;不区分单词的大小写使用 str.lower()使用 re 模块 从文本搜索多个单词&#xff0c;依旧不区分单词的大小写使用 str.lower() 和循环使用 re 模块 反复执行 re.compile&#xff0c;re 是否会缓存编译结果&#xff1f;结语 引言 在 …
阅读更多...
苹果mac数据恢复概率大吗 mac数据恢复专业软件哪个好用

苹果mac数据恢复概率大吗 mac数据恢复专业软件哪个好用

一般情况下&#xff0c;当我们把电脑中的数据删掉后&#xff0c;都会保存在回收站里面&#xff0c;但如果回收站被清空了或者数据在回收站中没有找到的话&#xff0c;那么&#xff0c;之前被删掉的数据还能恢复吗&#xff1f;恢复的概率有多大呢&#xff1f; 答案是可以的&…
阅读更多...
链式栈、队列

链式栈、队列

1、链式栈&#xff1a; 声明&#xff1a; #ifndef _STACK_H #define _STACK_H #include<stdlib.h>typedef int DataType;typedef struct snode //节点 {DataType data;struct snode *pnext; }SNode_t;typedef struct stack //链表 {SNode_t *ptop;int clen; }St…
阅读更多...
【python】—— Python爬虫实战：爬取珠海市2011-2023年天气数据并保存为CSV文件

【python】—— Python爬虫实战：爬取珠海市2011-2023年天气数据并保存为CSV文件

目录 目标 准备工作 爬取数据的开始时间和结束时间 爬取数据并解析 将数据转换为DataFrame并保存为CSV文件 本文将介绍如何使用Python编写一个简单的爬虫程序，以爬取珠海市2011年至2023年的天气数据，并将这些数据保存为CSV文件。我们将涉及到以下知识点： 使用r…
阅读更多...
金九银十，自动化测试面试题精选【美团二面】

金九银十，自动化测试面试题精选【美团二面】

面试一般分为技术面和hr面&#xff0c;形式的话很少有群面&#xff0c;少部分企业可能会有一个交叉面&#xff0c;不过总的来说&#xff0c;技术面基本就是考察你的专业技术水平的&#xff0c;hr面的话主要是看这个人的综合素质以及家庭情况符不符合公司要求&#xff0c;一般来…
阅读更多...
Kubernetes 上安装 Jenkins

Kubernetes 上安装 Jenkins

安装 Helm curl https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3 | bash添加 Jenkins Helm 仓库 首先添加 Jenkins Helm 仓库 helm repo add jenkins https://charts.jenkins.io helm repo update安装 Jenkins 使用 Helm 安装 Jenkins 的最新版本&…
阅读更多...
uni-app应用更新（Android端）

uni-app应用更新（Android端）

关于app更新&#xff0c;uni-app官方推荐的是 uni-upgrade-center&#xff0c;看了下比较繁琐&#xff0c;因此这里自己实现检查更新并下载安装的逻辑。 1.界面效果 界面中的弹框和 进度条采用了uView 提供的组件 2.检查更新并下载安装 一、版本信息配置在服务端&#xff0c…
阅读更多...
时装爱好者的网页购物天堂：Spring Boot技术探索

时装爱好者的网页购物天堂：Spring Boot技术探索

第2章相关技术 2.1 B/S架构 B/S结构的特点也非常多&#xff0c;例如在很多浏览器中都可以做出信号请求。并且可以适当的减轻用户的工作量&#xff0c;通过对客户端安装或者是配置少量的运行软件就能够逐步减少用户的工作量&#xff0c;这些功能的操作主要是由服务器来进行控制的…
阅读更多...
详解TensorRT的C++高性能部署以及C++部署Yolo实践

详解TensorRT的C++高性能部署以及C++部署Yolo实践

详解TensorRT的C高性能部署 一. ONNX1. ONNX的定位2. ONNX模型格式3. ONNX代码使用实例 二、TensorRT1 引言 三、C部署Yolo模型实例 一. ONNX 1. ONNX的定位 ONNX是一种中间文件格式&#xff0c;用于解决部署的硬件与不同的训练框架特定的模型格式的兼容性问题。 ONNX本身其…
阅读更多...
JAVA数据导出为Excel

JAVA数据导出为Excel

目录 一、导入依赖 二、使用的相关类 1、XSSFWorkbook 构造方法 创建表 操作表 保存表 样式和格式 日期处理 密码保护 其他 2、XSSFSheet 获取属性和信息 行操作 列操作 表的属性 合并单元格 保护表 页眉和页脚 注释 其它 3、XSSFRow 获取属性和信息 单…
阅读更多...
单点登录OAuth2.0

单点登录OAuth2.0

OAuth 2.0&#xff08;Open Authorization 2.0&#xff09;是OAuth协议的第二个版本&#xff0c;于2012年正式成为RFC 6749标准。在OAuth 2.0之前&#xff0c;OAuth 1.0版本已经为Web应用提供了一定程度的授权功能&#xff0c;但随着时间的推移&#xff0c;这些版本逐渐显露出一…
阅读更多...
Nginx: TCP建立连接的优化和启用Fast Open功能

Nginx: TCP建立连接的优化和启用Fast Open功能

TCP 建立连接优化 在三次握手中&#xff0c;相关TCP的内核参数可优化这一过程 net.ipv4.tcp_syn_retries 6net.ipv4.tcp_synack_retries 5net.ipv4.tcp_syncookies 0net.ipv4.tcp_max_syn_backlognet.core.somaxconnnet.core.netdev_max_backlog 1 &#xff09; net.ipv4…
阅读更多...
最新文章

Copyright @ 2022~2023