UI需要很长时间才能在JumpListSelector（WP8）中显示用户联系人列表 - 如何改善这段时间？ [英] UI is taking a long time to show the user contacts list in a JumpListSelector (WP8) - How to improve this time?

问题描述

我正在开发一个WP8应用程序，我正在尝试使用LongListSelector（作为People应用程序）在JumpList中显示所有用户联系人。

它工作得很好，但根据联系人的数量，用户界面需要很长时间才能显示。

我这样做：

XAML ：

 
< DataTemplate x：Key =" AddrBookItemTemplate" > 
< ListBoxItem> 
< StackPanel VerticalAlignment =" Top" > 
< Border Height =" 62"宽度= QUOT; 62"> 
< Image Source =" {Binding Path = Image}"宽度= QUOT; 62"高度= QUOT; 62"伸展= QUOT;填写" /> 
< / Border> 
< TextBlock Text =" {Binding Path = Name，Mode = OneWay}" /> 
< / StackPanel> 
< / ListBoxItem> 
< / DataTemplate> 
 
< DataTemplate x：Key =" AddrBookGroupHeaderTemplate"> 
< Border Background =" Transparent"余量= QUOT; 0,5,0,0"> 
< Border Width =" 62"高度= QUOT; 62" > 
< TextBlock Text =" {Binding Key}" FontFamily =" {StaticResource PhoneFontFamilySemiLight}" /> 
< / Border> 
< / Border> 
< / DataTemplate> 
 
< phone：JumpListItemBackgroundConverter x：Key =" BackgroundConverter"启用= QUOT;＃FF03A9F4" /> 
< phone：JumpListItemForegroundConverter x：Key =" ForegroundConverter" /> 
 
< Style x：Key =" AddrBookJumpListStyle"的TargetType = QUOT;电话：LongListSelector"> 
< Setter Property =" GridCellSize"值= QUOT; 113113" /> 
< Setter Property =" LayoutMode"值= QUOT;网格和QUOT; /> 
< Setter Property =" ItemTemplate"> 
< Setter.Value> 
< DataTemplate> 
< Border Background =" {Binding Converter = {StaticResource BackgroundConverter}}"宽度= QUOT; 113"高度= QUOT; 113"余量= QUOT; 6英寸> 
< TextBlock Text =" {Binding Key}" FontFamily =" {StaticResource PhoneFontFamilySemiBold}"字号= QUOT; 48英寸;填充= QUOT; 6英寸
 Foreground =" {Binding Converter = {StaticResource ForegroundConverter}}" VerticalAlignment = QUOT;中心" /> 
< / Border> 
< / DataTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 
 
< Grid x：Name =" ContentPanel" Grid.Row = QUOT 1 QUOT;余量= QUOT; 12,10,12,10"> 
< phone：LongListSelector 
 x：Name =" AddrBook" 
 JumpListStyle =" {StaticResource AddrBookJumpListStyle}" 
背景="透明" 
 GroupHeaderTemplate =" {StaticResource AddrBookGroupHeaderTemplate}" 
 ItemTemplate =" {StaticResource AddrBookItemTemplate}" 
 LayoutMode =" List" 
 IsGroupingEnabled =" true" 
 HideEmptyGroups =" true" 
 SelectionChanged =" AddrBook_SelectionChanged" /> 
< / Grid> 
代码：
 
 private void Contacts_SearchContactsCompleted（object sender，ContactsSearchEventArgs e） 
 {
秒表秒表=秒表.StartNew（）; 
 
 IList<联系> contacList = e.Results.Where（m => m.PhoneNumbers.Count（）> 0）。ToList（）; 
 cdList = new List< ContactData>（）; 
 
 foreach（在contacList中联系c）
 {
 BitmapImage img = new BitmapImage（）; 
 img.DecodePixelHeight = 62; 
 img.DecodePixelWidth = 62; 
 img.UriSource = null; 
 
 bool tam = c.GetPicture（）== null; 
 
 if（！tam）
 img.SetSource（c.GetPicture（））; 
 
 foreach（c.PhoneNumbers中的ContactPhoneNumber cpn）
 {
 ContactData cd = new ContactData（）; 
 cd.Name = c.DisplayName; 
 cd.Image = img; 
 cdList.Add（cd）; 
} 
} 
 
列表< AlphaKeyGroup< ContactData>> DataSource = AlphaKeyGroup< ContactData> .CreateGroups（cdList，
 System.Threading.Thread.CurrentThread.CurrentUICulture，
（ContactData s）=> {return s.Name;}，true）; 
 AddrBook.ItemsSource = DataSource; 
 
 cdListFiltred = cdList; 
 
秒表.Stop（）; 
 System.Diagnostics.Debug.WriteLine（" Time elapsed：{0}"，stopwatch.Elapsed）; 
} 
 
我试图用这个"秒表"测量时间，以验证
代码是否是问题，但是它返回"Time elapsed：
 00：00：00.3080245"，并且联系人在视觉上花费的时间比
更多时间显示在UI上。
然后，是XAML的问题？我该怎么做才能更快地显示这个列表？

解决方案

那么，XAML的问题是什么？我该怎么做才能更快地显示这个列表？

它应该由xaml引起。当我们使用大数据时，我建议您为控件执行UI和Data Virtualization。使用虚拟化，数据集仍保留在内存中，但只有在项目$ b $时才会创建项容器b几乎准备好在UI中显示。所以它会很快。

你可以查看这篇文章：

https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh780657.aspx 。

I'm developing a WP8 app, and I'm trying to show all user contacts in a JumpList using LongListSelector (as People app).

It works just fine, but depending on the amount of contacts, the UI is taking a long time to show them.

I'm doing this way:

XAML:

<DataTemplate x:Key="AddrBookItemTemplate" >
    <ListBoxItem>
        <StackPanel VerticalAlignment="Top" >
            <Border Height="62" Width="62">
                <Image Source="{Binding Path=Image}" Width="62" Height="62" Stretch="Fill" />                        
            </Border>
            <TextBlock Text="{Binding Path=Name, Mode=OneWay}" />
        </StackPanel>
    </ListBoxItem>
</DataTemplate>

<DataTemplate x:Key="AddrBookGroupHeaderTemplate">
    <Border Background="Transparent" Margin="0,5,0,0">
        <Border Width="62" Height="62" >
            <TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" />
        </Border>
    </Border>
</DataTemplate>

<phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter" Enabled="#FF03A9F4"/>
<phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>

<Style x:Key="AddrBookJumpListStyle" TargetType="phone:LongListSelector">
    <Setter Property="GridCellSize"  Value="113,113"/>
    <Setter Property="LayoutMode" Value="Grid" />
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Width="113" Height="113" Margin="6" >
                    <TextBlock Text="{Binding Key}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="48" Padding="6" 
               Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Center"/>
                </Border>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,10,12,10">
    <phone:LongListSelector
        x:Name="AddrBook"
        JumpListStyle="{StaticResource AddrBookJumpListStyle}"
        Background="Transparent"
        GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
        ItemTemplate="{StaticResource AddrBookItemTemplate}"
        LayoutMode="List"
        IsGroupingEnabled="true"
        HideEmptyGroups ="true"
        SelectionChanged="AddrBook_SelectionChanged"/>
</Grid>
on code:
private void Contacts_SearchContactsCompleted(object sender, ContactsSearchEventArgs e)
{
    Stopwatch stopwatch = Stopwatch.StartNew();

    IList<Contact> contacList = e.Results.Where(m => m.PhoneNumbers.Count() > 0).ToList();
    cdList = new List<ContactData>();

    foreach(Contact c in contacList)
    {
        BitmapImage img = new BitmapImage();
        img.DecodePixelHeight = 62;
        img.DecodePixelWidth = 62;
        img.UriSource = null;

        bool tam = c.GetPicture() == null;

        if (!tam)
            img.SetSource(c.GetPicture());

        foreach (ContactPhoneNumber cpn in c.PhoneNumbers)
        {
            ContactData cd = new ContactData();
            cd.Name = c.DisplayName;
            cd.Image = img;
            cdList.Add(cd);
        }
    }

    List<AlphaKeyGroup<ContactData>> DataSource = AlphaKeyGroup<ContactData>.CreateGroups(cdList,
                            System.Threading.Thread.CurrentThread.CurrentUICulture,
                        (ContactData s) => { return s.Name; }, true);
    AddrBook.ItemsSource = DataSource;

    cdListFiltred = cdList;

    stopwatch.Stop();
    System.Diagnostics.Debug.WriteLine("Time elapsed: {0}", stopwatch.Elapsed);
}
I was trying to measure the time with this "Stopwatch", to verify if 
the code was the problem, but it returns "Time elapsed: 
00:00:00.3080245", and the contacts is visually taking more time than 
this to appear on UI.
Then, is the problem with the XAML? What could I do to show this list faster?

解决方案

Then, is the problem with the XAML? What could I do to show this list faster?

It should be caused by the xaml. When we use the large data, I recommand you do the both UI and Data Virtualization for the control. With the virtualization, the data set is still kept in memory, but an item container is created only when the item is nearly ready to be shown in the UI. So it will be fast.

You can check this article:
https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh780657.aspx .

这篇关于UI需要很长时间才能在JumpListSelector（WP8）中显示用户联系人列表 - 如何改善这段时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！