Windows Phone 8.1 List control (3): Multi-Data rendering

When it comes to List controls, the ListView and GridView are recommended on Windows Phone 8.1.

And the two controls are so much to talk about that they are divided into three articles:

(1) Basic

(2) Grouping data

(3) Multi-Data rendering

The biggest difference between the ListView and the GridView is that the ListView is arranged sequentially, while the GridView is a block in order, so one item in the ListView takes up an entire row or column, and the GridView Will only occupy the size it should have, and you can place multiple items in a row or column.

And the two are basically consistent in other aspects, so only the ListView is described below, the GridView is actually the same.

Most of the data is presented, that is, when a large amount of information to be present in the ListView, the load must be slower, how to make the user experience better?

(1) Add containercontentchanging event for ListView

As the literal meaning implies, the event that is triggered when the contents of the ListView (that is, item) are changed:

<containercontentchanging= "Incrementalupdatehandler"/>

(2) Determine the order in which the item content is rendered

For example, the structure of Item is:

 
Grid
   |__Border name=templatePlaceholder 
   |__Image name=templateImage
   |__Grid
      |__TextBlock name=templateTitle
      |__TextBlock name=templateSubTitle

As a general practice, the placeholder (Templateplaceholder) is rendered first, then sorted according to the importance of each content and the difficulty of loading.

Assume that this Item is rendered in the order: Placeholder, Title, Image, SubTitle.

(3) handling the Containercontentchanging event of the ListView

 
private void IncrementalUpdateHandler(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    args.Handled = true;

if( args.Phase != 0 )
        throw new Exception("something went terribly wrong");
    else
    {
        Grid templateRoot = (Grid)args.ItemContainer.ContentTemplateRoot;
        Border placeholder = (Border)templateRoot.FindName("templatePlaceholder");
        Image itemImage = (Image)templateRoot.FindName("templateImage");
        TextBlock title = (TextBlock)templateRoot.FindName("templateTitle");
        TextBlock subtitle = (TextBlock)templateRoot.FindName("templateSubTitle");

        placeholder.Opacity = 1;

        itemImage.Opacity = 0;
        title.Opacity = 0;
        subtitle.Opacity = 0;

        args.RegisterUpdateCallback(ShowText);
    }
}

First, the args. Handled is set to true and the args are checked. Whether the Phase is not 0.

The controls are then found based on the name of the control, and the Opacity of each control is set as needed to hide or display them. (Note that the Visible property cannot be adjusted because it will trigger the Containercontentchanging event again)

The last call to args. Registerupdatecallback (MethodName) that displays the next control content to render.

 
 
private void ShowText(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    args.Handled = true;

    if( args.Phase != 1 )
        throw new Exception("something went terribly wrong");
    else
    {
        SampleItem sItem = (SampleItem)args.Item;

        Grid templateRoot = (Grid)args.ItemContainer.ContentTemplateRoot;
        TextBlock title = (TextBlock)templateRoot.FindName("templateTitle");

        title.Text = sItem.Title;
        title.Opacity = 1;
        args.RegisterUpdateCallback(ShowImage);
    }
}

Showtext

 
private void ShowImage(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    args.Handled = true;

    if( args.Phase != 2 )
        throw new Exception("something went terribly wrong");
    else
    {
        SampleItem sItem = (SampleItem)args.Item;

        Grid templateRoot = (Grid)args.ItemContainer.ContentTemplateRoot;
        Image itemImage = (Image)templateRoot.FindName("templateImage");
        TextBlock subtitle = (TextBlock)templateRoot.FindName("templateSubTitle");
        Border placeholder = (Border)templateRoot.FindName("templatePlaceholder");

        itemImage.Source = new BitmapImage(new Uri(sItem.ItemImage));
        subtitle.Text = sItem.TargetGroup;

        itemImage.Opacity = 1;
        subtitle.Opacity = 1;

        placeholder.Opacity = 0;
    }
}

ShowImage

In fact, the second step is determined by the content rendering order called Registerupdatecallback.