WPF中實現自定義虛擬容器(實現VirtualizingPanel)

在WPF應用程序開發過程中，大數據量的數據展現通常都要考慮性能問題。有下面一種常見的情況:原始數據源數據量很大，但是某一時刻數據容器中的可見元素個數是有限的，剩余大多數元素都處於不可見狀態，如果一次性將所有的數據元素都渲染出來則會非常的消耗性能。因而可以考慮只渲染當前可視區域內的元素，當可視區域內的元素需要發生改變時，再渲染即將展現的元素，最后將不再需要展現的元素清除掉，這樣可以大大提高性能。在WPF中System.Windows.Controls命名空間下的VirtualizingStackPanel可以實現數據展現的虛擬化功能，ListBox的默認元素展現容器就是它。但有時VirtualizingStackPanel的布局並不能滿足我們的實際需要，此時就需要實現自定義布局的虛擬容器了。本文將簡單介紹容器自定義布局，然后介紹實現虛擬容器的基本原理，最后給出一個虛擬化分頁容器的演示程序。 

 

一、WPF中自定義布局 （已了解容器自定義布局的朋友可略過此節）

通常實現一個自定義布局的容器，需要繼承System.Windows.Controls.Panel, 並重寫下面兩個方法:

MeasureOverride —— 用來測量子元素期望的布局尺寸

ArrangeOverride —— 用來安排子元素在容器中的布局。

 

下面用一個簡單的SplitPanel來加以說明這兩個方法的作用。下面的Window中放置了一個SplitPanel，每點擊一次“添加”按鈕，都會向SplitPanel中添加一個填充了隨機色的Rectangle， 而SplitPanel中的Rectangle無論有幾個，都會在垂直方向上布滿容器，水平方向上平均分配寬度。

實現代碼如下:

/// <summary>
/// 簡單的自定義容器
/// 子元素在垂直方向布滿容器，水平方向平局分配容器寬度
/// </summary>
public class SplitPanel : Panel
{
    protected override Size MeasureOverride(Size availableSize)
    {
        foreach (UIElement child in InternalChildren)
        {
            child.Measure(availableSize);   // 測量子元素期望布局尺寸(child.DesiredSize)
        }

        return base.MeasureOverride(availableSize);
    }

    protected override Size ArrangeOverride(Size finalSize)
    {
        if (double.IsInfinity(finalSize.Height) || double.IsInfinity(finalSize.Width))
        {
            throw new InvalidOperationException("容器的寬和高必須是確定值");
        }

        if (Children.Count > 0)
        {
            double childAverageWidth = finalSize.Width / Children.Count;
            for (int childIndex = 0; childIndex < InternalChildren.Count; childIndex++)
            {
                // 計算子元素將被安排的布局區域
                var rect = new Rect(childIndex * childAverageWidth, 0, childAverageWidth, finalSize.Height);
                InternalChildren[childIndex].Arrange(rect);
            }
        }

        return base.ArrangeOverride(finalSize);
    }
}

SplitPanel的MeasureOverride 方法參數availableSize是容器可以給出的總布局大小，在方法體中只依次調用了子元素的Measure方法，調用該方法后，子元素的DesiredSize屬性就會被賦值, 該屬性指明了子元素期望的布局尺寸。（在SplitPanel中並不需要知道子元素的期望布局尺寸，所以可以不必重寫MeasureOverride 方法，但是在一些比較復雜的布局中需要用到子元素的DesiredSize屬性時就必須重寫）

SplitPaneld的ArrangeOverride 方法參數finalSize是容器最終給出的布局大小，26行根據子元素個數先計算出子元素平均寬度，30行再按照子元素索引計算出各自的布局區域信息。然后31行調用子元素的Arrange方法將子元素安排在容器中的合適位置。這樣就可以實現期望的布局效果。當UI重繪時(例如子元素個數發生改變、容器布局尺寸發生改變、強制刷新UI等)，會重新執行MeasureOverride 和ArrangeOverride 方法。

二、虛擬容器原理

要想實現一個虛擬容器，並讓虛擬容器正常工作，必須滿足以下兩個條件:

1、容器繼承自System.Windows.Controls.VirtualizingPanel，並實現子元素的實例化、虛擬化及布局處理。

2、虛擬容器要做為一個System.Windows.Controls.ItemsControl（或繼承自ItemsControl的類）實例的ItemsPanel（實際上是定義一個ItemsPanelTemplate）

 

下面我們先來了解一下ItemsControl的工作機制：

當我們為一個ItemsControl指定了ItemsSource屬性后，ItemsControl的Items屬性就會被初始化,這里面裝的就是原始的數據(題外話:通過修改Items的Filter可以實現不切換數據源的元素過濾，修改Items的SortDescriptions屬性可以實現不切換數據源的元素排序)。之后ItemsControl會根據Items來生成子元素的容器(ItemsControl生成ContentPresenter, ListBox生成ListBoxItem, ComboBox生成ComboBox等等)，同時將子元素容器的DataContext設置為與之對應的數據源，最后每個子元素容器再根據ItemTemplate的定義來渲染子元素實際顯示效果。

對於Panel來說，ItemsControl會一次性生成所有子元素的子元素容器並進行數據初始化，這樣就導致在數據量較大時性能會很差。而對於VirtualizingPanel，ItemsControl則不會自動生成子元素容器及子元素的渲染，這一過程需要編程實現。

接下來我們引入另一個重要概念:GeneratorPosition,這個結構體用來描述ItemsControl的Items屬性中實例化和虛擬化數據項的位置關系，在VirtualizingPanel中可以通過ItemContainerGenerator（注意:在VirtualizingPanel第一次訪問這個屬性之前要先訪問一下InternalChildren屬性，否則ItemContainerGenerator會是null，貌似是一個Bug）屬性來獲取數據項的位置信息，此外通過這個屬性還可以進行數據項的實例化和虛擬化。

獲取數據項GeneratorPosition信息：

/// <summary>
/// 顯示數據GeneratorPosition信息
/// </summary>
public void DumpGeneratorContent()
{
    IItemContainerGenerator generator = this.ItemContainerGenerator;
    ItemsControl itemsControl = ItemsControl.GetItemsOwner(this);

    Console.WriteLine("Generator positions:");
    for (int i = 0; i < itemsControl.Items.Count; i++)
    {
        GeneratorPosition position = generator.GeneratorPositionFromIndex(i);
        Console.WriteLine("Item index=" + i + ", Generator position: index=" + position.Index + ", offset=" + position.Offset);
    }
    Console.WriteLine();
}

第7行通過ItemsControl的靜態方法GetItemsOwner可以找到容器所在的ItemsControl，這樣就可以訪問到數據項集合，第12行代碼調用generator 的GeneratorPositionFromIndex方法，通過數據項的索引得到數據項的GeneratorPosition 信息。

數據項實例化：

/// <summary>
/// 實例化子元素
/// </summary>
/// <param name="itemIndex">數據條目索引</param>
public void RealizeChild(int itemIndex)
{
    IItemContainerGenerator generator = this.ItemContainerGenerator;
    GeneratorPosition position = generator.GeneratorPositionFromIndex(itemIndex);

    using (generator.StartAt(position, GeneratorDirection.Forward, allowStartAtRealizedItem: true))
    {
        bool isNewlyRealized;
        var child = (UIElement)generator.GenerateNext(out isNewlyRealized); // 實例化(構造出空的子元素UI容器)

        if (isNewlyRealized)
        {
            generator.PrepareItemContainer(child); // 填充UI容器數據
        }
    }
}

第10行調用generator 的StartAt方法確定准備實例化元素的數據項位置，第13行調用generator的GenerateNext方法進行數據項的實例化，輸出參數isNewlyRealized為ture則表明該元素是從虛擬化狀態實例化出來的，false則表明該元素已被實例化。注意，該方法只是構造出了子元素的UI容器，只有調用了17行的PrepareItemContainer方法，UI容器的實際內容才會根據ItemsControl的ItemTemplate定義進行渲染。

數據項虛擬化：

/// <summary>
/// 虛擬化子元素
/// </summary>
/// <param name="itemIndex">數據條目索引</param>
public void VirtualizeChild(int itemIndex)
{
    IItemContainerGenerator generator = this.ItemContainerGenerator;
    var childGeneratorPos = generator.GeneratorPositionFromIndex(itemIndex);
    if (childGeneratorPos.Offset == 0)
    {
        generator.Remove(childGeneratorPos, 1); // 虛擬化(從子元素UI容器中清除數據)
    }
}

通過數據條目索引得出GeneratorPosition 信息，之后在11行調用generator的Remove方法即可實現元素的虛擬化。

通過幾張圖片來有一個直觀的認識，數據條目一共有10個，初始化時全部都為虛擬化狀態：

實例化第二個元素:

增加實例化第三、七個元素：

虛擬化第二個元素：

通過觀察可以發現，實例化的數據項位置信息按順序從0開始依次增加，所有實例化的數據項位置信息的offset屬性都是0，虛擬化數據項index和前一個最近的實例化元素index保持一致，offset依次增加。

三、實戰-實現一個虛擬化分頁容器

了解了子元素自定義布局、數據項GeneratorPosition信息、虛擬化、實例化相關概念和實現方法后，離實現一個自定義虛擬容器還剩一步重要的工作：計算當前應該顯示的數據項起止索引，實例化這些數據項，虛擬化不再顯示的數據項。

再前進一步，實現一個虛擬化分頁容器：

這個虛擬化分頁容器有ChildWidth和ChildHeight兩個依賴屬性，用來定義容器中子元素的寬和高，這樣在容器布局尺寸確定的情況下可以計算出可用布局下一共能顯示多少個子元素，也就是PageSize屬性。為容器指定一個有5000個數據的數據源，再提供一個分頁控件用來控制分頁容器的PageIndex，用來達到分頁顯示的效果。

貼出主要代碼：

/// <summary>
/// 計算可是元素起止索引
/// </summary>
/// <param name="availableSize">可用布局尺寸</param>
/// <param name="firstVisibleChildIndex">第一個顯示的子元素索引</param>
/// <param name="lastVisibleChildIndex">最后一個顯示的子元素索引</param>
private void ComputeVisibleChildIndex(Size availableSize, out int firstVisibleChildIndex, out int lastVisibleChildIndex)
{
    ItemsControl itemsControl = ItemsControl.GetItemsOwner(this);

    if (itemsControl != null && itemsControl.Items != null && ChildWidth > 0 && ChildHeight > 0)
    {
        ChildrenCount = itemsControl.Items.Count;

        _horizontalChildMaxCount = (int)(availableSize.Width / ChildWidth);
        _verticalChildMaxCount = (int)(availableSize.Height / ChildHeight);

        PageSize = _horizontalChildMaxCount * _verticalChildMaxCount;

        // 計算子元素顯示起止索引
        firstVisibleChildIndex = PageIndex * PageSize;
        lastVisibleChildIndex = Math.Min(ChildrenCount, firstVisibleChildIndex + PageSize) - 1;

        Debug.WriteLine("firstVisibleChildIndex:{0}, lastVisibleChildIndex{1}", firstVisibleChildIndex, lastVisibleChildIndex)
    }
    else
    {
        ChildrenCount = 0;
        firstVisibleChildIndex = -1;
        lastVisibleChildIndex = -1;
        PageSize = 0;
    }
}

/// <summary>
/// 測量子元素布局,生成需要顯示的子元素
/// </summary>
/// <param name="availableSize">可用布局尺寸</param>
/// <param name="firstVisibleChildIndex">第一個顯示的子元素索引</param>
/// <param name="lastVisibleChildIndex">最后一個顯示的子元素索引</param>
private void MeasureChild(Size availableSize, int firstVisibleChildIndex, int lastVisibleChildIndex)
{
    if (firstVisibleChildIndex < 0)
    {
        return;
    }

    // 注意，在第一次使用 ItemContainerGenerator之前要先訪問一下InternalChildren, 
    // 否則ItemContainerGenerator為null，是一個Bug
    UIElementCollection children = InternalChildren;
    IItemContainerGenerator generator = ItemContainerGenerator;

    // 獲取第一個可視元素位置信息
    GeneratorPosition position = generator.GeneratorPositionFromIndex(firstVisibleChildIndex);
    // 根據元素位置信息計算子元素索引
    int childIndex = position.Offset == 0 ? position.Index : position.Index + 1;

    using (generator.StartAt(position, GeneratorDirection.Forward, true))
    {
        for (int itemIndex = firstVisibleChildIndex; itemIndex <= lastVisibleChildIndex; itemIndex++, childIndex++)
        {
            bool isNewlyRealized;   // 用以指示新生成的元素是否是新實體化的

            // 生成下一個子元素
            var child = (UIElement)generator.GenerateNext(out isNewlyRealized);

            if (isNewlyRealized)
            {
                if (childIndex >= children.Count)
                {
                    AddInternalChild(child);
                }
                else
                {
                    InsertInternalChild(childIndex, child);
                }
                generator.PrepareItemContainer(child);
            }

            // 測算子元素布局
            child.Measure(availableSize);
        }
    }
}

/// <summary>
/// 清理不需要顯示的子元素
/// </summary>
/// <param name="firstVisibleChildIndex">第一個顯示的子元素索引</param>
/// <param name="lastVisibleChildIndex">最后一個顯示的子元素索引</param>
private void CleanUpItems(int firstVisibleChildIndex, int lastVisibleChildIndex)
{
    UIElementCollection children = this.InternalChildren;
    IItemContainerGenerator generator = this.ItemContainerGenerator;

    // 清除不需要顯示的子元素，注意從集合后向前操作，以免造成操作過程中元素索引發生改變
    for (int i = children.Count - 1; i > -1; i--)
    {
        // 通過已顯示的子元素的位置信息得出元素索引
        var childGeneratorPos = new GeneratorPosition(i, 0);
        int itemIndex = generator.IndexFromGeneratorPosition(childGeneratorPos);

        // 移除不再顯示的元素
        if (itemIndex < firstVisibleChildIndex || itemIndex > lastVisibleChildIndex)
        {
            generator.Remove(childGeneratorPos, 1);
            RemoveInternalChildRange(i, 1);
        }
    }
}

 

參考文章:

http://blogs.msdn.com/b/dancre/archive/2006/02/06/526310.aspx (寫的非常好)

 

附上源代碼

 

版權說明：本文章版權歸本人及博客園共同所有，未經允許請勿用於任何商業用途。轉載請標明原文出處:

http://www.cnblogs.com/talywy/archive/2012/09/07/CustomVirtualizingPanel.html 。