網站首頁 編程語言 正文
WrapPanel 實現虛擬化
1.框架使用大于等于.NET40；
2.Visual Studio 2022;
3.項目使用 MIT 開源許可協議；
4.眾所周知 WPF 的 StackPanel 在加載大量數據時性能會特別差，但是官方提供了一個虛擬化容器VirtualizingStackPanel；
-
VirtualizingStackPanel.IsVirtualizing附加屬性設置為true時就開啟虛擬化。 -
VirtualizingStackPanel.IsVirtualizing附加屬性設置為false其VirtualizingStackPanel行為與普通StackPanel屬性的行為相同。
5.WrapPanel 默認是不支持虛擬化的，所以需要自行實現。
1） VirtualizingWrapPanel 查看源碼 | VirtualizingWrapPanel 查看源碼。
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();
}
}
}
原文鏈接：https://mp.weixin.qq.com/s/loyvSipJbLYkcmwBidtisg
相關推薦
- 2022-11-09 Go語言如何使用golang-jwt/jwt/v4進行JWT鑒權詳解_Golang
- 2022-11-21 Go語言實現ssh&scp的方法詳解_Golang
- 2022-08-12 Go單元測試對GORM進行Mock測試_Golang
- 2022-02-12 Xpath中text()方法獲取列表為空問題解決方法
- 2022-11-19 Golang?cron?定時器和定時任務的使用場景_Golang
- 2022-06-12 Unity?使用tiledmap解析地圖的詳細過程_C#教程
- 2023-07-18 SpringBoot中無法用@Value獲取yml中的配置值的原因
- 2021-11-06 Docker下部署lnmp詳細步驟_docker
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速