Simple Page Navigation With WPF
April 15, 2015 2 Comments
Navigating between pages in a WPF application is actually a very simple process, though made much more confusing both by the many articles that stress use of MVVM and the inference by others that this is much like navigating web-pages in an ASP.NET Internet application. As to the first, the use of MVVM, there is no requirement to use this design paradigm. However for those that like to follow such paradigms, there is no reason not to as it is quite a good one. For the second, that WPF page navigation is akin to web-page navigation, it is and it isn’t…
There are two primary areas of a WPF application where you would insert navigation processes; the “Main Window”, which in many instances will incorporate a master menu if it is being designed like a standard desktop application, and a page where one may want to navigate to a new page as the result of a process.
Setting up a menu in a window in WPF is a fairly straight forward process, which for simplicity’s sake looks like the following code…
The corresponding event code to the menu-item named, “mnuModifyPassword”, which will direct the “Modify Password” page to display is as follows…
(click on image to enlarge)
Notice in the event code above the element, “frameMainFrame”. This is the section of the “Main Window” that is defined to hold the contents of WPF pages. This construct is similar to the older “Classic ASP” web capability of the Microsoft HTML element, “frame”, which is no longer accepted as part of the current web standards. However, in WPF, this construct is the easiest way to make multi-page applications with a master menu.
When processing calls to display a page within a window that contains a frame element, navigating to that page is very straight forward. However, when needing to navigate from a displayed page to another page there is a little additional work that has to be done.
Page to page navigation can be done with the built-in “Forward” and “Back” buttons that are inherently part of every page. However, how often would you design such a process that would require a herirachy of pages that can move to and from with the built-in navigation buttons? Probably not many. And the more acceptable design for most desktop applications would be the display of one page at a time. If however, you do require very complex navigation processes than I would recommend that you review the Microsoft Prism architecture, which is used to support the Microsoft version of the MVVM paradigm, which does have such sophisticated capabilities.
But this article is for simple page navigation so lets now see how it is done from page to page in a standard desktop application. And as you will see there is a major difference between how WPF pages work and those of web-based applications.
Ok, when displaying a page from a call from within the “Main Window” as shown above we use a service called the “NavigationService”, which are provided methods to containers such as a frame. However, a page has no such service by itself unless of course you design a page with a frame within it. As a result, you have to obtain the navigation service that displayed the current page within the main window’s frame. The following code will do this for you…
(click on image to enlarge)
Here is the critical difference between a WPF page and that of a web-based one; when moving from page to page in a web application, page movement is absolute. In other words, once you move to a designated web-page there is nothing more for the current page to do; that is it.
However with a WPF page, you must make it more or less absolute since if the page navigation is done within a called method from within the current page, the page navigation process will be queued for execution and then any remaining processes within the method that called the method for the page navigation will be executed. In other words, you must ensure that your page navigation is the last thing that is performed that does not affect the display process. For example, if you call the method to navigate to a new page and the calling method has a “Close_Page” routine (which would close out the current page) after the call to the navigation method what will happen is that the new page will be first navigated to and then closed from view since the original calling method then processed its close page method.