WP tree-like list navigation

Question

In WP application I have tree-like list, where user can see categories and items.

If user clicks item -> I will navigate to item page.

But if user wants to go deeper and clicks category -> I need to show him inner categories and items, so it would be great, if it will be possible to open instance this page again and show inner categories and items, because it has absolutely same logic.

As I know, I can not run multiple instances of one Page.

I could show inner categories on current instance of this page with just changing listbox content, but with this way I got 2 problems:

1. On back button press I need to show previous listbox, so I need to store all previously opened listboxes in something like Stack
2. I want to show page navigation animation for user (for back key press too), that he would see that he going deeper in tree list or that he goes back to previous state.

Maybe some of you had already done something same, could you please give any advice for me?

Answer 1

You CAN have multiple instances of the same Page.

Assuming that each category has a unique ID, you just navigate to the page and provide an ID parameter in Query string. Reserve one ID (0, for example) for the topmost data.

So, your category page will be initially called like this

NavigationService.Navigate("MyCategoriesPage?categoryId=0");

in method OnNavigatedTo you parse the categoryId and read data based on Id from your backend or storage.

When user clicks on a category, you navigate based on a category id to the same page, e.g.:

NavigationService.Navigate("MyCategoriesPage?categoryId=12");

Windows Phone keeps back stack, so navigation on back button will be handled. The only thing which you should keep in mind is that the app may be tombstoned, if user deactivates and reactivates the app. In this case the listbox data won't be preserved. To handle it make sure that you follow the standard pattern in OnNavigatedTo method:

if (!_isInitialized)
{
   int categoryId = int.Parse(NavigationContext.QueryString["categoryId"]);
   ReadData(categoryId);
   _isInitialized = true;
}