第WPF使用WrapPanel實現(xiàn)虛擬化效果3.項目使用MIT開源許可協(xié)議；

4.眾所周知WPF的StackPanel在加載大量數(shù)據(jù)時性能會特別差，但是官方提供了一個虛擬化容器VirtualizingStackPanel；

VirtualizingStackPanel.IsVirtualizing附加屬性設(shè)置為true時就開啟虛擬化。VirtualizingStackPanel.IsVirtualizing附加屬性設(shè)置為false其VirtualizingStackPanel行為與普通StackPanel屬性的行為相同。

5.WrapPanel默認是不支持虛擬化的，所以需要自行實現(xiàn)。

1）VirtualizingWrapPanel查看源碼|VirtualizingWrapPanel查看源碼。

2）準備數(shù)據(jù)HospitalList.cs如下：

using

System;

using

System.Collections.Generic;

using

System.Collections.ObjectModel;

using

System.Windows.Media;

namespace

WPFDevelopers.Minimal.Sample.Models

public

class

HospitalList

:

ObservableCollectionHospital

{

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[]

{

"/80/v2-0711e97955adc9be9fbcff67e1007535_720w.jpg",

//"/80/v2-5b7f84c63075ba9771f6e6dc29a54615_720w.jpg",

"/80/v2-a3d6d8832090520e7ed6c748a8698e4e_720w.jpg",

"/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:

xmlns="/winfx/2006/xaml/presentation"

xmlns:x="/winfx/2006/xaml"

xmlns:d="/expression/blend/2008"

xmlns:mc="/markup-compatibility/2006"

xmlns:ws="/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）狀態(tài)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,

o