[Wp8.1ui Control Programming] Windows Phone VirtualizingStackPanel, Itemsstackpanel, and Itemswrapgrid virtualization arrange layout controls

11.2.2 VirtualizingStackPanel, Itemsstackpanel, and Itemswrapgrid virtualization arrange layout controls

VirtualizingStackPanel, Itemsstackpanel, and Itemswrapgrid are all virtualized layout controls, which are rarely used in the layout of the interface, most of which are encapsulated in the layout panel of the list, The main purpose is to virtualize the large amount of data on the list, thus greatly improving the efficiency of the list. In fact, these 3 virtualized layout controls are the default layout arrangement for the list control, where the VirtualizingStackPanel control is the default layout panel for the listbox, and Itemsstackpanel is the default layout panel for the ListView. Itemswrapgrid is the default layout panel for the GridView.

Both the VirtualizingStackPanel control and the Itemsstackpanel control represent the virtualized arrangement of content on one line, either horizontally or vertically. The arrangement layout effects implemented by their controls are the same as the StackPanel controls, and the difference is that the controls can implement the logic of virtualization. For a more data-rich list layout, using the VirtualizingStackPanel control or the Itemsstackpanel control is much more efficient than the StackPanel control, because the virtualization control simply displays the data in the current screen range, Other data is processed by virtualization technology and is not initialized to display the UI, so it is highly efficient. The Itemswrapgrid control implements the grid's virtualized layout effect, and the virtualization principle is similar to the Itemsstackpanel control, except that they are arranged differently.

These virtualized arrangement layout controls calculate the number of visible items and process ItemContainerGenerator from ItemsControl, such as a ListBox, to create UI elements for visible items only. Virtualization occurs only when the item control contained in StackPanel creates its own item container. You can use data binding to ensure that this process occurs, and if you create the item element of the list directly and then add the child object of the layout control to the virtualization arrangement, this is not done in a virtualized manner. Here's a itemsstackpanel to illustrate how we can use virtualization to arrange layout controls to solve some real-world problems.

Itemsstackpanel is the default item host for the ListView element. When you use the ListView list control to bind data, the default is to use the Itemsstackpanel control to arrange the data items. If you use the ItemsControl list control to present the data, to add virtualization functionality to the list, the Itemsstackpanel object element must be included in a itemspaneltemplate. Now let's go back to the first example of this chapter, when you use the ItemsControl control to bind to a collection of 2000 data items, the load is slow, which is the result of not using virtualization. If you use Itemsstackpanel for virtualized layouts on ItemsControl controls, you will find that loading is very fast. To add the Itemsstackpanel virtualization layout to the ItemsControl control, you need to modify the code to read as follows:

<ItemsControl x:Name="itemsControl">
         <!--Use the ItemsStackPanel control as the layout panel of the ItemsControl -->
         <CategoriesControl.ItemsPanel>
             <ItemsPanelTemplate>
                 <ItemsStackPanel/>
             </ItemsPanelTemplate>
         </ ItemsControl.ItemsPanel>
         <ItemsControl.Template>
             <ControlTemplate TargetType="ItemsControl">
                 <ScrollViewer>
                     <ItemsPresenter/>
                 </ScrollViewer>
             </ControlTemplate>
         </ItemsControl.Template>
         <ItemsControl.ItemTemplate>
             <DataTemplate>
                 ... omit some code
             </DataTemplate>
         </ItemsControl.ItemTemplate>
     </ItemsControl>

If you need to use the Itemsstackpanel control virtualization technology in the list, one thing to keep in mind is that you don't break the structure of ScrollViewer and itemspresenter, otherwise you won't realize the effects of virtualization. If you add a StackPanel control between ScrollViewer and Itemspresenter, as follows:

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

At this point, the Itemsstackpanel control will initialize all the data at once, and it will not act as a virtualization. Because the Itemsstackpanel control is virtualized based on the fixed size of each item, the virtualization of the layout is processed, When other controls are added to ScrollViewer and Itemspresenter, the virtualized layout of the Itemsstackpanel control is destroyed, causing the Itemsstackpanel control to not accurately measure the layout of the data items in the list.

11.2.3 Implementing a landscape-oriented virtualization layout

Most of the list layouts we implement are mostly vertical layouts, including the GridView control's layout as a whole. Then the ListView control and the ListBox control are the vertical vertical scrolling list By default, and if you want to let it scroll horizontally then you need to customize the panel of its layout, then we can use the Itemsstackpanel control to implement the If we do not need so many features and effects of the ListView control, we can use the most basic list control ItemsControl control with the Itemsstackpanel control to achieve the effect of horizontal scrolling, and with the function of virtualization.

In this example, we use the ItemsControl control to scroll through the picture horizontally, and in this case we use the horizontal layout of the Itemsstackpanel control. There will be 100 data items in the list, and we can see what the data items are loaded with the log.

Code Listing 11-7 : Landscape Virtualization List (source code: Chapter 11th \examples_11_7)

(1) First, create the entity class and the custom collection class, the entity class item and the custom collection class itemlist.

Item.cs file main code
-------------------------------------------------- -------------------------------------------------- --------------
     Public class Item
     {
         // image object
         Public BitmapImage Image { get; set; }
         // image name
         Public string ImageName { get; set; }
     } 

ItemList.cs file main code
-------------------------------------------------- -------------------------------------------------- --------------
    Public class ItemList : IList
    {
        // Set the number of collections to 100
        Public ItemList()
        {
            Count = 100;
        }
        // collection quantity attribute
        Public int Count { get; set; }
        // return data items based on the index
        Public object this[int index]
        {
            Get
            {
                // The loaded image is the image resource inside the program, 5 images are loaded cyclically
                Int imageIndex = 5 - index % 5;
                Debug.WriteLine("Loaded collection index is:" + index );
                Return new Item { ImageName = "picture" + index, Image = new BitmapImage(new Uri("ms-appx:///Images/" + imageIndex + ".jpg", UriKind.RelativeOrAbsolute)) };
            }
            Set
            {
                Throw new NotImplementedException();
            }
        }
        //...omitting some code
    } 

(2) realize the ItemsControl of horizontal virtualization layout.

To implement ItemsControl's horizontal virtualization layout, in addition to using the horizontal layout of the Itemsstackpanel control, You also need to set scrollviewer.horizontalscrollbarvisibility= "Auto" in ItemsControl so that the list can scroll horizontally. The code for the list is as follows:

MainPage.xaml file main code
-------------------------------------------------- -------------------------------------------------- --------------
    <ItemsControl x:Name="list">
        <!--Use the ItemsStackPanel control as the layout panel of the 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 file main code
-------------------------------------------------- -------------------------------------------------- --------------
     Public MainPage()
     {
         InitializeComponent();
         list.ItemsSource = new ItemList();
     } 

(3) The list of running effect 11.8, using debug debugging under the running program can see the log display list is only initialized 10 data items, the log is as follows:

/* Log Start */

The loaded Collection index is: 0

The loaded Collection index is: 1

The loaded Collection index is: 2

The loaded Collection index is: 3

The loaded Collection index is: 4

The loaded Collection index is: 5

The loaded Collection index is: 6

The loaded Collection index is: 7

The loaded Collection index is: 8

The loaded Collection index is: 9

/* Log Start */

Source code Download: Http://vdisk.weibo.com/s/zt_pyrfNHoezI