Windows Phone 8 : How to load content for each pivot item using MVVM?

Question

I am using Pivot Control in my app. I want to load content of each pivot item through remote url (i.e. using Web services).

For Example - I have a detailed Pivot Page of a recipe. It has 3 pivot items - info, reviews, gallery.And it has Progress indicator on system tray.

I want to load data of each pivot item once i.e. if user swipes back to the previously loaded pivot item, then it should not make web request again for that pivot item and Progress Indicator should be invisible in that case.

Should I use different ViewModel for each pivot item or single MainViewModel for all?

How to manage the visibility of Progress indicator in Pivot page?

Should I create UserControl for each Pivot item?

Answer 1

The pages role is to show data for one "entity", the recipe. Because of this, I would use just one RecipeViewModel and also would not bother creating UserControls for the Pivot items.

You can use binding for managing the ProgressIndicator. I personally use a BasePage inherited from PhoneApplicationPage where I create the binding in code behind, e.g:

if (SystemTray.ProgressIndicator == null)
{
    var indicator = new ProgressIndicator { IsIndeterminate = true };
    var visibilityBinding = new Binding("ProgressBarIsActive");
    BindingOperations.SetBinding(indicator, ProgressIndicator.IsVisibleProperty, visibilityBinding);        
    SystemTray.SetProgressIndicator(this, indicator);

}

With this, you just need to toggle the ProgressBarIsActive property on your ViewModel.

I would use different ViewModels for pivot items only when the pivot items are indetendent (e.g: list of recipes, contact info, about in one Pivot).