Multi-Page Application in WPF

This tutorial is about a multi-page application in WPF, in other words an application which just consists of one window but it has multiple pages.  Actually, this is the WPF version from multi-page Silverlight application.

The solution is quite cool but simple,  here’s the steps:

1. Create WPF Application project in Visual Studio (2008 or 2010)

2. Rename Window1 class into PageSwitcher

3. Your code in PageSwitcher.xaml.cs should be like below. there are two Navigate functions (overloading), if you want to pass information to other page, you should call one with object state parameter (i’ll explain this later).

using System;
using System.Windows;
using System.Windows.Controls;

namespace WPFPageSwitch
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class PageSwitcher : Window
    {
        public PageSwitcher()
        {
            InitializeComponent();
            Switcher.pageSwitcher = this;
            Switcher.Switch(new MainMenu());
        }

        public void Navigate(UserControl nextPage)
        {
            this.Content = nextPage;
        }

        public void Navigate(UserControl nextPage, object state)
        {
            this.Content = nextPage;
            ISwitchable s = nextPage as ISwitchable;

            if (s != null)
                s.UtilizeState(state);
            else
                throw new ArgumentException("NextPage is not ISwitchable! "
                  + nextPage.Name.ToString());
        }
    }
}

4. The next steps is creating ISwitchable Interface

namespace WPFPageSwitch
{
  	public interface ISwitchable
  	{
    	void UtilizeState( object state );
  	}
}

5. Create a static class,  name this class as Switcher

using System.Windows.Controls;

namespace WPFPageSwitch
{
  	public static class Switcher
  	{
    	public static PageSwitcher pageSwitcher;

    	public static void Switch(UserControl newPage)
    	{
      		pageSwitcher.Navigate(newPage);
    	}

    	public static void Switch(UserControl newPage, object state)
    	{
      		pageSwitcher.Navigate(newPage, state);
    	}
  	}
}

6. Each page is represented by a user control, implement all user controls with ISwitchable

7. If you want to navigate to other user control, use this code :

Switcher.Switch(new YourUserControl());

8. Then, you just have to call UtilizeState(Object state) … but you’ll need to parse transfered object

9. How the result looks like :

Download the solution here