WrapPanel 实现虚拟化
WrapPanel 实现虚拟化
控件名:VirtualizingWrapPanel
作者:WPFDevelopersOrg
原文链接: https://github.com/WPFDevelopersOrg/WPFDevelopers
框架使用大于等于
.NET40
;Visual Studio 2022
;项目使用 MIT 开源许可协议;
众所周知 WPF 的 StackPanel 在加载大量数据时性能会特别差,但是官方提供了一个虚拟化容器VirtualizingStackPanel[1] ;
VirtualizingStackPanel.IsVirtualizing
附加属性设置为true
时就开启虚拟化。VirtualizingStackPanel.IsVirtualizing
附加属性设置为false
其VirtualizingStackPanel
行为与普通StackPanel
属性的行为相同。
WrapPanel 默认是不支持虚拟化的,所以需要自行实现。
1) VirtualizingWrapPanel 查看源码1[2] | VirtualizingWrapPanel 查看源码2[3]。
2) 准备数据HospitalList.cs如下:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows.Media;namespace WPFDevelopers.Minimal.Sample.Models
{public class HospitalList : ObservableCollection<Hospital>{public HospitalList(){var hospitals = new string[] { "No. 189, Grove St, Los Angeles", "No. 3669, Grove St, Los Angeles" };var names = new string[] { "Doctor Fang", "Judge Qu" };var images = new string[] { "https://pic2.zhimg.com/80/v2-0711e97955adc9be9fbcff67e1007535_720w.jpg",//"https://pic2.zhimg.com/80/v2-5b7f84c63075ba9771f6e6dc29a54615_720w.jpg","https://pic3.zhimg.com/80/v2-a3d6d8832090520e7ed6c748a8698e4e_720w.jpg","https://pic3.zhimg.com/80/v2-de7554ac9667a59255fe002bb8753ab6_720w.jpg"};var state = 0;for (var i = 1; i < 10000; i++){Add(new Hospital { Id = $"9999{i}", DoctorName = i % 2 == 0 ? names[0]:names[1], HospitalName = i % 2 == 0 ? hospitals[0] : hospitals[1] ,State = state ,UserImage = images[state] });state++;if (state > 2)state = 0;}}}public class Hospital{public string Id { get; set; }public string DoctorName { get; set; }public string HospitalName { get; set; }public string UserImage { get; set; }public int State { get; set; }}
}
3) 新建展示VirtualizingWrapPanelExample.xaml如下:
<ws:Window x:Class="WPFDevelopers.Minimal.Sample.ExampleViews.VirtualizingWrapPanelExample"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:ws="https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal"xmlns:local="clr-namespace:WPFDevelopers.Minimal.Sample.ExampleViews"xmlns:model="clr-namespace:WPFDevelopers.Minimal.Sample.Models"xmlns:converts="clr-namespace:WPFDevelopers.Minimal.Sample.Converts"mc:Ignorable="d" WindowStartupLocation="CenterScreen"Title="System V1.0" Height="450" Width="900"><Window.Resources><model:HospitalList x:Key="myHospitalList"/><converts:StateConvert x:Key="stateConvert"></converts:StateConvert></Window.Resources><Grid Margin="4"><WrapPanel HorizontalAlignment="Left"><WrapPanel.Resources><Style TargetType="Border"><Setter Property="Padding" Value="2"></Setter><Setter Property="BorderThickness" Value="1"></Setter></Style><Style TargetType="Rectangle"><Setter Property="Width" Value="15"></Setter><Setter Property="Height" Value="15"></Setter><Setter Property="Opacity" Value=".2"></Setter></Style></WrapPanel.Resources><WrapPanel><Border BorderBrush="Green"><Rectangle Fill="Green"/></Border><TextBlock Text="Idle" Foreground="Black" Margin="4,0"/></WrapPanel><WrapPanel><Border BorderBrush="Orange"><Rectangle Fill="Orange"/></Border><TextBlock Text="Slightly Idle" Foreground="Black" Margin="4,0"/></WrapPanel><WrapPanel><Border BorderBrush="Red"><Rectangle Fill="Red"/></Border><TextBlock Text="Busy" Foreground="Black" Margin="4,0"/></WrapPanel></WrapPanel><TextBlock HorizontalAlignment="Right" Foreground="Black"Margin="4,2" FontSize="16"><Run Text="Count:"></Run><Run Text="{Binding ElementName=DocumentsList,Path=.Items.Count,Mode=OneTime}"></Run></TextBlock><ListBox x:Name="DocumentsList"ItemsSource="{Binding Source={StaticResource myHospitalList}}"Margin="0,24,0,0"><ListBox.ItemTemplate><DataTemplate><Border BorderBrush="{Binding State,Converter={StaticResource stateConvert}}" BorderThickness="1"Width="196"Height="94"><Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Rectangle Fill="{Binding State,Converter={StaticResource stateConvert}}" Opacity=".2" Grid.ColumnSpan="2" Grid.RowSpan="3"/><Border Grid.RowSpan="2" Grid.Column="0" Width="60" Height="60"Margin="0,4,0,0" CornerRadius="10"><Border.Background><ImageBrush ImageSource="{Binding UserImage}" Stretch="Uniform"/></Border.Background></Border><TextBlock Grid.Column="1" Grid.Row="0"Text="{Binding Path=Id}" Margin="0,4,0,0"/><TextBlock Grid.Column="1" Grid.Row="1"Text="{Binding Path=DoctorName}"/><TextBlock Grid.ColumnSpan="2" Grid.Row="2"Padding="10,0"Text="{Binding Path=HospitalName}" TextTrimming="CharacterEllipsis"/></Grid></Border></DataTemplate></ListBox.ItemTemplate><ListBox.Template><ControlTemplate><Border CornerRadius="2" BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"><ScrollViewer x:Name="ScrollViewer"Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" IsTabStop="False"><ItemsPresenter /></ScrollViewer></Border></ControlTemplate></ListBox.Template><ListBox.ItemsPanel><ItemsPanelTemplate><ws:VirtualizingWrapPanel ItemWidth="200"ItemHeight="100"/></ItemsPanelTemplate></ListBox.ItemsPanel></ListBox></Grid>
</ws:Window>
4) 状态StateConvert.cs如下:
using System;
using System.Windows.Data;
using System.Windows.Media;namespace WPFDevelopers.Minimal.Sample.Converts
{public class StateConvert : IValueConverter{public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo cultureInfo){var color = Brushes.Green;if (value != null){var state = int.Parse(value.ToString());switch (state){case 0:color = Brushes.Green;break;case 1:color = Brushes.Orange;break;case 2:color = Brushes.Red;break;}}return color;}public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo cultureInfo){throw new NotImplementedException();}}
}
技术群:添加小编微信并备注进群
小编微信:mm1552923
公众号:dotNet编程大全
参考资料
[1]
VirtualizingStackPanel: https://docs.microsoft.com/zh-cn/dotnet/api/system.windows.controls.virtualizingstackpanel?view=windowsdesktop-6.0
[2]
VirtualizingWrapPanel 查看源码1: https://github.com/samueldjack/VirtualCollection/blob/master/VirtualCollection/VirtualCollection/VirtualizingWrapPanel.cs
[3]
VirtualizingWrapPanel 查看源码2: https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal/blob/main/src/WPFDevelopers.Minimal/WPFDevelopers.Minimal.Shared/Controls/VirtualizingWrapPanel/VirtualizingWrapPanel.cs
WrapPanel 实现虚拟化相关推荐
- WPF 虚拟化 VirtualizingWrapPanel 和 VirtualLizingTilePanel
一. UI 上两个扩展 public class VirtualizingWrapPanel : VirtualizingPanel, IScrollInfo{#region FieldsUIEle ...
- wpf 客户端【JDAgent桌面助手】开发详解(三) 瀑布流效果实现与UI虚拟化优化大数据显示...
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...
- [原创]KVM虚拟化管理平台的实现
KVM虚拟化管理平台的实现 源码链接:https://github.com/wsjhk/IaaS_admin.git 视频演示链接:https://v.youku.com/v_show/id_XMjg ...
- 档案用虚拟化服务器还是物理机,利用虚拟化将一台NAS满足不同部门
[IT168 资讯]企业环境中如果存在多个域,在不同域中就必须建设不同的NAS系统,所以容易造成管理复杂和资源分散,但通过NAS虚拟化技术可解决这样的问题,能将一台NAS系统仿真成多台虚拟设备,每一台 ...
- ibm刀片服务器虚拟化,IBM POWER刀片服务器的虚拟化解决方案v1.3.ppt
IBM POWER刀片服务器的虚拟化解决方案v1.3 BladeCenter POWER blade JS21&JS22 虚拟化 PowerVM By Allan Figueroa Edit ...
- kvm虚拟化学习笔记(十七)之KVM到KVM之v2v迁移
1.源KVM虚拟主机node1 (1).查看源KVM虚拟主机上的虚拟机列表,本文计划将CentOS6.5-01虚拟机迁移到其它KVM虚拟主机中. [root@node1 ~]# virsh list ...
- VDI序曲二十三 制作OFFICE 2003应用程序虚拟化序列
APP-V平台由三个重要组件构成:APP-V排序器.用于虚拟应用程序交付和管理的APP-V管理和流式处理服务器以及APP-V客户端.并且在虚拟环境中不会包含不必要的文件和设置,让IT管理员按需交付应用 ...
- 走进云计算与虚拟化的底层核心
本文讲的是走进云计算与虚拟化的底层核心,2012年3月在国务院政府工作报告附录部分中,政府对云计算给出了官方的解释,体现了政府对云计算产业的高度重视和美好愿景.云计算在工作报告中是这样定义的:&quo ...
- 【虚拟化实战】VM设计之一vCPU
作者:范军 (Frank Fan) 新浪微博:@frankfan7 虚拟机需要多少个vCPU呢?是不是个数越多性能越好呢?这方面存在着很多误区.给VM配置CPU资源的时候,要精打细算才能最大可能的利用 ...
最新文章
- 剖析PHP中的输出缓冲
- 《数据分析变革:大数据时代精准决策之道》一第一部分 变革已然开始
- mysql aes密钥大于16位_aes秘钥限制问题解决办法
- linux中央服务器,如何在Linux上搭建一个Git中央仓库
- Dubbo 注册中心 之 Zookeeper
- 操作系统和Python的发展历程
- SpringMVC异常处理器代码示例
- 网络工程师HCIE-RS-ipv6第一节:IPv6地址(原理+实验)
- libuv 原理_nodejs如何利用libuv实现事件循环和异步
- Web笔记:jQuery的使用
- k3梅林和官改哪个稳定_要功能还是要稳定 — 斐讯 K3 由LEDE 转战官改ROOT版
- Linux自学之旅-基础命令(write用户之间发送信息命令)
- Tableau 10.5 安装教程
- 几大技术体系极其应用
- python 完全背包问题_经典动态规划:完全背包问题
- 微信小程序之在线任务发布与接单平台(图)
- LINUX LVM 硬盘管理及LVM的扩容
- 【砸壳STEP2】使用cycript查看并修改微信UI界面
- 2019-9-11-数据结构查找方法总结
- MATLAB应用实战系列(六十)-MATLAB数学建模常用的四大模型
热门文章
- 三菱Q系列PLC批量读取软元件
- 【原创】基于SSM框架的电影在线观看网站设计与实现
- 深度解析Java中的5个“黑魔法”
- 表单验证--12306注册账号页面
- Centos8安装MySQL8.0,基于rpm安装
- 微信小程序canvas绘制坐标图
- Golang Vue 后台框架 go-admin 从零开始企业级实战视频教程(33 个视频)
- AndroidStudio-3.2.1(十三)SharedPreferences与PreferenceFragment
- 7、【斯纳克学生微信在线缴费平台】手机端解除绑定学生
- svg实现直线带双向箭头