[WP8.1UI控件編程]Windows Phone VirtualizingStackPanel、ItemsStackPanel和ItemsWrapGrid虛擬化排列布局控件

11.2.2 VirtualizingStackPanel、ItemsStackPanel和ItemsWrapGrid虛擬化排列布局控件

     VirtualizingStackPanel、ItemsStackPanel和ItemsWrapGrid都是虛擬化佈局控件，通常狀況下在界面的佈局上不多會用到這些虛擬化排列的控件，大部分都是封裝在列表的佈局面板上使用，主要的目的就是爲了實現列表上大數據量的虛擬化，從而極大地提升列表的效率。那麼其實這3個虛擬化佈局控件都是列表控件的默認佈局排列的方式，其中VirtualizingStackPanel控件是ListBox的默認佈局面板，ItemsStackPanel是ListView的默認佈局面板，ItemsWrapGrid是GridView的默認佈局面板。

    VirtualizingStackPanel控件和ItemsStackPanel控件都是表示沿着水平方向或垂直垂直方向將內容虛擬化地排列在一行上。它們控件所實現的排列布局效果和StackPanel控件是同樣的，不一樣的是這些控件能夠實現虛擬化的邏輯。對於數據較多的列表佈局，使用VirtualizingStackPanel控件或者ItemsStackPanel控件會比StackPanel控件高效不少，由於虛擬化控件只是把當前屏幕範圍內的數據顯示出來，其餘的數據都經過虛擬化的技術進行處理，並無進行UI的初始化顯示，因此效率很高。ItemsWrapGrid控件實現的則是網格的虛擬化佈局效果，虛擬化原理也是和ItemsStackPanel控件相似的，只不過他們排列的方式不同。

    這些虛擬化排列布局控件會計算可見項的數量，並處理來自 ItemsControl（如 ListBox）的ItemContainerGenerator，以便只爲可見項建立 UI 元素。僅當StackPanel中包含的項控件建立本身的項容器時，纔會在該面板中發生虛擬化。 可使用數據綁定來確保發生這一過程，若是是直接建立列表的項元素而後添加爲虛擬化排列布局控件的子對象，那麼這種方式是不會進行虛擬化處理的。下面以ItemsStackPanel來講明咱們如何去利用虛擬化排列布局控件去解決一些實際的問題。

    ItemsStackPanel是ListView元素的默認項宿主。使用ListView列表控件綁定數據的時候，默認是採用了ItemsStackPanel控件對數據項進行排列。若是你使用ItemsControl列表控件來展現數據，要給這個列表增長虛擬化的功能，ItemsStackPanel對象元素必須包含在一個ItemsPanelTemplate中。如今咱們再回過頭來看本章的第一個例子，用ItemsControl控件綁定到2000個數據項的集合的時候，加載的速度很慢，這就是沒有使用虛擬化的結果。若是在ItemsControl控件上使用ItemsStackPanel來進行虛擬化佈局，那麼你會發現加載的速度很是快。給ItemsControl控件添加ItemsStackPanel虛擬化佈局，須要把代碼修改爲以下：

    <ItemsControl x:Name="itemsControl">
        <!--使用ItemsStackPanel控件做爲ItemsControl的佈局面板-->
        < ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsStackPanel/>
            </ItemsPanelTemplate>
        </ ItemsControl.ItemsPanel>
        <ItemsControl.Template>
            <ControlTemplate TargetType="ItemsControl">
                <ScrollViewer>
                    <ItemsPresenter/>
                </ScrollViewer>
            </ControlTemplate>
        </ItemsControl.Template>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                ……省略若干代碼
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

    若是在列表中須要使用到ItemsStackPanel控件虛擬化的技術的時候，還要注意一個事情是，不要破壞ScrollViewer和ItemsPresenter的結構，不然將實現不了虛擬化的效果。若是你在ScrollViewer和ItemsPresenter之間再添加一個StackPanel控件，以下所示：

    <ControlTemplate TargetType="ItemsControl">
        <ScrollViewer>
            <StackPanel>
                <ItemsPresenter/>
            </StackPanel>
        </ScrollViewer>
    </ControlTemplate>

    那麼這時候，ItemsStackPanel控件會一次性把全部的數據都初始化，不會起到虛擬化的做用。由於ItemsStackPanel控件虛擬化的時候是根據每一個Item的固定的大小來進行佈局的虛擬化處理的，當在ScrollViewer和ItemsPresenter中加入了其餘的控件以後會破壞了ItemsStackPanel控件的虛擬化佈局，致使ItemsStackPanel控件沒法準確地測量出來列表的數據項的佈局。

11.2.3 實現橫向虛擬化佈局

    一般咱們實現的列表佈局大部分都是豎向的佈局，包括GridView控件的佈局總體上也是豎向的佈局。那麼ListView控件和ListBox控件默認都是豎向垂直滾動的列表，若是要讓其水平滾動那麼就須要自定義其佈局的面板，這時候咱們就可使用ItemsStackPanel控件去實現了，若是咱們並不須要ListView控件的那麼多的功能和效果，就能夠直接使用最基本的列表控件ItemsControl控件搭配ItemsStackPanel控件去實現橫向滾動的效果，而且帶有虛擬化的功能。

    下面咱們用一個例子使用ItemsControl控件橫向滾動展現圖片，在這個例子裏面會使用到ItemsStackPanel控件的Horizontal佈局。列表中會有100個數據項，咱們經過日誌來查看其加載的數據項是怎樣的。

代碼清單11-7：橫向虛擬化列表（源代碼：第11章\Examples_11_7）

    （1）首先，建立實體類和自定義的集合類，實體類Item和自定義的集合類ItemList。

Item.cs文件主要代碼
------------------------------------------------------------------------------------------------------------------
    public class Item
    {
        // 圖片對象
        public BitmapImage Image { get; set; } 
        // 圖片名字
        public string ImageName { get; set; }
    }

ItemList.cs文件主要代碼
------------------------------------------------------------------------------------------------------------------
    public class ItemList : IList
    {
        // 設置集合的數量爲100
        public ItemList()
        {
            Count = 100;
        }
        // 集合數量屬性
        public int Count { get; set; }
        // 根據索引返回數據項
        public object this[int index]
        {
            get
            {
                // 加載的圖片是程序裏面的圖片資源，5張圖片循環加載
                int imageIndex = 5 - index % 5;
                Debug.WriteLine("加載的集合索引是：" + index );
                return new Item { ImageName = "圖片" + index, Image = new BitmapImage(new Uri("ms-appx:///Images/" + imageIndex + ".jpg", UriKind.RelativeOrAbsolute)) };
            }
            set
            {
                throw new NotImplementedException();
            }
        }
        //……省略若干代碼
    }

（2）實現ItemsControl的橫向虛擬化佈局。

    要實現ItemsControl的橫向虛擬化佈局，除了使用ItemsStackPanel控件的Horizontal佈局，還須要在ItemsControl中設置ScrollViewer.HorizontalScrollBarVisibility="Auto"，這樣列表就能夠水平滾動了。列表的代碼以下：

MainPage.xaml文件主要代碼
------------------------------------------------------------------------------------------------------------------
    <ItemsControl x:Name="list">
        <!--使用ItemsStackPanel控件做爲ItemsControl的佈局面板-->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsStackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.Template>
            <ControlTemplate TargetType="ItemsControl">
                <ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto"  ScrollViewer.VerticalScrollBarVisibility ="Disabled">
                    <ItemsPresenter/>
                </ScrollViewer>
            </ControlTemplate>
        </ItemsControl.Template>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <Image Source="{Binding Image}" Width="144"  Height="240" Stretch="UniformToFill"></Image>
                    <TextBlock Text="{Binding ImageName}"></TextBlock>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

MainPage.xaml.cs文件主要代碼
------------------------------------------------------------------------------------------------------------------
    public MainPage()
    {
        InitializeComponent();
        list.ItemsSource = new ItemList();
    }

（3）列表的運行效果如圖11.8所示，採用Debug調試下運行程序能夠看到日誌顯示列表只是初始化了10個數據項，日誌以下所示：

    /*日誌開始*/

    加載的集合索引是：0

    加載的集合索引是：1

    加載的集合索引是：2

    加載的集合索引是：3

    加載的集合索引是：4

    加載的集合索引是：5

    加載的集合索引是：6

    加載的集合索引是：7

    加載的集合索引是：8

    加載的集合索引是：9

    /*日誌開始*/

 

本文來源於《深刻理解Windows Phone 8.1 UI控件編程》

源代碼下載：http://vdisk.weibo.com/s/zt_pyrfNHoezI

歡迎關注個人微博@WP林政

WP8.1技術交流羣：372552293