@

前言

相信很多WPF開發(fā)者都碰到過這種情況，當在一個ItemsControl（或繼承自ItemsControl）控件中綁定一個集合的時候，如果集合中的條目過多，那么界面就會變得卡頓甚至停止響應，特別是在容器或窗口大小發(fā)生改變時，界面的渲染就會給人一種慢半拍的感覺，體驗感非常差，這時我們就可以用虛擬化技術來解決這個問題。

UI虛擬化的核心思想就是只渲染可視范圍內的控件，所以它通常會搭配ScrollViewer控件一起使用，通過ScrollViewer控件中的VerticalOffset、HorizontalOffset、ViewportWidth、ViewportHeight等參數(shù)可以計算出在可視范圍內應該顯示的控件，當控件不被顯示時將它從Panel中移出，這樣就可以保證同一時間只渲染了有限的控件，而不是渲染所有控件，從而達到性能提升的目的。

一、VirtualizingStackPanel

1.1 虛擬化功能介紹

VirtualizingStackPanel是WPF中的一個內置控件，它提供了UI虛擬化的功能，在ListBox、ListView、DataGrid等控件中它是默認布局控件，我們可以通過查看控件模板的方式來看看它是如何定義的。

1、在Window中添加一個ListBox控件。

2、在設計視圖中用鼠標選中ListBox控件并右健依次單擊“編輯其他模板”－“編輯項的布局模板”－“編輯副本”。

3、查看生成的模板代碼。

通過以上代碼可以看出，ListBox有一個名為ItemsPanel的屬性，在該屬性中指定了一個Panel控件，ListBox在渲染時用該Panel來布局子項，我們要實現(xiàn)虛擬化只需要在ItemsPanel中指定VirtualizingStackPanel控件即可。

1.2 虛擬化參數(shù)介紹

如果你自己實現(xiàn)一個繼承自ItemsControl的控件，并按1.1的步驟操作，你會發(fā)現(xiàn)還是無法實現(xiàn)虛擬化功能，原因是沒有開啟虛擬化功能（ListBox、ListView、DataGrid等控件是默認開啟的），要開啟ItemsControl控件的虛擬化功能我們還需要設置VirtualizingPanel.IsVirtualizing附加屬性，以下為示例：

VirtualizingPanel中除了IsVirtualizing參數(shù)以外還有很多其它參數(shù)可以控制更多的虛擬化細節(jié)，以下是參數(shù)說明：

1. VirtualizingPanel.CacheLength="10"
   作用：CacheLength 屬性指定了在虛擬化過程中，控件需要緩存的項目數(shù)。這意味著在視口之外的區(qū)域中，面板會保留一定數(shù)量的項目以提高滾動平滑度。當用戶滾動視圖時，緩存的項目可以更快地重新使用，從而減少重新創(chuàng)建和布局的開銷。
   值：10 表示視口外會緩存 10 個項目。這是一個相對的值，具體數(shù)目可能會根據(jù)實際實現(xiàn)有所不同。
2. VirtualizingPanel.CacheLengthUnit="Item"
   作用：CacheLengthUnit 屬性定義 CacheLength 的單位。可以選擇 Pixel 或 Item，其中 Item 表示緩存的長度以項目的數(shù)量為單位，Pixel 表示緩存的長度以像素為單位。
   值：Item 表示緩存的長度是以項目的數(shù)量為單位。這適用于項目大小固定或數(shù)據(jù)量較小的情況。
3. VirtualizingPanel.IsContainerVirtualizable="True"
   作用：IsContainerVirtualizable 屬性指示面板是否允許對其子項的容器進行虛擬化。設置為 True 表示面板可以對其容器進行虛擬化，從而優(yōu)化性能，特別是在處理大量數(shù)據(jù)時。
   值：True 表示啟用容器虛擬化。
4. VirtualizingPanel.IsVirtualizing="True"
   作用：IsVirtualizing 屬性指示面板是否啟用虛擬化。這是虛擬化的核心設置，設置為 True 表示面板會僅對視口內的項目進行渲染和處理，而不是一次性加載所有項目。
   值：True 表示啟用虛擬化，減少不必要的控件實例化和布局計算。
5. VirtualizingPanel.IsVirtualizingWhenGrouping="True"
   作用：IsVirtualizingWhenGrouping 屬性控制面板在分組時是否繼續(xù)進行虛擬化。當設置為 True 時，面板在分組數(shù)據(jù)時仍然會應用虛擬化策略，以保持性能優(yōu)化。
   值：True 表示即使在數(shù)據(jù)分組時，也保持虛擬化。
6. VirtualizingPanel.ScrollUnit="Item"
   作用：ScrollUnit 屬性定義滾動的單位�？梢赃x擇 Item 或 Pixel，其中 Item 表示每次滾動一個項目，Pixel 表示每次滾動一定像素。
   值：Item 表示每次滾動一個項目的單位，而不是固定像素數(shù)，這對于項目高度一致的情況尤其有效。
7. VirtualizingPanel.VirtualizationMode="Recycling"
   作用：VirtualizationMode 屬性指定虛擬化模式。Recycling 模式表示控件會重用已經(jīng)不再可見的項目的容器，而不是銷毀它們。這種方式可以減少控件的創(chuàng)建和銷毀開銷，從而提升性能。
   值：Recycling 表示啟用重用模式，使面板更高效地管理控件實例，適合動態(tài)數(shù)據(jù)變化的場景。

二、CustomVirtualizingPanel

2.1 基礎知識

要開發(fā)自己的虛擬化Panel我們需要繼承自VirtualizingPanel類，并實現(xiàn)IScrollInfo接口，VirtualizingPanel中提供了操作Panel子控件的相關的方法，IScrollInfo接口定義了ScrollViewer控件的自定義行為，我們實現(xiàn)了IScrollInfo就可以接管ScrollViewer控件的相關操作。
代碼如下（示例）：

public class CustomVirtualizingPanel : VirtualizingPanel, IScrollInfo
{
}

2.1.1 VirtualizingPanel

VirtualizingPanel中有一個名為“ItemContainerGenerator”的屬性，該屬性提供了對虛擬化Panel子控件創(chuàng)建及銷毀的方法，它的工作流程大致如下：

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控件可以看到的那部分區(qū)域的寬度
    public double ViewportHeight { get; }           //ScrollViewer控件可以看到的那部分區(qū)域的高度
    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子控件（比如只有部分區(qū)域顯示在可視范圍內，點擊之后完全滾動到可視范圍內）
}

2.2 實戰(zhàn)案例

2.2.1 需求分析

1. CustomVirtualizingPanel應該具有高度的靈活性，以最小的代價滿足不同的虛擬化布局需求，不需要每次都要重寫一個CustomVirtualizingPanel控件。
2. 最好是可以通過屬性切換布局，這樣可以實現(xiàn)布局切換時的過渡效果。

2.2.2 代碼實現(xiàn)

通過分析要想實現(xiàn)以上效果，最好的方法就是將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) 實現(xiàn)VirtualizingPanelBuilder

public class VirtualizingStackPanelBuilder : DependencyObject, IVirtualizingPanelBuilder
{
    /// 

    /// 虛擬面板
    /// 
    private CustomVirtualizingPanel _virtualizingPanel;

    /// 

    /// 初始化
    /// 
    /// 
    public void Initialize(CustomVirtualizingPanel virtualizingPanel)
    {
        _virtualizingPanel = virtualizingPanel;
    }
    /// 

    /// 獲取Item高度
    /// 
    /// 
    /// 
    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;
    }
    /// 

    /// 獲取Item寬度
    /// 
    /// 
    /// 
    public double GetItemWidth(Size availableSize)
    {
        return availableSize.Width;
    }
    /// 

    /// 計算每行顯示的Item數(shù)
    /// 
    /// 
    /// 
    public int CalculateItemsPerRowCount(Size availableSize)
    {
        return 1;
    }
    /// 

    /// 計算行數(shù)
    /// 
    /// 
    /// 
    public int CalculateRowCount(Size availableSize)
    {
        return _virtualizingPanel.Items.Count;
    }
    /// 

    /// 計算滾動面積
    /// 
    /// 
    /// 
    public Size CalculateExtent(Size availableSize)
    {
        var height = GetItemHeight(availableSize);
        var rowCount = CalculateRowCount(availableSize);
        return new Size(availableSize.Width, height * rowCount);
    }
    /// 

    /// 計算可見區(qū)域內的Item范圍
    /// 
    /// 
    /// 
    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);
    }

    /// 

    /// Item高度
    /// 
    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) 設置參數(shù)

2.2.3 運行效果

為了能夠演示布局切換的過渡效果，這里除了上面的StackPanel布局以外還實現(xiàn)了UniformGrid布局，以下分別演示１億條數(shù)據(jù)布局切換及非虛擬化狀態(tài)下的布局切換過渡效果。
1) 虛擬化切換布局

2) 非虛擬化切換過渡效果