I’ve seen a few people asking this question. They have a page which contains a ListView and when an item is selected it navigates to another page. When they navigate backwards the ListView is back up to the top again. This behavior is due to the NavigationCacheMode of the page. By default the page will not cache rendered content when navigating “forward”. So when you navigate back to the page it re-renders the content. When displaying content like a ListView this will cause it to show the top content.
As with most things, there are a few solutions to this problem. The most common solution is to set the NaivationCacheMode to Enabled or Required.
public ListPage()
{ this.InitializeComponent();
this.NavigationCacheMode = NavigationCacheMode.Required;
}
These options do the following:
| Member |
Value |
Description |
| Disabled |
0 |
The page is never cached and a new instance of the page is created on each visit. |
| Required |
1 |
The page is cached and the cached instance is reused for every visit regardless of the cache size for the frame. |
| Enabled |
2 |
The page is cached, but the cached instance is discarded when the size of the cache for the frame is exceeded. |
With this property set for the page the page content will not re-render because the rendered state has been cached!
It does get a little annoying to set the property for every page. I like to use a base page class that contains all my navigation stuff and cache mode as well. This makes it much easier to do the basic stuff.
public class AppPage : Page
{ public AppPage()
{ NavigationCacheMode = NavigationCacheMode.Enabled;
// other stuff for navigation
}
}
public partial class ListPage : AppPage
{ ...
}
Unfortunately this is not a dependency property so you cannot create a base style that sets this property.
A second option is to use the ScrollIntoView method of the ListView. When your page loads, simply scroll your current item into view. This does have the drawback of not being at the exact same spot as before so I do recommend using the NavigationCacheMode.