CODEWITHSUNDEEP
c#performancexamlwindows-phone-8longlistselector
ecth
ecth

Reputation: 1245

LongListSelector: bad performance because of preloading

I want to release an app and test it with the Store-Test-kit. One of my Pivot-views contains some kind of a news page where it always gets 30 news-elements from the server. On my screen is space for about 5 news but still it preloads 17-18 and hangs because of this. I test it with the ItemRealized/ItemUnrealized listeners.

It's kinda stupid that due to automatic behaviour the Test-Kit tells me it's my fault that the app has such a bad responsiveness D:

Is there a way to make it load less news? If I make 1 news 400pixels high it'll load 5-6 of them and doesn't hang. Of course adding spaces is not the best solution =/

And yes: my news have an image with them. But when I comment it out it still hangs. 18 news is just too much to load at once.

Edit:

I am getting the data asynchroniously and bind it. The .xaml:

<phone:LongListSelector x:Name="NewsSelector" LayoutMode="List" IsGroupingEnabled="False" ItemsSource="{Binding OnlineNews}" SelectionChanged="News_LongListSelector_SelectionChanged">
    <phone:LongListSelector.ItemTemplate>
        <DataTemplate>
            <Grid VerticalAlignment="Top" HorizontalAlignment="Left" >
                <!--...-->
                <Image Source="{Binding TeaserImage}" Width="120" Height="120" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.RowSpan="3" />
                <StackPanel Grid.Column="1" Margin="6,0,0,0">
                    <TextBlock Text="{Binding Title}" TextWrapping="Wrap" MaxHeight="54" TextTrimming="WordEllipsis" Style="{StaticResource PhoneTextAccentStyle}" FontFamily="Verdana" FontSize="22" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                    <TextBlock Text="{Binding TeaserText}" TextWrapping="Wrap" MaxHeight="44" TextTrimming="WordEllipsis" Style="{StaticResource PhoneTextTitle3Style}" FontFamily="Verdana" FontSize="18" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                    <TextBlock Text="{Binding PubDate}" Margin="12,4,0,4" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="Verdana" FontSize="18" VerticalAlignment="Top" HorizontalAlignment="Left"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

and the ViewModel .cs:

public void LoadNewsPage()
{
    this.IsLoadingNews = true;
    HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(new Uri(NEWS_URL));
    request.BeginGetResponse(new AsyncCallback(NewsCallback), request);
}

private void NewsCallback(IAsyncResult asynchronousResult)
{
    try
    {
        //...
        foreach (var d in list.news)
        {
            //...
            OnlineNews.Add(new OnlineNewsViewModel() {
                //...
            });
        }
    }
    catch
    {
        //...
    }
}

But it doesn't matter where I get the data from. It also stutters when I wait on another page until all news are loaded and then switch -> creating 18 news with 1 image and 3 textblocks -> hangs. It's better on a Lumia 1320 with more performance. But I have no chance to run this on a Lumia 520 without stutter..

Upvotes: 0

Views: 158

Answers (1)

Depechie
Depechie

Reputation: 6142

Be sure to set the image to do background loading like this:

<Image Height="100" Width="100" Margin="12,0,9,0">
  <Image.Source>
    <BitmapImage UriSource="{Binding ImgURL}" CreateOptions="BackgroundCreation"/>
  </Image.Source>
</Image>

Upvotes: 1

Related Questions