XAML - Windows Phone 8, loading slowly using Pivot Control

Question

I have a Windows Phone 8 application, i am looking to see why my home page is loading very slowly.

My Home page has the following structure:

    <PivotControl>
     <PivotItem>           
       <LongListSelector/>
     </PivotItem>  Times 5

   </PivotControl>

I have a total of 5 PivotItems each of these items has its own api call to get the items so that it can show them. Each Pivot Item at first loads 12 Elements and them loads more as the user starts scrolling.

My question is has anyone encountered this problem of having a heavy main page with lots of elements? and what improvements did you do so that the page can load faster. I have already reduced the number of elements that i show (before I was loading 40 elements in each PivotItem).

EDIT: My ListItemTemplate is pretty clean (i have cleaned it to make it lighter in XAMLcode) it has one Grid that em-globes and InvokeCommandAction, an image, a border and 3 TextBlocks

Edit2: I have gained about 30% in load time by Collapsing my different LongListSelector when the user is not on my PivotItem thus I am hiding 2 LongListSelector. I am showing the PivotItem that is on the right in the middle (of course) and on the left, when the user swipes left or right I reload and hide the necessary elements. Its not pretty but it helps.

EDIT3: Almost (90%) all of my styles are already placed in my StylePage and called to style my elements. I have found that adding a little animation when the user enters and leave the page, allows me have a better transition between the pages. Here is my classic transition code:

<toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn" />
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn" />
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut" />
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut" />
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

Answer 1

Two things that I didn't see in your question, but thought I would add that would help you.

1. Do not load/initialize your data in the constructor or Loaded event as these are tied to the UI controls. This will freeze the UI.
2. Always make an asynchronous call to the source which will allow the UI to continue while the task is completed.
3. Use OnNavigatedTo (with cached data, if large amount of data being streamed over the network), and use the asynchronous methods.

These should get your UI back up to speed.

Answer 2

I guess you have too much intensive code in MainPage constructor. Either way you can use Task.Run to load data in different thread and/or use MainPage.Loaded event and do your stuff here.

Also try to limit the code you have in App.xaml.cs (Constructor, Launching methods)

Don't forget to use Dispatcher.BeginAction to manipulate with UI when using Task.Run .

There is also Scheduler.Dispatcher.Schedule() to invoke methods with delay.