WPF性能优化之UI虚拟化 - ToB企服应用市场:ToB评测及商务社交产业平台

<ItemsControl VirtualizingPanel.IsVirtualizing="True">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

复制代码

public class CustomVirtualizingPanel : VirtualizingPanel, 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) { }<local:CustomVirtualizingPanel>
<local:CustomVirtualizingPanel.VirtualizingPanelBuilder>
<local:VirtualizingStackPanelBuilder ItemHeight="100" />
</local:CustomVirtualizingPanel.VirtualizingPanelBuilder>
</local:CustomVirtualizingPanel>//设置滚动条垂直偏移量
public Rect MakeVisible(Visual visual, Rect rectangle) { return default; } //强制滚动Panel子控件（比如只有部分区域显示在可视范围内，点击之后完全滚动到可视范围内）
}

复制代码

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);
}

复制代码

public IVirtualizingPanelBuilder VirtualizingPanelBuilder
{
get { return (IVirtualizingPanelBuilder)GetValue(VirtualizingPanelBuilderProperty); }
set { SetValue(VirtualizingPanelBuilderProperty, value); }
}

复制代码

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();
}
}

复制代码

<local:CustomVirtualizingPanel>
<local:CustomVirtualizingPanel.VirtualizingPanelBuilder>
<local:VirtualizingStackPanelBuilder ItemHeight="100" />
</local:CustomVirtualizingPanel.VirtualizingPanelBuilder>
</local:CustomVirtualizingPanel>

复制代码