Windows Phone 8.1 列表控件(3):多数据呈现

说到 List 控件,Windows Phone 8.1 上推荐使用的是 ListView 和 GridView。

而这两个控件实在太多东西可讲了,于是分成三篇来讲:

(1)基本

(2)分组数据

(3)多数据呈现

ListView 和 GridView 的最大差别就是:ListView 是一条条依序排列的,而 GridView 则是一块块依序排列的,因此 ListView 中的一项就会占据整整一行或者一列,而 GridView 的一项只会占据它应有的大小,一行或一列中可以放置多项。

而两者在其它方面上基本一致,因此下文只对 ListView 进行介绍,GridView 其实也一样的。

 


 

多数据呈现,也就是说大量的数据要在 ListView 中呈现时,加载必定会较慢,那要如何让用户体验更好呢?

(1)添加 ListView 的 ContainerContentChanging 事件

如字面意思所示,也就是当 ListView 的内容(也就是Item)发生改变时会触发的事件:

<ListView ContainerContentChanging="IncrementalUpdateHandler"/>

(2)确定 Item 内容的呈现顺序

比如 Item 的结构为:

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

一般的做法都是先让占位符(templatePlaceholder)呈现,然后根据每项内容的重要程度和加载难度依次排序呈现。

假设这个 Item 的呈现顺序为:Placeholder -> Title -> Image, SubTitle。

(3)处理 ListView 的 ContainerContentChanging 事件

Windows Phone 8.1 列表控件(3):多数据呈现
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);
    }
}
Windows Phone 8.1 列表控件(3):多数据呈现

首先将 args.Handled 设为 true 以及检查 args.Phase 是否不为 0。

然后根据控件名称找到各控件,并根据需要设置每个控件的 Opacity,隐藏或显示它们。(注意,不能调整 Visible 属性,因为这会再次触发 ContainerContentChanging 事件)

最后调用 args.RegisterUpdateCallback(MethodName),显示下一个要呈现的控件内容。

Windows Phone 8.1 列表控件(3):多数据呈现
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
Windows Phone 8.1 列表控件(3):多数据呈现
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

其实也就是根据第二步中确定的内容呈现顺序依次调用 RegisterUpdateCallback。

Windows Phone 8.1 列表控件(3):多数据呈现,布布扣,bubuko.com

Windows Phone 8.1 列表控件(3):多数据呈现

上一篇:转载:阮一峰 Rest API设计原则


下一篇:datagridview 行高列宽的自动设置