Changing the Page
Once you've set the RootVisual property and your application has finished loading up, you can't change it. That means there's no way to unload a page and replace it with a new one. However, you can achieve much the same effect by changing what you use for your root visual. Instead of setting it with a custom user control, you can use something a bit more flexible—a simple container like the Border or layout panel like the Grid. Here's an example of the latter approach:
// This Grid will host your pages. private Grid rootVisual = new Grid();
private void Application_Startup(object sender, StartupEventArgs e) {
// Load the first page. this.RootVisual = rootVisual; rootVisual.Children.Add(new Page());
Now, you can switch to another page by removing the first page from the Grid and adding a different one. To make this process relatively straightforward, you can add a static method like this to the App class:
public static void Navigate( IserControl newPage) {
// Get the current application object and cast it to // an instance of the custom (derived) App class. App currentApp = (Ap ) pplication.Current;
// Change the currently displayed page. currentApp.rootVisual.Children.Clear(); currentApp.rootVisual.Children.Add(newPage);
Now you can navigate at any point using code like this: App.Navigate(new Page2());
Retaining Page State
If you plan to allow the user to navigate frequently between complex pages, it makes more sense to create them once and keep the page instance in memory until later. (This also has the sometimes-important side effect of maintaining that page's current state, including all the values in any input controls.) To implement this pattern, you first need a system to identify pages. You could fall back on string names, but an enumeration gives you better error prevention:
public enum Pages {
MainWindow, ReviewPage, AboutPage
You can then store the pages of your application in private fields in your custom application class. Here's a simple dictionary that does the trick:
private static Dictionai < age;, UserControl> pageCache = new Dictionar < ages, JserControl>();
In your Navigate() method, create the page only if it needs to be created—in other words, the corresponding object doesn't exist in the collection of cached pages.
public static void Navigate( 'ages newPage) {
// Get the current application object and cast it to // an instance of the custom (derived) App class. App currentApp = (Ap ) pplication.Current;
// Check if the page has been created before.
if (IpageCache.ContainsKey(newPage)) {
// Create the first instance of the page, // and cache it for future use. Type type = currentApp.GetType(); Assembly assembly = type.Assembly;
pageCache[newPage] = (JserControl)assembly.CreateInstance( type.Namespace + "." + newPage.ToString());
// Change the currently displayed page. currentApp.rootVisual.Children.Clear(); currentApp.rootVisual.Children.Add(pageCache[newPage]);
Now you can navigate by indicating the page you want with the Pages enumeration:
App.Navigate(Pages.MainWindow);
Because there's only one version of the page ever created, and it's kept in memory over the lifetime of the application, all the page's state remains intact when you navigate away and back again (see Figure 6-3).
- Figure 6-3. Moving from one page to another
Browser History
The only limitation with the navigation methods described in this section is the fact that the browser has no idea you've changed from one page to another. If you want to allow the user to go back, it's up to you to add the controls that do it. The browser's Back button will only send you to the previous HTML page (thereby exiting your Silverlight application). If you want to create an application that integrates more effectively with the browser and supports the Back button, it is possible—but you'll need to use Silverlight's HTML interaction support. Chapter 12 provides a complete example that demonstrates this technique.
Tip You can add a dash of Silverlight animation and graphics to create a more pleasing transition between pages, such as a gentle fade or wipe. You'll learn how to perform this technique in Chapter 9.
Post a comment