优化Pivot Control Windows Phone 8

Question

case 1:

I have a Pivot Control with 3 Pivot Items, and each pivot item will be filled with data(from server) once it gets focus for the first time.

Now, It makes lot of delay when I navigate back from some other page to this Pivot Page. How to optimise it and reduce the delay? Even I cannot show a ProgressBar while Navigating back to this page.

Case 2:

I have a ListView with more items, say 150, On selection of an item I need a show detailed description of the selectedItem, and it should be swipeable so that the user can see the next records in the same description page.

Right now, i am using Pivot Page and Binding the Items to the ItemsSource Property, and it creates even lot more delay (of 10 seconds) while navigating to the Pivot Page and Navigating from the Pivot Page.

How to get rid of that delay?

Help me. Thanks.

Answer 1

Use LongListSelector (WP8) or ListView (WP8.1) as items holder on first page. It has UI virtualization, so no matter how much items will be on a page, only items on screen will be rendered. It must solve your case 1 delay. If doesn't - the problem is in page 2 destroying.

You details screen approach is completely wrong. Pivot is create for other purposes and its not recommended to hold more than 5 items inside.

So you need:

1. Create page for displaying one item and bind DataContext to LayoutRoot
2. Add ManipulationCompleted event handler to LayoutRoot and check if swipe has place
3. Update DataContext to prev or next item. This will update data displayed on the screen
4. When this will work, create animations to smooth transition of current page to left and right:
   • when user move finger on a phone - move page left and right to the same offset
   • when user leave finger - call animation to complete swipe
   • when animation completed (page out of the screen), update DataContext and call animation to bring new item from other side of the screen

This will replicate Pivot behavior but with no memory consumption for unvisible items

UPD:

Step 4 implementation:

private void LayoutRoot_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
{
    (LayoutRoot.RenderTransform as CompositeTransform).TranslateX += e.DeltaManipulation.Translation.X;
}

private void LayoutRoot_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
{
    if (e.TotalManipulation.Translation.X + e.FinalVelocities.LinearVelocity.X < -100)
    {
        if (current < Count - 1)
        {
            //slide to next item
            current++;
        }
        else
        {
            //no next item - slide back
        }
    }
    else if (e.TotalManipulation.Translation.X + e.FinalVelocities.LinearVelocity.X > 100)
    {
        if (current > 0)
        {
            // slide to prev item

            current--;
        }
        else
        {
            // no prev item - slide back
        }
    }
    else
    {
        // no swipe - slide back
    }
}